Develop Reference

C3 Bar Graph x-axis labels are too congested

I have created a Bar graph using C3 JS plugin, The graph is working fine but the problem is with the x-axis labels looks too congested like as shown below
Working JSFiddle
My Code is as given below
var chart = c3.generate({
bindto: "#chart",
data: {
x : 'x',
columns: [
['x', "2016-04-01","2016-04-08","2016-04-15","2016-04-22","2016-04-29","2016-05-06","2016-05-13","2016-05-20","2016-05-27","2016-06-03","2016-06-10","2016-06-17","2016-06-24","2016-07-09","2016-07-10","2016-07-11","2016-07-12","2016-07-13","2016-07-15","2016-07-16","2016-07-17","2016-07-18","2016-07-19","2016-07-20","2016-07-21","2016-07-22","2016-07-23","2016-07-24","2016-07-25","2016-07-26","2016-07-27","2016-07-28","2016-07-29","2016-07-30","2016-07-31","2016-08-01","2016-08-02","2016-08-03","2016-08-04","2016-08-05","2016-08-06","2016-08-07","2016-08-08","2016-08-09","2016-08-10","2016-08-11","2016-08-12","2016-08-13","2016-08-14","2016-08-15","2016-08-16","2016-08-17","2016-08-18","2016-08-19","2016-08-20","2016-08-21","2016-08-22","2016-08-23","2016-08-24","2016-08-25","2016-08-26","2016-08-27","2016-08-28","2016-08-29","2016-08-30","2016-08-31","2016-09-01","2016-09-02","2016-09-03","2016-09-04","2016-09-05","2016-09-06","2016-09-07","2016-09-08","2016-09-09","2016-09-10","2016-09-11","2016-09-12","2016-09-13","2016-09-14","2016-09-15","2016-09-16","2016-09-17","2016-09-18","2016-09-19","2016-09-20","2016-09-21","2016-09-22","2016-09-23","2016-09-24","2016-09-25","2016-09-26","2016-09-27","2016-09-28","2016-09-29","2016-09-30","2016-10-01","2016-10-02","2016-10-03","2016-10-04","2016-10-05","2016-10-06","2016-10-07","2016-10-08","2016-10-09","2016-10-10","2016-10-11","2016-10-12","2016-10-13","2016-10-14","2016-10-15","2016-10-16","2016-10-17","2016-10-18","2016-10-19","2016-10-20","2016-10-21","2016-10-22","2016-10-23","2016-10-24","2016-10-25","2016-10-26","2016-10-27","2016-10-28","2016-10-29","2016-10-30","2016-10-31","2016-11-01","2016-11-02","2016-11-03","2016-11-04","2016-11-09"],
['pv1', 2500,2500,2500,2500,2500,2500,2500,2500,2500,2500,2500,2500,2500,2696,2696,2696,2696,2696,2696,2696,2696,2696,2696,2696,2696,2696,2696,2696,2696,2748,2748,2694,2694,2694,2694,2694,2694,2694,2668,2668,2668,2668,2576,2572,2572,3043,3084,3084,3084,3084,3084,3156,3521,3521,3550,3542,3542,3573,3580,3629,3579,3584,3542,2757,2791,2696,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3414,3414,3414,3414,3414,3414,3414,3414,3414,3414,3414,3414,3414,3369,3376,3371,3373,3371,3379,3363,3373,3347,3348,3382,3402,3410,3434,2579,2579,2369],
['pv2', 1750,1750,1750,1750,1825,1850,1975,2150,2375,2425,2475,2500,2500,2087,2087,2087,2087,2091,2087,1767,1767,1767,1633,1498,1498,1642,1637,1633,1609,1841,1713,1702,1862,1888,1888,1888,1949,1976,1977,2014,2014,2014,1946,1966,1973,2224,2252,2318,2318,2318,2327,2373,2513,2535,2543,2534,2539,2823,2849,2990,3142,3142,3108,2513,2687,2678,2856,2860,2861,2862,2866,2869,2870,2875,2874,2874,2874,2879,2885,2886,2883,2889,2896,2895,2899,2903,2909,2911,2913,2913,2913,2916,2922,2933,2937,2943,2942,2943,2947,1811,1826,1837,1840,1840,1841,1843,1511,1854,1853,1851,1852,1853,1849,1852,1874,1857,1883,1886,1888,1904,1903,1924,1947,2060,2068,2068,2082,1582,1344,836,839,788]
],
type: 'bar'
},
axis: {
x: {
type: 'category',
tick: {
rotate: -60,
multiline: false
},
height: 130
}
}
});
Can anyone please tell me some solution for this
What I did to solve it
I have used timeseries type instead of category type, after that the label issue got resolved but the graph was been plottted with more white spaces for the month of march like as shown below
Working JSFiddle

