CODEWITHSUNDEEP
javascriptjsonhighcharts
Inchara Raveendra
Inchara Raveendra

Reputation: 1667

How to add new points to highcharts after plotting the first 'n' points?

I am very new to Highcharts. The data for my highcharts come from a JSON file. It is an array of about 32 elements.

Is there a way to render the first 8 points on load and keep adding the remaining points one after another every second?

I know this is possible through series.addPoint( , , ) method. I dont exactly know how and where to include this in my code to make it work.

Any help would be much appreciated. Thank you!

 <!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Highcharts data from JSON Response</title>
        <style>
        body{
            margin-top: 30px;
            margin-left:10px;
        }
        </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>      
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script type="text/javascript">
        $(function () {
                var processed_json = new Array();   //TS1
                var processed_json1 = new Array();  //TS2 
                var processed_json2 = new Array();  //TS3
                var processed_json3 = new Array();  //Processing Delay
                var processed_json4 = new Array();  //Input-Output Delay                
                $.getJSON('http://localhost:8080/charts_demo/new4.json', function(data) {
                    // Populate series
                    for (i = 0; i < data.length; i++){


                    processed_json.push([data[i].timestamp1, data[i].val]);
                    processed_json1.push([data[i].timestamp2, data[i].val]);
                    processed_json2.push([data[i].timestamp3, data[i].val]);
                    processed_json3.push([((data[i].timestamp3)-(data[i].timestamp2)), data[i].val]);
                    processed_json4.push([((data[i].timestamp3)-(data[i].timestamp1)), data[i].val]);
                    }

                    // draw chart
                    $('#container').highcharts({
                    chart: {
                        type: "line"
                    },
                    title: {
                        text: "Streaming Flink Data"
                    },
                    xAxis: {
                        type: 'category',
                        allowDecimals: true,
                        title: {
                            text: "Timestamps"
                        }
                    },
                    yAxis: {
                        title: {
                            text: "Steps"
                        }
                    },

                    series: [{
                        name: 'Timestamp1',
                        data: processed_json
                    },
                        {
                            name: 'Timestamp2',
                            data: processed_json1
                    } ,
                        {
                        name: 'Timestamp3',
                        data: processed_json2,
                    },
                        {
                        name: 'Processing Delay',
                        data: processed_json3,
                    },
                        {
                        name: 'Input-Output Delay',
                        data: processed_json4,
                    }

                    ]
                }); 
            });
        });
    </script>
</head>
<body>
   <div style="width: 800px; margin: 2em auto; padding: 1em; border: 1px solid red; border-radius: 0.5em">
    Highcharts data load from a JSON using manual JSON Processing
    </div>
    <div id="container" style="height: 400px"></div>

</body>
</html>

Here is a part of my JSON:

