Vote count:
0
Yes I know that this question has been asked so many times in stackoverflow in different ways. But I really cannot understand how to display mysql data in a highcharts. To be honest I have been working on this for few days and could not figure it out. I am really glad if somebody could help me to sort this out
Here is my php & mysql code
data.php
<?php
require_once '../includes/database.php';
require_once '../includes/customer.php';
$customers= Customer::find_by_sql("SELECT cust_name,monthly_income FROM customer");
$rows=array();
foreach ($customers as $customer) {
$row[0]=$customer->cust_name;
$row[1]=$customer->monthly_income;
array_push($rows,$row);
}
print json_encode($rows, JSON_NUMERIC_CHECK);
?>
This will output a this kind of data series [["Madhava",55000],["Praveen",50000],["Nuwan",120000],["Thilan ",100000]]
Now I want to display this data in a bar chart which should be in following format
Monthly Income
^
|
|
|
|
-------------->Customer Name
Figure - Expected output of the bar chart
Now I am going to display them in a chart I have copied below code from other website and really do not know how to change that code to make it work according to my requirement
highcharts.php
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Pie Chart</title>
<script type="text/javascript" src="http://ift.tt/t0Y3fx"></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: []
}]
}
$.getJSON("data.php", function(json) {
options.series[0].data = json;
chart = new Highcharts.Chart(options);
});
}); </script>
<script src="http://ift.tt/1bzZc6V"></script>
<script src="http://ift.tt/1bzZbjq"></script>
</head>
<body>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
What are the changes that I should make in highcharts.php to make this work?
Aucun commentaire:
Enregistrer un commentaire