Highcharts update graph from array data

Question

I'm working with Highcharts.js, i'm not sure how i can update the graph.

the series data is taken from an Array called "Data_A" but if i change the values in the array nothing happens to the graph.

Also if someone knows a better way to take the data from the array and put into the graph insted of the way im during it now would it be great, im sure there is a better way.

Where i am now: http://jsfiddle.net/zadaq5e5/1/

This is my Javascript:

var Data_A = [];
var Data_B = [];

Data_A[ 2500 ] = 98;
Data_A[ 2501 ] = 95;
Data_A[ 2502 ] = 98;
Data_A[ 2503 ] = 98;
Data_A[ 2504 ] = 92;
Data_A[ 2505 ] = 98;
Data_A[ 2506 ] = 95;
Data_A[ 2507 ] = 98;
Data_A[ 2508 ] = 98;
Data_A[ 2509 ] = 92;

Data_B[ 2500 ] = 20;
Data_B[ 2501 ] = 30;
Data_B[ 2502 ] = 55;
Data_B[ 2503 ] = 66;
Data_B[ 2504 ] = 02;
Data_B[ 2505 ] = 20;
Data_B[ 2506 ] = 11;
Data_B[ 2507 ] = 26;
Data_B[ 2508 ] = 8;
Data_B[ 2509 ] = 96;


$(function () {

    setInterval(function(){ Data_A[ 2500 ] = Data_A[ 2500 ] + 1; },1000);

    chart = $('#container').highcharts({

        xAxis: {
            categories: []
        },

        tooltip: {
            shared: true,
            useHTML: true,            
            formatter: function() {
                HTML = "";
                HTML = HTML + "<table>";
                HTML = HTML + "<tr><td>Pressure A:</td><td>" + Data_A[this.x] + "</td></tr>";
                HTML = HTML + "<tr><td>Other data:</td><td>" + Data_B[this.x] + "</td></tr>";              
                HTML = HTML + "</table>";                
                return HTML;
            }
        },

        series: [{
            name: 'Compressebility',
            data: [
                {
                    x: 2500,
                    y: Data_A[2500],
                },
                {
                    x: 2501,
                    y: Data_A[2501],
                },
                {
                    x: 2502,
                    y: Data_A[2502],
                },
                {
                    x: 2503,
                    y: Data_A[2503],
                },
                {
                    x: 2504,
                    y: Data_A[2504],
                },
                {
                    x: 2505,
                    y: Data_A[2505],
                },
                {
                    x: 2506,
                    y: Data_A[2506],
                },
                {
                    x: 2507,
                    y: Data_A[2507],
                }
            ]
        }]

    });
});

Where is Data_C? And in which array are you trying to change the values? — The Guest, Apr 23 '15 at 17:52
Sorry, it's Data_A .. if i change lets say Data_A[ 2503 ] to 100 after the graph has loded. — Ramgaard, Apr 23 '15 at 20:12
I believe you want this: http://stackoverflow.com/questions/14100011/highcharts-redraw-vs-new-highcharts-chart — S McCrohan, Apr 24 '15 at 01:52

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

2

If your want to update just a point in your series, you can use Point.update()
Docs Here

However if you want to update the whole series, you may want to use Series.setData().
Docs Here

HOW TO USE:

First, to handle your Chart object, this is how you should instantiate it:

var myChart = new Highcharts.Chart({
   chart : {
            renderTo : $('#container')[0] // The element to where the chart will be rendered
        },
    // Additional options
})

To use the Point.update(), you can access a specific point in your series by
myChart.series[0].data[indexOfSpecificPoint].update(optionsObject).

To use the Series.setData(), you can access the series by
myChart.series[0].setData(dataArray).

From your sample, assuming that you only want to update Data_A[ 2500 ], here is a fiddle I made.

edited Jun 20 '20 at 09:12

Community

1
1

answered Apr 24 '15 at 02:00

qtgye

3,580
2
15
30

Simpler is using $('#container').highcharts({ //options }); instead of reference in renderTo. – Sebastian Bochan Apr 24 '15 at 08:42
The idea here is to directly assign the Chart object to a variable. Using your suggestion returns only the jquery dom object, thus requires another code to access the Chart object itself by `var chart = $("#container").highcharts(); //empty arguments returns the Chart object created in the select dom element`. – qtgye Apr 24 '15 at 08:49

Highcharts update graph from array data

1 Answers1

HOW TO USE: