CODEWITHSUNDEEP
javascripthighcharts
Chempooro
Chempooro

Reputation: 435

Append the data values in Highcharts

So what I have is a Highchart in which data values are updating on a click as shown below. :

http://jsfiddle.net/abnitchauhan/4amyconb/

but as you can see Clicking the Button the second data values are starting from 0 again. What I want is the second data to append with the first data. So for that, the second set of data should start from 12th point. I want the chart data to be continuous.

this example uses the setData function from the Highcharts.

$('#button').click(function () {
    chart.series[0].setData([129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4]);
});

I also used push and append but it's throwing an error in Highcharts.

is there any way to accomplish that?

Any help would be appreciated

Upvotes: 0

Views: 925

Answers (3)

Tejas Gajjar
Tejas Gajjar

Reputation: 248

You need to save into the variables and then need to loop through it.

Here I made the change for you please check and let me know if you still have any confusion.

var chart = Highcharts.chart('container', {
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
});


// the button action
var numbersToAdd= [129.2,144.0,176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4];

$('#button').click(function () {

    jQuery.each(numbersToAdd, function(index, item) {
        chart.series[0].addPoint(item);
        })
});

http://jsfiddle.net/akd7z41o/1/

Upvotes: 0

ppotaczek
ppotaczek

Reputation: 39149

You can use setData method with merged arrays:

const data = [...];

var chart = Highcharts.chart('container', {
    series: [{
        data: data
    }]
});

$('#button').click(function() {
    const newData = [...];
    chart.series[0].setData(data.concat(newData));
});

Live demo: http://jsfiddle.net/BlackLabel/dtxum0p6/

Or use addPoint method, but with redraw argument set to false for performance reasons.

const data = [...];

var chart = Highcharts.chart('container', {
    series: [{
        data: data
    }]
});


// the button action
$('#button').click(function() {
    const newData = [...];

    newData.forEach((el) => {
        chart.series[0].addPoint(el, false);
    });

    chart.redraw();
});

Live demo: http://jsfiddle.net/BlackLabel/3awnjdbr/

API Reference: https://api.highcharts.com/class-reference/Highcharts.Series#addPoint

Upvotes: 1

Saurabh Yadav
Saurabh Yadav

Reputation: 3386

You can use addPoint method. Try this one may this helps you !

It add a point to the series after render time. The point can be added at the end, or by giving it an X value, to the start or in the middle of the series.

$('#button').click(function () {

     //chart.series[0].setData([129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4]);
     let newList = [129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4];
     newList.map(i => chart.series[0].addPoint(i));       

 });

Upvotes: 1

Related Questions