I have a Highchart line chart, that I would like 4 lines to appear, 2 would be dynamic via the MySQL database table I have, which I've configured to work perfectly fine with GoogleCharts API, but recently I've seen HighCharts, and was extremely impressed. I've configured it to work, but I've only gotten it to work with one line. I've tried to add new lines to the array, but I can't seem to see where the lines are drawn, as I'm new to HighCharts. I've configured it to use the "DPMO" column, and when I change line from 1 to 2 it displays my average line that I would like to also display with the dpmo line. In conjunction two static lines, one at 3,000, and another at 5,000.
Thank you.
IRDR.php file
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>OAK3 - 12 Week IRDR DPMO</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/setup.js"></script>
<script type="text/javascript" src="js/test.js"></script>
</head>
<body>
<script src="js/highcharts.js"></script>
<div id="sales" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
Setup.js
var chart;
$(document).ready(function() {
var cursan = {
chart: {
renderTo: 'sales',
defaultSeriesType: 'line',
marginRight: 10,
marginBottom: 20
},
title: {
text: 'IRDR 12 Week DPMO',
},
subtitle: {
text: 'http://blackmesa.amazon.com',
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'DPMO'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
crosshairs: true,
shared: true
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 30,
borderWidth: 0
},
plotOptions: {
series: {
cursor: 'pointer',
marker: {
lineWidth: 1
}
}
},
series: [{
color: Highcharts.getOptions().colors[2],
name: 'IRDR DPMO',
marker: {
fillColor: '#FFFFFF',
lineWidth: 3,
lineColor: null // inherit from series
},
dataLabels: {
enabled: true,
rotation: 0,
color: '#666666',
align: 'top',
x: -10,
y: -10,
style: {
fontSize: '9px',
fontFamily: 'Verdana, sans-serif',
textShadow: '0 0 0px black'
}
}
}],
}
//Fetch MySql Records
jQuery.get('js/data.php', null, function(tsv) {
var lines = [];
traffic = [];
try {
// split the data return into lines and parse them
tsv = tsv.split(/
/g);
jQuery.each(tsv, function(i, line) {
line = line.split(/\t/);
dpmo = line[0];
average = line[1];
amo=parseFloat(line[1].replace(',', ''));
if (isNaN(amo)) {
amo = null;
}
traffic.push([
dpmo,
amo,
average
]);
});
} catch (e) { }
cursan.series[0].data = traffic;
chart = new Highcharts.Chart(cursan);
});
});
Data.php(Which does my data pull from MySQL database table)
<?php
$con=mysql_connect('localhost','root','password');
mysql_select_db("test", $con);
$result=mysql_query('select substr(process_name,11,15) as process_name, a.dpmo as dpmo, a.process_id as process_id, oak3_ia.dpmo as average from (select * from oak3_irdr_chart order by process_id desc limit 12)a left join oak3_irdr_average oak3_ia on oak3_ia.process_id = a .process_id order by process_id');
while($row = mysql_fetch_array($result)) {
echo $row['process_name'] . "\t" . $row['dpmo']. "\t" . $row['average']. "
";
}
?>
Current output:
Expected output:
