CODEWITHSUNDEEP
javascriptjqueryhighcharts
Threesa
Threesa

Reputation: 25

Highcharts - use same chart on multiple places

I have a website where the same solid gauge graph has to be used on multiple places at the same time, however I'd like to be able to update them all by simply calling a single line of code:

section1_graph.series[0].setData([32], true);

So really 1 instance, but multiple renders.

Who can help me? ^^

Upvotes: 0

Views: 548

Answers (1)

ppotaczek
ppotaczek

Reputation: 39139

I created an example how to add multiple charts with the same options and simple updating. To add more charts, just add div element with gaugeContainer class.

var options = {
    series: [{
        type: 'gauge'
    }],
    pane: {
        startAngle: -150,
        endAngle: 150
    },
    yAxis: {
        min: 0,
        max: 200
    }
}

var containers = document.getElementsByClassName('gaugeContainer');

for (var i = 0; i < containers.length; i++) {
    Highcharts.chart(containers[i], options);
}

function setChartsData(data) {
    Highcharts.charts.forEach(function(chart) {
        if (chart && chart.renderTo.classList.contains("gaugeContainer")) {
            chart.series[0].setData(data.slice());
        }
    });
}

setChartsData([32]);

setTimeout(function() {
    setChartsData([120]);
}, 1500);

Live demo: http://jsfiddle.net/BlackLabel/6qxtd20g/

Upvotes: 1

Related Questions