haarts
Posts: 3
Joined: Mon Feb 08, 2010 8:14 am

Unresponsive script with bar chart and datetime labels?

Hi all,

I'm struggling with Highcharts. I'm creating a bar chart with on the x-axis datetime values. These values were constructed from a JSON source (example: http://gist.github.com/297981). In essence it turns ["2009-10-23", "123"] into [Date.UTC(2009, 10, 23), 123].
Upon rendering something is going wrong. Firefox warns me of an unresponsive script and I need to kill it.
The problem is somewhere with the Date.UTC labels because when I remove the custom dataParser the chart does render (but is basically useless). Am I doing something wrong?

Code: Select all

      var chart = new Highcharts.Chart({
         chart: {
            renderTo: 'container',
            defaultSeriesType: 'column',
            margin: [50, 150, 60, 80]
         },
         title: {
            text: 'texts/ calls <strong>created</strong> per day',
            style: {
               margin: '10px 100px 0 0' // center it
            }
         },
         subtitle: {
            text: 'Source: Backup database',
            style: {
               margin: '0 100px 0 0' // center it
            }
         },
         xAxis: {
            type: 'datetime',
            title: {
               text: 'Date'
            },
            max: 1000
         },
         yAxis: {
            title: {
               text: 'Count'
            },
            plotLines: [{
               value: 0,
               width: 1,
               color: '#808080'
            }],
            max: 20000,
            min: 0
         },
         tooltip: {
            formatter: function() {
                      return '<b>'+ this.series.name +'</b><br/>'+
                  this.x +': '+ this.y;
            }
         },
         legend: {
            layout: 'vertical',
            style: {
               left: 'auto',
               bottom: 'auto',
               right: '10px',
               top: '100px'
            }
         },
         series: [{
            name: 'texts',
            dataURL: 'data/texts.json',
            dataParser: function(data) {
              var double_array = eval(data);
              result = [];
              for(var i = 0; i < double_array.length ;i++) {
               date = double_array[i][0].split("-");
               real_date = Date.UTC(date[0], date[1], date[2])
               result.push([real_date, parseInt(double_array[i][1])]);
             }
            return result;
           }
         }
      });

torstein.honsi
Site Admin
Posts: 9215
Joined: Thu Nov 09, 2006 11:22 am
Location: Vik i Sogn, Norway

Re: Unresponsive script with bar chart and datetime labels?

I think the problem is your axis min and max values. Without those, the code runs fine in the 1.2 prerelease.

Also note that the second parameter of Date.UTC, is the month number starting at 0. So you should do something like this:

Code: Select all

real_date = Date.UTC(date[0], parseInt(date[1]) - 1, date[2])
Torstein Hønsi
CTO, Founder
Highsoft
haarts
Posts: 3
Joined: Mon Feb 08, 2010 8:14 am

Re: Unresponsive script with bar chart and datetime labels?

Aha! Thanks a lot.
With the new 1.2-pre the code no longer hangs and removing the max and min certainly helped.
Unfortunately it doesn't end there. The columns seem to overlap somehow:
http://skitch.com/haarts/nw8jh/columns-overlap

I copied the resulting data in a series to keep it simple:

Code: Select all

      var chart = new Highcharts.Chart({
         chart: {
            renderTo: 'container',
            defaultSeriesType: 'column',
            margin: [50, 150, 60, 80],
            zoomType: 'x'
            
         },
         title: {
            text: 'texts/ calls <strong>created</strong> per day',
            style: {
               margin: '10px 100px 0 0' // center it
            }
         },
         subtitle: {
            text: 'Source: Backup database',
            style: {
               margin: '0 100px 0 0' // center it
            }
         },
         xAxis: {
            type: 'datetime',
            title: {
               text: 'Date'
            }
         },
         yAxis: {
            title: {
               text: 'Count'
            },
            plotLines: [{
               value: 0,
               width: 1,
               color: '#808080'
            }]
         },
         tooltip: {
            formatter: function() {
                      return '<b>'+ this.series.name +'</b><br/>'+
                  this.x +': '+ this.y;
            }
         },
         legend: {
            layout: 'vertical',
            style: {
               left: 'auto',
               bottom: 'auto',
               right: '10px',
               top: '100px'
            }
         },
         plotOptions: {
               column: {
                 dataLabels: {
                   enabled: true
                 },
                 pointPadding: 0.2,
                 borderWidth: 0
               }
         },
         series: [{
          name: "static data",
          data: [[1219622400000, 966], [1227484800000, 32], [1227744000000, 304], [1228348800000, 197], [1228694400000, 325], [1229472000000, 50], [1231200000000, 208], [1235952000000, 50], [1236038400000, 164], [1236124800000, 94], [1236297600000, 259], [1236556800000, 321], [1237161600000, 130], [1238457600000, 94], [1238544000000, 44], [1240185600000, 50], [1241395200000, 2192], [1241827200000, 68], [1242086400000, 1521], [1242172800000, 1428], [1242259200000, 3210], [1242518400000, 829], [1242604800000, 1342], [1242691200000, 760], [1242777600000, 3608], [1242950400000, 471], [1243036800000, 820], [1243209600000, 2348], [1243296000000, 8507], [1243382400000, 2998], [1243555200000, 3995], [1243728000000, 175], [1243814400000, 68], [1243900800000, 3288], [1243987200000, 793], [1244073600000, 192], [1244246400000, 1598], [1244332800000, 2217], [1244505600000, 1404], [1244937600000, 167], [1245110400000, 975], [1245283200000, 3549], [1245456000000, 282], [1245542400000, 95], [1245628800000, 3066], [1245715200000, 29], [1245974400000, 1123], [1246060800000, 1279], [1246147200000, 305], [1246233600000, 782], [1246406400000, 260], [1246579200000, 370], [1247184000000, 342], [1247356800000, 1112], [1247788800000, 792], [1247961600000, 134], [1248048000000, 903], [1248307200000, 4662], [1248393600000, 1086], [1250640000000, 422], [1250985600000, 57], [1251417600000, 72], [1251676800000, 1029], [1251763200000, 939], [1252886400000, 246], [1252972800000, 564], [1253577600000, 72], [1253750400000, 810], [1254009600000, 580], [1254096000000, 1160], [1254268800000, 1036], [1254528000000, 673], [1254614400000, 948], [1254700800000, 580], [1254787200000, 580], [1255046400000, 6], [1255132800000, 622], [1255219200000, 2230], [1255305600000, 580], [1255392000000, 5665], [1255478400000, 1096], [1255564800000, 2042], [1255651200000, 718], [1255737600000, 580], [1255824000000, 10], [1255910400000, 7777], [1255996800000, 580], [1256083200000, 718], [1256774400000, 280], [1256860800000, 616], [1257033600000, 1423], [1257206400000, 456], [1262649600000, 20], [1262736000000, 2181], [1262822400000, 727], [1262908800000, 727]]
         }
         ]
      });
I can't escape the feeling that I'm fundamentally misunderstanding columns with datetime x values.
torstein.honsi
Site Admin
Posts: 9215
Joined: Thu Nov 09, 2006 11:22 am
Location: Vik i Sogn, Norway

Re: Unresponsive script with bar chart and datetime labels?

The column widths are automatically calculated from the distance between the data points, and in your case the first and second points are more distant from the others. In version 1.1 columns can't have a non-categorized x axis at all. Judging from your data set, it would perhaps be better if we calculated the point distance from the two closest points instead of the first two points. Anyway, if you add a null point at a fixed distance from your first point, it will be okay.
Torstein Hønsi
CTO, Founder
Highsoft
haarts
Posts: 3
Joined: Mon Feb 08, 2010 8:14 am

Re: Unresponsive script with bar chart and datetime labels?

Splendid! That indeed solved my problem. Thank you very much.

Return to “Highcharts Usage”