I need to draw a line chart based on time-series.I am using c3.js to plot my chart.I followed this link to achieve my requirement.
var chart = c3.generate({
data: {
x: 'x',
xFormat: '%Y',
columns: [
['x', '2010', '2011', '2012', '2013', '2014', '2015','2016'],
['data1', 30, 200, 100, 400, 150, 250, 400],
['data2', 830, 1200, 1100, 1400, 1150, 1250, 1500],
],
axes: {
data2: 'y2'
},
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%Y'
}
},
y2: {
show: true
}
},
});
This code works fine.
But i have a problem when I'm using the time series, my chart does not showing properly.
How do i achieve my requirement.I need to plot bulk data using time series with data-time-seconds.
My requirement is:
['x', '2013-01-01 12:00:00', '2013-01-02 12:00:05', '2013-01-03 12:00:10', '2013-01-04 12:00:15', '2013-01-05 12:00:20', '2013-01-10 12:00:25', '2013-01-15 12:00:30', '2013-02-15 12:00:35'],
['data1', 30, 200, 100, 400, 150, 250, 400],
['data2', 830, 1200, 1100, 1400, 1150, 1250, 1500],
axis: {
x: {
type: 'timeseries',
tick: {
format: '%Y-%m-%dT%H:%M:%S',
}
},
y2: {
show: true
}
},
X-axis value shown an NaN. How to get appropriate result for my requirement.Thank you.
This is my issue:
Well, your data is fine. But you have missed the option to define the time format. You may need to add the xFormat property in your data object and give the correct format.
var chart = c3.generate({
data: {
x: 'x',
xFormat: '%Y-%m-%d %H:%M:%S',
columns: [
['x', '2013-01-01 12:00:00', '2013-01-02 12:00:05', '2013-01-03 12:00:10', '2013-01-04 12:00:15', '2013-01-05 12:00:20', '2013-01-10 12:00:25', '2013-01-15 12:00:30', '2013-02-15 12:00:35'],
['data1', 30, 200, 100, 400, 150, 250, 400, 200],
['data2', 830, 1200, 1100, 1400, 1150, 1250, 1500, 300],
],
axes: {
data2: 'y2'
},
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%Y-%m-%d %H:%M:%S',
rotate: -90
}
},
y2: {
show: true
}
},
});
Notice the xFormat: '%Y-%m-%d %H:%M:%S' option. Actually that's what you have missed. Here's a working fiddle.
Hope it helps!!
Related
Normally in C3.js to create multiple Y axes you would doe something like this:
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
axes: {
data1: 'y',
data2: 'y2'
}
},
axis: {
y2: {
show: true
}
}
});
However my data is different/dynamic something like this:
['week', 1, 2, 3, 4, 5, 6],
['feed cow 30', 30, 200, 100, 400, 150, 250],
['weight cow 30', 30, 200, 100, 400, 150, 250],
['week', 1, 2, 3, 4, 5, 6],
['feed cow 40', 30, 200, 100, 400, 150, 250],
['weight cow 40', 30, 200, 100, 400, 150, 250],
['week', 1, 2, 3, 4, 5, 6],
['feed cow 60', 30, 200, 100, 400, 150, 250],
['weight cow 60', 30, 200, 100, 400, 150, 250],
So my Column names are dynamic. I create an array for the plotting of the data X axes. So my data is like this:
data: {
xs: xs,
columns: graphdata,
type: "line", .......
Now I want to have 2 Y axes, one for weight and one for feed. How can I achieve that?
Got it:
var axisData = {}; axisData[graphdata[2][0]] = "y"; axisData[graphdata[1][0]] = "y2";
....
data: {
xs: xs,
columns: graphdata,
axes : axisData,
type: "line",
},
I have created my Gauge chart like this:
public pieChart: GoogleChartInterface = {
chartType: 'Gauge',
dataTable: [
['Label', 'Value'],
['Value', 80]
],
options: {
animation: {easing: 'out'},
width: 350, height: 350,
greenFrom: 60, greenTo: 100,
minorTicks: 5,
min: 0, max: 100,
majorTicks: ['0', '20', '40', '60', '80', '100'],
greenColor: '#d0e9c6'
}
};
I want to change the value from 80 -> 60 . I am not sure how to do that in my component and redraw the chart. I am using Angular-7.
Please help
To explain my problem, I use the following code on the c3js website (http://c3js.org/samples/chart_bar.html) :
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 100, 140, 200, 150, 50]
],
type: 'bar'
},
bar: {
width: {
ratio: 0.5 // this makes bar width 50% of length between ticks
}
// or
//width: 100 // this makes bar width 100px
}
});
setTimeout(function () {
chart.load({
unload : true,
columns: [
['data3', 130, -150, 200, 300, -200, 100]
]
});
}, 3000);
setTimeout(function () {
chart.load({
unload : true,
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 100, 140, 200, 150, 50]
],
});
}, 4000);
I click on data1 to hide one of the data before it is updated, I have the following, which is normal:
But after the final update, I got a weird behavior where data1 is "half displayed":
Is there any way to solve this issue?
Thank you
The issue seems to be the drawing logic of c3. But there is a workaround for this issue. Check the following code:
setTimeout(function () {
chart.load({
unload : true,
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 100, 140, 200, 150, 50]
],
done : function() {
// After chart is drawn, shown all the hidden legend.
chart.show();
}
});
}, 4000);
I am using C3.js to plot below graph but months name are not showing continuously on x-axis even data is showing, please let me know how can I resolve it
for x-axis data should be like [mar-2017 , April-2017,May-2017,June-2017,July-2017...so on]
var chart = c3.generate({
bindto: bindingElement,
data: {
x:'x',
columns: plotData,
order:false,
type: 'bar',
groups: datagroup
},
bar: {
width: {
ratio: 0.70
}
},
axis: {
x: {
type: 'timeseries',
tick: {
rotate: 30,
format: '%b%Y'
}
}
}
});
Try setting axis.x.tick.culling to false:
axis: {
x: {
tick: {
culling: false
}
}
}
It prevents c3 from hiding particular ticks.
try this one JSFiddle
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [
['data1', 30000, 20000, 10000, 40000, 0, 0, 0, 0],
['data2', 0, 0, 0, 0, 15000, 25000, 50000, 10000],
['data3', 0, 0, 0, 0, 15000, 25000, 50000, 10000]
],
order:false,
type: 'bar',
groups: [
['data2', 'data3']
]
},
bar: {
width: {
ratio: 0.70
}
},
axis: {
x: {
type: 'category',
categories:["mar-2017" , "April-2017","May-2017","June-2017","July-2017","August-2017","September-2017","October-2017"],
tick: {
rotate: 30,
format: '%b%Y'
}
}
}
});
Or I think that your date format is incorrect for the JSON Data,
You can also try with time series as below
var chart = c3.generate({
bindto: '#chart',
data: {
x: 'x',
columns: [
['x', '2017-01-01' , '2017-02-01','2017-03-01','2017-04-01','2017-05-01','2017-06-01','2017-07-01','2017-08-01'],
['data1', 30000, 20000, 10000, 40000, 0, 0, 0, 0],
['data2', 0, 0, 0, 0, 15000, 25000, 50000, 10000], ['data3', 0, 0, 0, 0, 15000, 25000, 50000, 10000]
],
order:false,
type: 'bar',
groups: [
['data2', 'data3']
]
},
bar: {
width: {
ratio: 0.70
}
},
axis: {
x: {
type: 'timeseries',
tick: {
rotate: 30,
format: '%b %Y'
}
}
}
});
Happy coding
I have C3 chart which works when the columns are provided directly but does not work when provided as string param.
Here is jsfiddle:
http://jsfiddle.net/q8h39/79/
Javascript code:
dataval = "[['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'],['data1', 30, 200, 100, 400, 150, 250], ['data2', 130, 340, 200, 500, 250, 350]]";
var chart = c3.generate({
bindto: '#chart1',
data: {
x: 'x',
xFormat: '%Y-%m-%d %H:%M:%S', // 'xFormat' can be used as custom format of 'x'
columns: dataval
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%Y-%m-%d %H:%M:%S'
}
}
}
});
The reason is this is a string (enclosed with in double quotes)
"[['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'],['data1', 30, 200, 100, 400, 150, 250], ['data2', 130, 340, 200, 500, 250, 350]]"
And this is an array object:
[['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'],['data1', 30, 200, 100, 400, 150, 250], ['data2', 130, 340, 200, 500, 250, 350]]
In c3 columns expects an array object not a string
EDIT
To convert the string you passed into JSON array do like this:
dataval = "[['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'],['data1', 30, 200, 100, 400, 150, 250], ['data2', 130, 340, 200, 500, 250, 350]]";
dataval = dataval.replace(/'/g, "\"");//replacing single quotes with double quotes
dataval = JSON.parse(dataval);
Working code here
Hope this helps!