Develop Reference

weird series sorting problem in Highcharts bar chart

Full code example here: https://jsfiddle.net/_dario/o6nugkrw/24/
I have a data series structured like this (from an API call):
{
"mango": 12736,
"orange": 8906,
"banana": 8404,
"2020": 8239,
"blackberry": 7703,
"pear": 7297,
"raspberry": 6895,
"apple": 6432,
"kiwi": 6202,
"tomato": 6189,
"1995": 6123,
"kumquat": 6038,
"melon": 5982,
"strawberry": 5973,
"pineapple": 5441
}
The sorting order is value high to low, regardless of the label. These are to be plotted in an Highcharts horizontal bar chart.
Notice there are two numeric (string, though) labels: "1995" and "2020".
This specific data format is then parsed for Highcharts:
//--previous highcharts options
series: Object.keys(data).map((s, index) => {
let arr = new Array(length).fill(null, 0, length);
arr[index] = data[s];
return {
name: s,
data: arr,
tooltip: {
headerFormat: ''
},
}
}),
//--subsequent highcharts options
as per the jsfiddle example (https://jsfiddle.net/_dario/o6nugkrw/24/), the sorting order along the Y axis in the chart is different, and no matter what the order the data is presented in, the two "numeric" labels always stay on top and are sorted differently (by numeric value).
I found no reference in the Highcharts docs about this and would like to have them treated as "words" like the others and sorted accordingly. I believe the error might be in the parsing above, but cannot find it.

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.

Data not appearing in HighChart

I am trying to create something like this resizable HighChart.
The difference is that i am loading my data from a blob.
This is the graph that i receive:
This is part of the received data, from the console.log(lines);:
[{ date: '7/13/2016 8:35:00 AM', value: 60 },{ date: '7/13/2016
8:36:00 AM', value: 45 },...]
This is my code: https://jsfiddle.net/end5xc7m/
series: [{
turboThreshold: 20000,
type: 'area',
name: 'Values to date',
data: data}
I believe this is where i am getting the problem from, in the function visitorData.
I am not having the data projected onto the graph.

As jlbriggs noted, this is due to a formatting issue. Unless you you're using categories to plot your axes, Highcharts visualizations will not draw if data are input as strings.
I've updated your fiddle with a few fixes: https://jsfiddle.net/brightmatrix/end5xc7m/2/
function processData(allText) {
var allTextLines = allText.split(/\r?\n/);
var lines = [];
for (var i = 0; i < allTextLines.length - 1; i++) {
var currentLine = allTextLines[i].split(',');
var thisLineValue = [Date.parse(currentLine[0]),parseInt(currentLine[1])];
lines.push(thisLineValue);
}
return lines;
}
Here's what I changed:
What you want to pass along to your chart is a set of arrays like [x,y], where these variables are either dates or numbers. Building the values using curly braces and + concatenation operators turns these into strings. So, instead, I created a temporary array called thisLineValue and pushed that to your lines array.
Next, within that temporary array, I used Date.parse() to turn your date values into timestamps. This is happily understood by Highcharts for datetime axes, as you set with your x-axis.
For your y-axis value, I used parseInt() to avoid those values being turned into strings as well.
Finally, I removed the toString() function when you return the lines array to the chart. Again, this keeps the values in the format the chart is expecting (dates and numbers).
I hope this is helpful for you!

Dygraph x-axis date not displaying

OK, I am totally baffled here. I had this working but have done something to break dygraphs. I am using dygraphs in multiple places - in some instances, I am graphing data that is not a function of time and some data that is a function of time. In the case where data is not a function of time, the x-axis is properly displayed.
In the case where the data is plotted as a function of time, (i.e. the first entry of every array is a javascript Date object) the x-axis is totally neglected (i.e. there are no labels for the x-axis). Currently, the options object looks like
vm.options = {
ylabel: 'P (mb)',
labels: ['t', 'Alicat0'],
legend: 'always',
axes: {
y: {
axisLabelWidth: 70
},
x: {
drawAxis: true,
axisLabelFormatter: function (d) {
return Dygraph.zeropad(d.getHours()) + ":" +
Dygraph.zeropad(d.getMinutes()) + ":" +
Dygraph.zeropad(d.getSeconds());
}
}
},
xlabel: "time"
};
Any help is appreciated.

Problem resolved. Turns out that my array was backwards such that my largest value (most current time) was in the 0 position of the array. Dygraphs did not like this.

Highcharts: passing additional information to a tooltip

I have an array of data points that I am passing to a Highcharts chart that looks like
mydata = [{
x: 1,
y: 3,
nameList: ["name1", "name2"]
}, {
x: 2,
y: 4,
nameList: ["name3", "name4"]
}]
I build the chart like this:
$("#chart").highcharts("StockChart", {
series: [{
data: mydata
}, {
data: yourdata
}]
});
Now, I would like to be able to access the nameList array from the shared tooltip, which I'm trying to do as follows:
tooltip: {
formatter: function() {
var s = "";
$.each(this.points, function(i, point) {
s += point.point.nameList;
});
return s;
},
shared: true
}
but when examining the point objects in Firebug using console.log(point), I can't seem to find the nameList entry anywhere in them. How could I access this auxiliary information in a shared series tooltip? All help is appreciated.

Eureka!
By default, Highcharts will accept several different types of input for the data of a series, including
An array of numerical values. In this case, the numberical values will be interpreted
and y values, and x values will be automatically calculated, either starting at 0 and
incrementing by 1, or from pointStart and pointInterval given in the plotOptions.
An array of arrays with two values. In this case, the first value is the x value and the
second is the y value. If the first value is a string, it is applied as the name of the
point, and the x value is incremented following the above rules.
An array of objects with named values. In this case the objects are point configuration
objects as seen below.
However, the treatment of type 3 is different from types 1 and 2: if the array is greater than the turboThreshold setting, then arrays of type 3 won't be rendered. Hence, to fix my problem, I just needed to raise the turboThreshold setting like so:
...
plotOptions: {
line: {
turboThreshold: longestArray.length + 1
}
},
...
and the chart renders the longestArray data properly. Hurray! The only drawback is that there is a considerable time spent rendering the data for much longer arrays due to "expensive data checking and indexing in long series." If any of you know how I might be able to bypass this checking or otherwise be able to speed up the processing of this data, I'd be extremely thankful if you'd let me know how.

I can see it here:
tooltip: {
formatter: function() {
var s = "";
console.log(this.points[0].point.nameList); // ["name1", "name2"]
$.each(this.points, function(i, point) {
s += point.point.nameList;
});
return s;
},
shared: true
}