How to update just data attribute under series in highcharts with json?

Question

I am currently new on this and I am looking for the easiest way to load, from a json file, the data for different series, but keeping other attributes of each serie as they are in the javascript.

So as shown in the below code, there are two series "Carbon" and "Add". The JSON file will just have the data for both series:

[
{"data":[70]},
{"data":[-30]}
]

The script that I have is as the one below:

$(function () {
	
	$(document).ready(function(){
	
		$.getJSON('carbonData.json', function(data) {
			
			var carbon = new Highcharts.chart({
				chart: {
					renderTo: 'Carbon',
					marginLeft:-30,
					plotBackgroundColor: null,
					plotBackgroundImage: null,
					plotBorderWidth: 0,
					plotShadow: false,
					type: 'bar'
				},
				credits: {
					enabled: false
				},
				title: {
					text: ''
				},
				xAxis: {
					labels:{enabled:false},
					lineWidth: 0,
					minorTickLength: 0,
					tickLength: 0,
					gridLineWidth: 0,
					minorGridLineWidth: 0,
					categories: ['']
				},
				yAxis: {
					labels:{
						enabled: false,
					},
					plotLines: [{
						value: -30, 
						label: { 
							text: 'Target<br/>30 kg/t',
							style:{fontSize: "10px"},
							rotation:0,
							align: 'center', 
							x: 0,
							y:25
							}
					},{
						value: 70, 
						label: { 
							text: 'Target<br/>70 kg/t',
							style:{fontSize: "10px"},
							rotation:0,
							align: 'center', 
								x: 0,
								y:25
							}
						}],

					gridLineWidth: 0,
					minorGridLineWidth: 0,
					min: -45,
					max:75,
					title: {
						text: ''
					}
				},
				colors:['#4572A7','#AA4643'],
				legend: {
					enabled: false,
				},
				tooltip: {
					enabled:false,
				},
				plotOptions: {
					series: {
						stacking: 'normal',
					}
				},
				series: [{
					name: 'Carbon',
					data: [70],
					dataLabels: {
						enabled:true,
						x: 16,
						format: '{series.name}<br/>{point.y} kg/t',
						style: {
							align: 'center',
							fontSize: "10px",
							fontWeight:'normal',
							textOutline: false,
							fontFamily: 'sans-serif',
							'text-anchor': 'middle'
						}
					}
				}, {
					name: 'Add',
					data: [-30],
					dataLabels: {
						enabled:true,
						x:13,
					   	formatter: function() {
							return this.series.name+'<br/>'+Math.abs(this.y)+' kg/t';
						},
						style: {
							color: 'white',
							align: 'center',
							fontSize: "10px",
							fontWeight:'normal',
							textOutline: false,
							fontFamily: 'sans-serif',
							'text-anchor': 'middle'
						}
					}
				}]
					
			});
		
		});
				
	});

});
		

So I am looking to map the information of the JSON file to each of the series correspondingly.

Thanks.

Answer 1

Use setData method:

var data = [{
        "data": [70]
    },
    {
        "data": [-30]
    }
]

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

document.getElementById("data").addEventListener('click', function() {
    data.forEach(function(el, i) {
        chart.series[i].setData(el.data);
    });
});

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

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