You can use c3's tick count setting for this, so here we say 20 labels.
However there is an added gotcha in that ticks that now resolve to a fractional category value won't show - i.e. the 2nd equally spaced tick out of 20 may be the 2.6667th element in the x category axis - so you need to have a little format function that adjusts for this, otherwise you just get the end and start labels. (Or you could figure out a tick count that divides into your data count + 1 as a whole number.)
tick: {
format: function (x) {
var cats = this.api.categories();
return cats[Math.round(x)];
},
count: 20,
rotate: -60,
multiline: false
},
http://jsfiddle.net/fz0t10yb/7/

One of the possible solution could be to use x-axis labels at required indexes only & leaving others blank.
['x', "2016-04-01","","","","2016-04-29","","","",...]
['pv1', 2500,2500,2500,2500,2500,2500,2500,2500,...]
['pv2', 1750,1750,1750,1750,1825,1850,1975,2150,...]
You can position labels so that it would capture the date and at same time it looks good also.

Setting xAxis.min breaks area display in two-point highcharts

Please have a look at the following fiddle: http://jsfiddle.net/gy3bV/1/.
That's a "shortened" version of a bug I am trying to fix in my project.
The fiddle code is as simple as this (mine is more complicated, but the issue is reflected here):
$(function () {
var chartOptions = {
xAxis: {
categories: ['Jan', 'Feb'],
min: 0
},
series: [{
type: 'area',
data: [0, 10],
name: 'Area'
}]
};
$('#container0').highcharts(chartOptions);
chartOptions.xAxis.min = 1;
$('#container1').highcharts(chartOptions);
});
So, when min = 0, it draws a valid chart with the first point at xaxis (0 level) and the second one at the level of 10. When min = 1, I expect it to just hide the first point and to draw the area as if it goes from hidden ('Jan', 0) to visible ('Feb', 10). However, it just draws a horizontal line at the level of 10.
It behaves as expected with >2 points: http://jsfiddle.net/gy3bV/2/
It does not work when I am passing full coordinates as series (data: [['Jan', 0], ['Feb', 10]]): http://jsfiddle.net/gy3bV/3/
I proved that it is not related to first point being 0 - the same results with any other value. It is also not related to using type: 'area' - the same behavior with line.
Ideas? What may I be doing wrong? Could that be a highcharts bug?
Thanks!

Your first "working" example has:
xAxis: { categories: ['Jan', 'Feb', 'Mar'] }
series: [{ data: [0, 10, 15] }]
While the "broken" example has:
xAxis: { categories: ['Jan', 'Feb'] }
series: [{ data: [['Jan', 0], ['Feb', 10]] }]
The problem arises when you have min: 1, and only two values. That means that the graph only shows a single point, which means the x-axis doesn't have any span at all (it shows from 0.999 to 1.001). Because you are so far zoomed in the graph appears to be completely horizontal, as the other points are "lightyears" away on the x-axis, while having rather similar y-values.
In this JSFiddle you can see what appears to be a rather strange animation of the process. However, if we go slowly, it becomes more clear that the other points are infact there, just far far away. Take note of how the y-axis never changes, so the points have to be moved so far out that the y-axis difference can't be spotted:
JSFiddle zoom in
JSFiddle zoom out
You will have to make sure that your x-axis spans more than a single value, for example with min: 1, max: 2 or adding more points. If you want to be true to the values being dates you should consider changing to type: 'datetime'.

How can I assign different color for a series in a bar chart with Flot Java Script library?

I use Flot library for charting, I need to present a bars chart and there one special series which should be distinguished, giving it a certain color would be best option.
I've already did so in previous charts giving the color parameter to the series pushed to the data but it's not working here.
Bar for 21 should be in red and it's not.
First I tried the usual:
series.push({
color: 'anyHexColorCode',
data: [[parseFloat(k).toFixed(9).toString(),respuesta['puntos'][k]]]
})
In a loop I checked for the wished value and gave that a different color, same as I also do in the current function I got shown below.
This is how I'm sending to plot:
function plotInterpolacion(respuesta) {
clearCharts()
var series = []
var colorsList = ['#8B0000','#FFA614']
alert("La aproximación para x=" + $("#a").val() + " es igual a: " + respuesta['aproximacion'])
var xs = Object.keys(respuesta['puntos']).sort().forEach(function (k,i) {
if (k == respuesta['aproximacion']) {
series.push({
color: 0,
data: [[parseFloat(k).toFixed(9).toString(),respuesta['puntos'][k]]]
})
}
else {
series.push({
color: 1,
data: [[parseFloat(k).toFixed(9).toString(),respuesta['puntos'][k]]]
})
}
})
$.plot($("#bars"), series, {
bars: {
show:true,
align: "center",
barWidth: 0.6
},
xaxis: {
mode: "categories",
tickLength:0
},
colors: colorsList
})
}
In that example, bar for 21 should be in red.
This is what respuesta['puntos'] looks like:
"puntos": {
"18.0": 79.0,
"17.8": 72.0,
"21.0": 184.0000000000009
}
I have added jquery.colorhelpers.js flot plugin but it didn't make any difference.

