Chart.js: Problem with data over 1000 ( Bar and Lines )

[klederson]

When i have data over 1000 using Bar or Line it just does not show... up to 999 it show just fine, than more than this the chart is not rendered. ( only the bars/lines ) all the rest goes ok:

http://cl.ly/image/3x2x2K0h0Q3I

Example:

I am using my directive ( https://github.com/klederson/angular-chartjs-directive ) but doubt that is the problem

$scope.chart4 = {
      width : "100%",
      height : 400,
      options : {},
      data : {
        labels : global.positions.labels, //labels array obj
        datasets : [
        {
          fillColor : "rgba(247, 81, 64, 0.9)",
          strokeColor : "rgba(220,220,220,1)",
          pointColor : "rgba(220,220,220,1)",
          pointStrokeColor : "#fff",
          data : global.positions.data //data array object
        }
        ]
      }
    }

[klederson]

And of course when i divide the data by 2 (just to validate) than it shows ok

http://cl.ly/image/2e0i441W230t

[SimonHFrost]

I'm having this problem too but with 100. The weird thing is that as long as you start over 100 then it displays it fine, otherwise it won't display anything at all.

Not helpful that it doesn't seem to be showing any errors.

[tnteverett]

I have the same issue in a line chart but my limits are different. I am only able to use about 30 data points. I also notice that the data clips over an x-axis value of 100000. Any idea when these issue might be fixed?
Here is my test code to down size the original array of ~1500 data points.

    for (var i = 0; i < lal; i++) {
        var lsplit = lineArray[i].split(/\,/);
        xLabels[i] = lsplit[1] ;
        yData[i] = lsplit[0];
        if ( i > 30 ) { i = 99999;}
    }
    //alert(yData);
    //alert(xLabels);
    var lineChartData = {
        //labels : ["January","February","March","April","May","June","July"],
        labels : xLabels,
        datasets : [
            {
                fillColor : "rgba(220,220,220,0.5)",
                strokeColor : "rgba(220,220,220,1)",
                pointColor : "rgba(220,220,220,1)",
                pointStrokeColor : "#fff",
                //data : [65,59,90,81,56,55,40]
                data : yData
            }
        ]

    }

[Wikunia]

Unfortunately I have none of these limits...
I used my master branch http://github.com/Wikunia/Chart.js

var lineChartData = {
            labels : ["January","February","March","April","May","June","July","August","September"],
            datasets : [
                {
                    fillColor : "rgba(220,220,220,0.5)",
                    strokeColor : "rgba(220,220,220,1)",
                    pointColor : "rgba(220,220,220,1)",
                    pointStrokeColor : "#fff",
                    data : [65,59,90,81,56,55,40,100,1000]
                },
                {
                    fillColor : "rgba(151,187,205,0.5)",
                    strokeColor : "rgba(151,187,205,1)",
                    pointColor : "rgba(151,187,205,1)",
                    pointStrokeColor : "#fff",
                    data : [28,48,40,19,96,27,100,1000,10000]
                }
            ]

        }

    var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData);

I think for high rangeOfMagnitudes a logarithmic scale is worth a try. #173

[chrisben]

@klederson : I had the same problem as you but found the error was with my data: the array of values was containing strings instead of numbers.
I suppose the code in the library that calculates the max value of all data (= the top y value of the scale) compares those strings directly without trying to do parseFloat on them.
999 > 1000 but '999' > '1000' !

Not really an issue with the library itself, but to avoid future user problems like this maybe it should console.log an alert when datasets contain strings instead of numbers.

[fetcheveryone]

Hi folks,
I've been looking at using the (awesome) chart.js to show my users the elevation on the routes that they go running on. And I ran into this problem. it seemed that every time the altitude went above 100, the x axis would just shrink into a single column. But I think I've found the cause of the problem.

For my convenience, I was labelling all my data points from 1 to 256 along the X-axis, so it was pretty cramped (but I was thinking "I'll sort that later"). However, I tried using blank labels (i.e. empty strings), and the problem went away immediately. So my theory is that the main JS is trying to work out the widths along the x axis, and as you move up from 10's to 100's, or from 100's to 1000's, you reach a tipping point where it just gives up, and so everything collapses into one column.

I probably haven't explained that particularly well, but hey, it's my first post, so be nice :-)

Thanks
Ian

[fulldecent]

I believe this is fixed in the latest version, recommending close

[matthewdolman]

Just want to leave a comment here in case anyone arrives with the problem I have been having.

Modern values limit the size of the canvas element to 32,767px. If you have a large dataset and a large canvas then it is possible that this limit is stopping your chart from rendering.

[teema15135]

I have this problem too.
In my case, the data array's element is string, for the numbers that more than 1000 have the comma, like 1,234.56, so the parser can't do its job.
I've fix it by replace comma (',') with empty string one ('')

[yenket]

@teema15135 do you have any sample codes that I can refer to?

[teema15135]

@teema15135 do you have any sample codes that I can refer to?

for (var i = 0; i < rowLength; i++) {
    var each = rows[i];
    if (!data[each.sensor_module_id]) data[each.sensor_module_id] = {};

    if (!data[each.sensor_module_id]['time']) data[each.sensor_module_id]['time'] = [];
    data[each.sensor_module_id]['time'].push(each['_time']);

    if (!data[each.sensor_module_id]['value']) data[each.sensor_module_id]['value'] = [];

    // this line vvvvvv, for my each['_value'] 's value have a comma on the third
    // ex. 1234.56 is 1,234.56
    data[each.sensor_module_id]['value'].push(each['_value'].replace(/,/g, ''));
}