Search code examples
chartshighchartsdotnethighcharts

Messed up LineChart with highcharts

I'm using HighCharts to display charts on my site.
What I'd like to achieve is just a line chart with (zoomable) Date-Time X-Axis and numbers in Y-Axis.
But the result is messed up:

enter image description here

I load data by an ajax call, create an array and use chart.series[0].setData(chartData); to set the chart's data. Below is a sample for chartData: 

[[1343071800000, 17], [1343158200000, 171], [1343244600000, 291], [1343075400000, 18],
 [1343161800000, 74], [1343248200000, 293], [1343165400000, 183], [1343251800000, 296]]

Also, I use DotNetHighCharts since I'm using ASP.NET MVC 3, but the generated javascript to create the chart is as follows: 

chart = new Highcharts.Chart({
chart: { renderTo:'chart_container' },
legend: { align: 'left', borderWidth: 0, floating: true, layout: 'horizontal', verticalAlign: 'top', y: 20 },
plotOptions: { series: { cursor: 'pointer', marker: { lineWidth: 1 }, point: { events: { click: function() { alert(Highcharts.dateFormat('%A, %b %e, %Y', this.x) +': '+ this.y +' visits'); } } } } },
subtitle: { text: 'Source: Google Analytics' },
title: { text: 'Daily visits at www.highcharts.com' },
tooltip: { crosshairs: true, shared: true },
xAxis: { gridLineWidth: 1, labels: { align: 'left', x: 3, y: -3 }, tickInterval: 604800000, tickWidth: 0, type: 'datetime' },
yAxis: [{ labels: { align: 'left', x: 3, y: 16, formatter: function() { return Highcharts.numberFormat(this.value, 0); } }, showFirstLabel: false, title: { text: '' } }, { gridLineWidth: 0, labels: { align: 'right', x: -3, y: 16, formatter: function() { return Highcharts.numberFormat(this.value, 0); } }, linkedTo: 0, opposite: true, showFirstLabel: false, title: { text: '' } }],
series: [{ name: 'All visits' }]
Solution

  • Your dataset is not in chronological order. So the charting system is joining all the points as best it can. For time-based series it is always best to sort your time from earliest to latest.