The barWidth is expressed in axis units. So with a barWidth of 0.5, and only 0.2 x-units between the first and second bars, they will of course overlap.
A series can have only one color, and all of your bars are in the same series. If you want them to have different colors, split them into separate series.

Use the array directly when you are giving the color to data set? Like this:
color:colorsList[0]
http://jsfiddle.net/Margo/ZRkJN/4/

Flot: Plot rolling 1 hour chart

I have this code to plot a chart which is invoked at a 5 second interval. How can I set the X axis to plot for a rolling 1 hour period?
/**
* Plot chart from retrieved quote data.
*/
function plotData() {
for(var i = 0; i < Quotes.length; ++i) {
if(dataSets[i].length == 7) dataSets[i].shift();
var timestamp = new Date().getTime();
dataSets[i].push([timestamp, Quotes[i].unitprice]);
}
var data = [];
for(var i = 0; i < Quotes.length; ++i) {
data.push({label: Quotes[i].stock, data: dataSets[i]});
}
$.plot('#livetrades-chart', data,
{ xaxis: { axisLabel: 'Time', axisLabelUseCanvas: true,
mode: 'time', timeformat: '%d/%m/%Y %H:%M:%S', timezone: TIME_ZONE },
yaxis: { axisLabel: 'Stock Price', axisLabelUseCanvas: true, tickDecimals: 2 }
});
}
Thanks.

The real-time updates example demonstrates rolling data, where each time a new point is added the oldest one is shifted off the array. What you want to do is basically identical, except with a time axis.
Edit: I still don't understand what the question is; your screenshot shows a time axis, and if you have an hour of data in your array (as opposed to the five seconds shown) then it will show an hour on the axis.
I think maybe you're confused about having to configure the x-axis in some way. You don't: if you provide data whose x-values are spaced an hour apart, the axis will fit to match it. The only thing you might need to tweak is the timeformat (see the Time Series section of the docs for more info) option, if you want the ticks to appear with only H:M:S rather than Y/M/D.

So as far as DNS suggests your cuestion is how did you setup the flot to updates also the xaxis.
here is a runing plunkr for that scenario.
http://plnkr.co/edit/TWpWhL?p=preview

Highcharts blank chart with x and y axis

I want to use highcharts creating a blank chart with no datas but x and y axis.
How to do it?
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
yAxis: {
labels: {
formatter: function() {
return this.value +' km';
}
}
},
series: [{
data: []
}]
});
it returns
But I want to display y-axis with label.

You can put in your min/max values for the xAxis and yAxis and use null for all data.
Forked from #ZaheerAhmed's response above as I figure it deserves a spot as an alternative solution without needing to hide the data after the fact.
i.e.
yAxis: {
min: 1,
max:
} ,
xAxis: {
min: 1,
max: 50
},
series: {
data:[null,null]
}

You can put data and hide the series after setting property
ignoreHiddenSeries : false
Here is Working Demo If you hide the series Y-Axis will still be visible.

FWIW, it seems that highcharts has this functionality built in yAxis.showEmpty
Unfortunately, the fiddle listed in the documentation doesn't work, and there is a related open highcharts issue on the matter:
no hide y axis

Setting min and max for xAxis and yAxis is not a good solution! Because if the data is loaded later (When it's resolved), then you won't have auto calculated min and max. In Highcharts API, it's said:
If null, the max value is automatically calculated
So you should set min and max back to null when the data is loaded. But in my case setting it to null or even deleting the option, didn't result in automatic calculating (Seems strange).
What I did instead was setting charts.showAxes to true! That's it. Take a look at the demo provided by Highcharts
Important: You of course need to set series to something like this:
series: [
{
data: [null, null, null]
},
{
data: [null, null, null]
}
]
Note: Make sure xAxis.showEmpty and yAxis.showEmpty are set true (which is true by default).