After receiving JSON decoded data from the server and using $.parseJSON to decode it, I am assigning it to the series in Highcharts. Although there are no console errors, the chart refuses to display.
Below is the code snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="author" content="">
<title></title>
<script src="../assets/jquery/js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript">
parent.$('iframe').height('256');
</script>
</head>
<body style="overflow:hidden">
<div id="container" style="width:100%; height:400px;"></div>
</div>
<script>
$(function() {
series = [];
series = generateData();
function generateData()
{
$.ajax({
url: 'http://exact.offergrid.com/totalVisits.php',
success: function(data)
{
alert(data);
ps = [];
var obj = $.parseJSON(data);
var len = obj.length;
//alert(obj.length);
for (var i = 0; i < len; i++) {
//alert(obj[i].date+obj[i].count);
var date = obj[i].date;
var count = obj[i].count;
ps[i] = {
x: date,
y: count
};
series.push({
data: []
});
series[i].data.push(ps[i]);
}
},
});
return series;
}
$('#container').highcharts({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: series
});
});
</script>
</body>
</html>