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
– The Guest, Commented Apr 23, 2015 at 17:52
Sorry, it's Data_A .. if i change lets say Data_A[ 2503 ] to 100 after the graph has loded. — Ramgaard
– Ramgaard, Commented Apr 23, 2015 at 20:12
I believe you want this: stackoverflow.com/questions/14100011/… — S McCrohan
– S McCrohan, Commented Apr 24, 2015 at 1:52

Community · Accepted Answer · 2020-06-20 09:12:55Z

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, 2020 at 9:12

CommunityBot

11 silver badge

answered Apr 24, 2015 at 2:00

qtgye

3,6102 gold badges17 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sebastian Bochan Over a year ago

Simpler is using $('#container').highcharts({ //options }); instead of reference in renderTo.

qtgye Over a year ago

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.

Collectives™ on Stack Overflow

Highcharts update graph from array data

1 Answer 1

HOW TO USE:

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

HOW TO USE:

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related