$.getJSON('targets.json', function(jsonplotdata) {
$.getJSON('chart.json', function(datajsp) {
var chart = new Highcharts.chart({
chart: {
renderTo: 'chart',
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false,
type: 'bar',
},
credits: {
enabled: false
},
lang: {
noData: "No Data Available!"
},
title: {
text: ''
},
xAxis: {
labels: {
enabled: false
},
lineWidth: 0,
minorTickLength: 0,
tickLength: 0,
gridLineWidth: 0,
minorGridLineWidth: 0,
categories: ['']
},
yAxis: {
labels: {
enabled: false,
},
plotLines: [{
color: 'black',
dashStyle: 'Solid',
zIndex: 5,
width: 1,
label: {
text: 'Target<br/>47 kg/t',
style: {
fontSize: "10px",
fontFamily: 'sans-serif'
},
rotation: 0,
align: 'center',
x: 25,
}
}, {
color: 'black',
dashStyle: 'Solid',
zIndex: 5,
width: 1,
label: {
text: 'Target<br/>28 kg/t',
style: {
fontSize: "10px",
fontFamily: 'sans-serif'
},
rotation: 0,
align: 'center',
x: -25,
}
}],
gridLineWidth: 0,
minorGridLineWidth: 0,
title: {
text: ''
}
},
colors: ['#4572A7', '#AA4643'],
legend: {
enabled: false,
},
tooltip: {
enabled: false,
},
plotOptions: {
series: {
stacking: 'normal',
pointWidth: 60
}
},
series: [{
name: 'chart',
data: [],
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: 'Lime + Dolo',
data: [],
dataLabels: {
enabled: true,
x: 25,
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'
}
}
}],
});
datajsp.forEach(function(datajsp, i) {
chart.series[i].setData(datajsp.data);
chart.yAxis[0].options.plotLines[0].value = jsonplotdata[0];
chart.yAxis[0].options.plotLines[1].value = jsonplotdata[1];
chart.yAxis[0].update();
});
});