Geek Answers Handbook

Automatically merge missing data spaces in Highcharts JS

I am currently trying to implement Highcharts JS in my application, using months as x-axis categories.

However, I have gaps in my data and I want the chart to automatically connect spaces.

For example, if I do not have data for March, I want February and April to be connected to a linear line.

Using the highcharts demo, I edited the data to demonstrate what is currently happening by default:

http://jsfiddle.net/kf26t/1/

data: [7.0, 10.0, null, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]

As you can see, there was a gap between February and April.

I decided to remove months without data from the categories, but then this will give a distorted result, since February and April will be at equal distances from each other in April and May, which will not give an accurate idea.

If I remove 4 months, this inaccurate view is exaggerated:

http://jsfiddle.net/kf26t/2/

 categories: ['Jan', 'Feb', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

The only solution I can think of is to calculate the average between months, but I don't want to display the average.

Is there a built-in way to fill these gaps in Highchart JS? If not, is there a clearer solution to what I have proposed?

Alternatively, is there a way to split the x axis based on the value? So, if there is no March month, February and April appear at a distance of 2 months.

This would also be useful when integers are the x axis. For example, if I had "1, 2, 10", I would not want them to be evenly distributed.

+7
source share
3 answers

For this type of behavior, Highstocks JS should be used instead of Highcharts JS.

 data: [    [Date.UTC(2013,  0, 1), 1],    [Date.UTC(2013, 1, 1), 2 ],    [Date.UTC(2013, 3,  1), 4],    [Date.UTC(2013, 4,  1), 5 ],    [Date.UTC(2013, 5, 1), 6 ],    [Date.UTC(2013, 6, 1), 7],    [Date.UTC(2013,  7,  1), 8],    [Date.UTC(2013,  8,  1),9],    [Date.UTC(2013, 9, 1), 10],    [Date.UTC(2013, 10, 1), 11],    [Date.UTC(2013, 11, 1), 12]   ]

Live Demo: http://jsfiddle.net/q2kSf/

+2
source

I might be missing something, but for your example and explanation, you seem to be looking for the connectNulls property:

http://api.highcharts.com/highcharts#plotOptions.series.connectNulls

+8
source

for reference: type: 'spline' (see Curt Live Demo) helped.

 function createChart() { var chartOptions = { chart: { type: 'spline', *//other options and stuff...* } } }

(i modified this file to mask a short sensor downtime for raspberry-pi project)

-2
source

More articles:


All Articles