CODEWITHSUNDEEP
javascriptjqueryhighcharts
Steve
Steve

Reputation: 23

Highcharts.js cannot see graph line

I'm working on a line chart using highcharts.js on localhost.

I have tried implementing more than 20,000 records and it works smoothly like a charm.

But I have a json file which contains 11,000 records, but due to some unknown reason it does not show me the graph line when I run it.

If I place a check that shows me less than three thousand records then I see the line.

Just copy paste the code in an html file and it should work.

<!DOCTYPE html>
<html>

<head>

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

</head>

<body style="background:#212224;">

<div id="container" style="max-width: 1666px;  margin: 0 auto"></div>
<button id="button">Destroy the chart</button>
<button id="create">create the chart</button>


<script type="text/javascript">

      $('#button').click(function () {
        $('#container').highcharts().destroy();
            });

     $('#create').click(function (){
    $.getJSON('https://dl.dropboxusercontent.com/u/76618626/data2.json', function (data) {
        console.log("data size is : ");
        console.log(data.data.length);      

        var data3 = [];

        //you can comment this loop and uncomment the loop below for working code.      
        $.each(data.data,function(i,d){
            data3.push([new Date(d.timestamp).getTime(),d.value])
            });

        //below is commented code which works for 3000 records.

        //$.each(data.data,function(i,d){
        //if(i<3000){
        //      data3.push([new Date(d.timestamp).getTime(),d.value])
        //      }
        //});



        console.log(data3);

        $('#container').highcharts({

            chart: {
            backgroundColor: '#000000',
                },

            title: {
                text: 'Test Graph',
                style: {
                color: '#FFFFFF',
                fontWeight: 'bold'
                }
            },
            xAxis: {
                type: 'datetime',
                title: {
                    text: 'Time Stamp'
                },
                gridLineColor: 'grey',
                gridLineWidth: 1,
                lineWidth:1

            },
            yAxis: {
                title: {
                    text: 'Value'
                },
                gridLineColor: 'grey',
                gridLineWidth: 1,
                lineWidth:1
            },
            legend: {
                enabled: true
            },

            exporting: false,



            plotOptions: {
                line: {                 
                    lineColor: 'red',
                    fillOpacity: 1,                    
                    lineWidth: 2,
                    states: {
                        hover: {
                            lineWidth: 2
                        }
                    },
                    threshold: null,
                    marker: {
                        fillColor: '#e57255'
                        }


                },


            },


            series: [{
                type: 'line',
                name: 'test',
                data: data3
            }]
        });
    });
});
</script>
</body>
</html>

Upvotes: 1

Views: 145

Answers (1)

Michael Doye
Michael Doye

Reputation: 8171

Make sure all your data is correctly formatted, currently there is data that is not correctly formatted. You can perform a quick check using something like this:

$.each(data.data,function(i,d){
    // Return if value is not a number
    if (isNaN(parseInt(d.value))) return;
    data3.push([new Date(d.timestamp).getTime(),d.value])
});

Updated Fiddle

Upvotes: 1

Related Questions