Highcharts line not plotting - mysql

Question

I have used an example and can successfully read data using php and mysql and plot it (timebase vs a variable), all works fine. I have taken that and used it as a template and used a different db that doesn't use a timebase but the graph isn't rendering. The graph is meant to display data from an SQL query that collates the frequency of occurrence of a variable with the variable on the x axis and the frequency of occurrence on the Y axis.
The chart pops up with the x and y axis values as expected. It looks right; except the plot is missing. To assist my troubleshooting I have listed the data on the screen albeit not pretty- this proves the db is being called correctly and there are no obvious SQL errors and that data is being returned.
db_code`
<?php
$con = mysql_connect("localhost","root","hal9000");
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db("sqm", $con);
$result = mysql_query("SELECT magnitude, COUNT(*) AS xxx FROM data WHERE magnitude > 1 GROUP by magnitude");
while($row = mysql_fetch_array($result)) {
echo $row['magnitude'] . "\t" . $row['xxx']. "\n";
}
mysql_close($con);
?> `
main_page code
<script type="text/javascript">
var chart;
$(document).ready(function() {
var options = {
chart: {
renderTo: 'common_LHS',
defaultSeriesType: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Magnitude',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
plotOptions: {
series: {
marker: {
enabled: true,
symbol: 'circle',
radius: 0
}
}
},
xAxis: {
type: 'linear',
tickWidth: 0,
gridLineWidth: 1,
labels: {
align: 'center',
x: -3,
y: 20
}
},
yAxis: {
title: {
text: 'Frequency of occurrence'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
tooltip: {
crosshairs: [{
width: 2,
color: 'red'
}, {
width: 2,
color: 'red'
}],
},
series: [{
name: 'Occurrence',
}]
}
jQuery.get('data.php', null, function(tsv) {
var lines = [];
traffic = [];
try {
// split the data return into lines and parse them
tsv = tsv.split(/\n/g);
jQuery.each(tsv, function(i, line) {
line = line.split(/\t/);
traffic.push ([
parseFloat(line[0]), //need to parseFloat to convert data to float from string
parseFloat(line[1])
]);
});
} catch (e) { }
options.series[0].data = traffic;
chart = new Highcharts.Chart(options);
});
});
The data looks as I expected when graphed in LibreCalc, apart from the line not rendering it is almost done in Highcharts.
Appreciate any advice. Unfortunately since I am new to this forum I can't submit images but happy to send them to someone if it helps.
Expect it is something simple, usually is :)

Answer 1

I think the problem comes from the way you build your traffic array. It might not be well sorted. Try to sort it by the first element, using something like:
function Comparator(a,b){
if (a[0] < b[0]) return -1;
if (a[0] > b[0]) return 1;
return 0;
}
traffic.sort(Comparator);
options.series[0].data = traffic;
Does it give you a different result ? Also, does your browser console log something when rendering the chart ?

Answer 2

Well I said it would be simple and it was.
I added ,10 to make sure it was decimal and it didn't make any difference. I changed it to 16 and was expecting the values to change and it did so it was definitely reading the data although it still didn't plot the data.
I then added .replace(',', '') to the y axis and it worked.
parseFloat (line[1],10),
parseFloat (line[1].replace(',', ''), 10)
Seems it doesn't like comma's in the data value!