Hi Folks,
I've recently started using High Charts to chart dynamic data from my database. I was on last week with an issue in relation to my column charts not rendering. I managed to figure that out with the assistance of other forum users. I now have a new problem, I am trying to display reasons for cancellation of a meeting in a pie chart form but I'm unable to figure out what the issue is, well I know what the issue is, but I don't know how to fix it...I'll post what I've done so far below, first I've posted my php, which includes the MySql query...
<?php
//===============================================
// PHP FOR PIE CHART REASONS FOR CANCELLATION
//===============================================
$SQL3 = "SELECT reasonForCancellation, COUNT( * ) AS reason_count FROM mom WHERE result = 'cancelled' GROUP BY reasonForCancellation";
$result9 = mysql_query($SQL3);
$data9 = array();
while ($row = mysql_fetch_array($result9)) {
$data9[] = $row['reasonForCancellation'];
}
$result10 = mysql_query($SQL3);
$data10 = array();
while ($row = mysql_fetch_array($result10)) {
$data10[] = $row['reason_count'];
}
?>
<!--
============================================
JS FOR PIE CHART REASON FOR CANCELLATION
============================================
-->
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'graph3',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'REASONS FOR CANCELLATION'
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
}
}
}
},
series: [{
type: 'pie',
name: 'cancellations',
data: [
['<?php echo join($data9, "','") ?>', <?php echo join(',', $data10); ?>],
]
}]
});
});
});
</script>
Above is the JS part, I have reviewed the code on Highcharts and jsFiddle, I had thought that like the categories on the column chart, I would only have to enter the data array once...When I had just one value as in one reason for cancellation, the chart worked fine, however, after I entered in a second value to the database, the chart no longer displayed. I've attached a capture of what the sql query outputs.
If anyone out there could give me a dig out on this I would greatly appreciate it.
Regards,
Gary
