Highcharts, displaying two sets of data on the same line chart - highcharts

Question

I am working on a script that uses HighCharts. I have written the script to produce and output the result in JSON format, see below.
[{"name":"Month","data":["Jan","Feb","Mar","Apr","May"]},{"name":"Rooms","data":[140,77,76,1,1]},{"name":"Target","data":["155"]}]
The JSON has three (3) parts, the month, the total for the month and the target. What I am trying to do is display the data for each month as a line chart.
This I have working, but I would like to display the target data as a line on the same chart.
How can I get the data for the target to display.
I have also written the script that calls the JSON data, see below.
$(function () {
var categories=[];
var data2 =[];
var targetValue = null;
var chart;
$(document).ready(function() {
$.getJSON("../charts/imaint_audit_monthly_chart.php", function(json) {
$.each(json,function(i,el) {
if (el.name == "Month") {
categories = el.data;
} else if (el.name == "Target") {
targetValue = el.data[0];
} else {
data2.push(el);
}
});
$('#container1').highcharts({
chart: {
renderTo: 'container',
type: 'line',
marginTop: 40,
marginRight: 30,
marginBottom: 50,
plotBackgroundColor: '#FCFFC5'
},
title: {
text: 'Monthly audits <?php echo $year;?>',
x: -20, //center
style: {
fontFamily: 'Tahoma',
color: '#000000',
fontWeight: 'bold',
fontSize: '10px'
}
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
showFirstLabel: false,
lineColor:'#999',
lineWidth:1,
tickColor:'#666',
tickWidth:1,
tickLength:2,
tickInterval: 10,
gridLineColor:'#ddd',
title: {
text: '',
style: {
fontFamily: 'Tahoma',
color: '#000000',
fontWeight: 'bold',
fontSize: '10px'
}
},
plotLines: [{
color: '#FF0000',
value: targetValue,
label: {
text: 'Target',
style: {
color: '#FF0000'
}
}
}]
},
legend: {
enabled: false,
itemStyle: {
font: '11px Trebuchet MS, Verdana, sans-serif',
color: '#000000'
},
itemHoverStyle: {
color: '#000000'
},
itemHiddenStyle: {
color: '#444'
}
},
plotOptions: {
column: {
color:'#ff00ff'
},
series: {
dataLabels: {
enabled: true,
color: '#000000',
align: 'center',
y: 0,
style: {
fontSize: '10px',
fontFamily: 'Verdana, sans-serif'
}
}
}
},
credits: {
enabled: false
},
series: data2
});
});
});
});
Many thanks for your time.

Answer 1

I suggest that you should use the 'plotLine'-Feature to display the target value. This adds a line to any of your axes and it seems that your requirement is the best example for the use of a plot line. First you have to update your code to process the JSON returned from your web service:
$(function () {
var categories=[];
var data2 =[];
var targetValue = null;
var chart;
$(document).ready(function() {
$.getJSON("../charts/imaint_audit_monthly_chart.php", function(json) {
$.each(json,function(i,el) {
if (el.name == "Month") {
categories = el.data;
} else if (el.name == "Target") {
targetValue = el.data[0];
} else {
data2.push(el);
}
});
[...]
now we have the target value in the variable targetValue. This will now be inserted in the highcharts configuration to create a new plotLine for the yAxis:
yAxis: {
plotLines: [{
color: '#FF0000',
value: targetValue,
label: {
text: 'Target',
style: {
color: '#FF0000'
}
}
}],
minRange: targetValue, // to ensure the plotLine is always visible
[...]
},
This will add a red line at the specified targetValue that has a red label 'Target' attached to its left like in this example:
https://jsfiddle.net/doc_snyder/2spmxtwa/1/