[
    {
        "temperSensorData": "26.183021749996204",
        "temperSensorUnit": "celsius",
        "timestamp": "1370718629809",
        "timestamp2": "1272913900562",
        "timestamp3": "1272914212663",
        "val": 0
    },
    {
        "temperSensorData": "26.183021749996204",
        "temperSensorUnit": "celsius",
        "timestamp": "1370718629809",
        "timestamp2": "1272923870899",
        "timestamp3": "1272923910916",
        "val": 1
    },
    {
        "temperSensorData": "26.183021749996204",
        "temperSensorUnit": "celsius",
        "timestamp": "1370718629809",
        "timestamp2": "1272924061471",
        "timestamp3": "1272924083986",
        "val": 3
    },
    {
        "temperSensorData": "26.183021749996204",
        "temperSensorUnit": "celsius",
        "timestamp": "1370718629809",
        "timestamp2": "1272924164266",
        "timestamp3": "1272924184633",
        "val": 4
    },
    {
        "temperSensorData": "26.183021749996204",
        "temperSensorUnit": "celsius",
        "timestamp": "1370718629809",
        "timestamp2": "1272924268218",
        "timestamp3": "1272924290112",
        "val": 5
    },
    {
        "temperSensorData": "26.183021749996204",
        "temperSensorUnit": "celsius",
        "timestamp": "1370718629809",
        "timestamp2": "1272924379077",
        "timestamp3": "1272924403753",
        "val": 6
    },
    {
        "temperSensorData": "26.183021749996204",
        "temperSensorUnit": "celsius",
        "timestamp": "1370718629809",
        "timestamp2": "1272924506055",
        "timestamp3": "1272924530178",
        "val": 7
    },
    {
        "temperSensorData": "26.183021749996204",
        "temperSensorUnit": "celsius",
        "timestamp": "1370718629809",
        "timestamp2": "1272924618673",
        "timestamp3": "1272924640035",
        "val": 8
    },
    {
        "temperSensorData": "26.183021749996204",
        "temperSensorUnit": "celsius",
        "timestamp": "1370718629809",
        "timestamp2": "1272924724397",
        "timestamp3": "1272924745171",
        "val": 9
    },
    {
        "temperSensorData": "26.183021749996204",
        "temperSensorUnit": "celsius",
        "timestamp": "1370718629809",
        "timestamp2": "1272924824742",
        "timestamp3": "1272924844889",
        "val": 10
    },
    {
        "temperSensorData": "26.183021749996204",
        "temperSensorUnit": "celsius",
        "timestamp": "1370718629809",
        "timestamp2": "2735704061190",
        "timestamp3": "2735704107307",
        "val": 11
    },
    {
        "temperSensorData": "26.183021749996204",
        "temperSensorUnit": "celsius",
        "timestamp": "1370718629809",
        "timestamp2": "2735707965847",
        "timestamp3": "2735708013535",
        "val": 12
    },
    {
        "temperSensorData": "26.183021749996204",
        "temperSensorUnit": "celsius",
        "timestamp": "1370718629809",
        "timestamp2": "2735711252324",
        "timestamp3": "2735711294922",
        "val": 13
    },
    {
        "temperSensorData": "26.183021749996204",
        "temperSensorUnit": "celsius",
        "timestamp": "1370718629809",
        "timestamp2": "2735717187076",
        "timestamp3": "2735717223311",
        "val": 14
    },
    {
        "temperSensorData": "26.183021749996204",
        "temperSensorUnit": "celsius",
        "timestamp": "1370718629809",
        "timestamp2": "2735723635314",
        "timestamp3": "2735723682098",
        "val": 15
    },
    {
        "temperSensorData": "26.183021749996204",
        "temperSensorUnit": "celsius",
        "timestamp": "1370718629809",
        "timestamp2": "2735730238413",
        "timestamp3": "2735730270014",
        "val": 16
    },
    {
        "temperSensorData": "26.183021749996204",
        "temperSensorUnit": "celsius",
        "timestamp": "1370718629809",
        "timestamp2": "2735739320192",
        "timestamp3": "2735739359640",
        "val": 17
    },
    {
        "temperSensorData": "26.183021749996204",
        "temperSensorUnit": "celsius",
        "timestamp": "1370718629809",
        "timestamp2": "2735742926365",
        "timestamp3": "2735742963707",
        "val": 18
    },
    {
        "temperSensorData": "26.183021749996204",
        "temperSensorUnit": "celsius",
        "timestamp": "1370718629809",
        "timestamp2": "2735745756756",
        "timestamp3": "2735745800614",
        "val": 19
    },
    {
        "temperSensorData": "26.183021749996204",
        "temperSensorUnit": "celsius",
        "timestamp": "1370718629809",
        "timestamp2": "2735753411805",
        "timestamp3": "2735753449615",
        "val": 20
    }
]

Upvotes: 4

Views: 1153

Answers (1)

John M
John M

Reputation: 2600

I've created a fiddle of what you need here - I've simplified the data series for this example

So basically you take the first 8 points from each array and use those when creating the chart:

series: [{
  name: 'Timestamp1',
  data: processed_json.slice(0, 8)

Then once you've created the chart you need a function that can be called every second:

function addPoints(series1, series2) {
  if (series1.length > 0) {
    myChart.series[0].addPoint(series1.shift());
    myChart.series[1].addPoint(series2.shift());
    setTimeout(function() {
      addPoints(series1, series2)
    }, 3000);
  }
}

And you start if off with the remaining data, like this:

addPoints(processed_json.slice(8), processed_json1.slice(8));

So basically the function will take (and remove) the first value from the array, and add it to the data series. It then sets a timeout to call itself in one second. It will keep going until there is no data left in the array. I hope that makes sense.

By the way, you may need to think again about how you're displaying this data - you're trying to display the timestamps (which are a huge number) and the difference between them (which is a very small number) on the same scale, which isn't really going to work.

Upvotes: 2

Related Questions