I'm trying to render a highchart from an MYSQL Query. The JSON looks correct, the page loads without any error, but it won't render the highchart.
My Code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<link rel="stylesheet" type="text/css" href="http://fiddle.jshell.net/css/normalize.css">
<link rel="stylesheet" type="text/css" href="http://fiddle.jshell.net/css/result-light.css">
<style type='text/css'>
</style>
<script type='text/javascript'>
$(function () {
var chart;
var myJson =
[{"Buch":"0528713FHVR ","Anzahl":3},{"Buch":"0657222FHVR","Anzahl":2},{"Buch":"A10055035","Anzahl":2},{"Buch":"0657223FHVR","Anzahl":1},{"Buch":"062729XFHVR","Anzahl":1}]
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'My PIE chart'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage}%</b>',
percentageDecimals: 1
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
}
}
}
},
series: []
};
var seriesNew = {
type: 'pie',
name: 'Some series name',
data: []
};
myJson = $.parseJSON(myJson);
jQuery.each(myJson, function (itemNo, item) {
seriesNew.data.push({
x: item.Buch,
y: item.Anzahl
})
});
options.series.push(seriesNew);
chart = new Highcharts.Chart(options);
});
});
</script>
</head>
<body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
I didn't include the SQL Query, since I feel like the JSON ist well formatted (i used JSON_Encode).
But i have no idea why it won't render.
