Rama Rama - 23 days ago 5
PHP Question

PHP and Highcharts

I'm using the code below to generate a pie chart. But I'm getting a blank page instead of chart. I couldn't find any error in the console also, How can I find if anything is missing? How can I debug my code in this case?

<?php
$servername = "localhost";
$username = "root";
$password = "";
$conn = new mysqli($servername, $username, $password);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$query = "SELECT name, val FROM wfss.web_marketing";
$result = mysqli_query($conn , $query);
if ($result) {
echo "</br>"."Results Found";
// Conversion of result object into JSON format
$rows = array();
while($r = mysqli_fetch_array($result,MYSQLI_NUM)) {
$row[0] = $r[0];
$row[1] = $r[1];
array_push($rows,$row);
}
print json_encode($rows, JSON_NUMERIC_CHECK);

} else {
echo "No Results Found";
}

mysqli_close($conn);
?>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Web Sales & Marketing Efforts'
},
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: 'Browser share',
data: [<?php echo json_encode($rows)?> ]
}]
}
});

</script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

Answer

You need to create highcharts with your "options " var for example

if using highcharts :

$(document).ready(function() {
var chart = new Highcharts.Chart(options);
});

if using highstock

 var chart = new Highcharts.StockChart(options);

see This link for more details