Hello all,
Am trying to display records from mysql using HIghchart but for some reasons, it is not bringing out any output, please help me look into my codes.
:::::::::::::::::::::::::::::::::::::data1.php ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
<?php
include('mysql_connect.php');
$dept = $_POST['department'];
//include('mysql_connect.php');
$stat = 'paid';
$result = mysql_query ("select category, amount, actual from budget where department = '$dept' GROUP BY category ") or die(mysql_error());
$category = array();
$category['name'] = 'category';
$series1 = array();
$series1['name'] = 'actual';
$series2 = array();
$series2['name'] = 'amount';
//$series3 = array();
//$series3['name'] = 'Highcharts';
$category['data1'][] = $r['category'];
$series1['data1'][] = $r['actual'];
$series2['data1'][] = $r['amount'];
// $series3['data'][] = $r['highcharts'];
}
$result = array();
array_push($result,$category);
array_push($result,$series1);
array_push($result,$series2);
//array_push($result,$series3);
print json_encode($result, JSON_NUMERIC_CHECK);
header("Location: view_dept.php");
mysql_close($con);
?>
:::::::::::::::::::::::::::::::::::::::: view_dept.php :::::::::::::::::::::::::::::::::
<script type="text/javascript" src="http://ajax.googleap...n.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'column',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Chart for Department',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Amount'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: []
}
$.getJSON("data1.php", function(json) {
options.xAxis.categories = json[0]['data1'];
options.series[0] = json[1];
options.series[1] = json[2];
//options.series[2] = json[3];
chart = new Highcharts.Chart(options);
});
});
</script>
<script src="http://code.highchar...s.js"></script>
<script src="http://code.highchar...g.js"></script>
</head>
<body>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
thanks in advance