Reputation: 17
Sir good evening. i have a highchart graph which display all the month in the present year. All i want is to add a drop down list months which if i choose a month the graph will change data also specifically in the month chosen in the drop down. Pls help me
heres my data.php code. This code will just get the data without the specific month and year. Now i want is to put a dropdown list of month e.g january->december with the present year and if i choose a month from the drop down the graph will also change data.
<?php
$con = mysql_connect("localhost","root");
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db("bfp", $con);
$query = mysql_query("select city, sum(Miscellaneous) as Miscellaneous,
sum(Residential) as Residential, sum(Assembly) as Assembly, sum(Educational) as `Educational, sum(Institutional) as Institutional, sum(Mercantile) as Mercantile, sum(Business) as Business, sum(Industrial) as Industrial, sum(Storage) as Storage, sum(Mixed) as Mixed, sum(total) as total from report_structure group by city ");`
$category = array();
$category['name'] = 'City';
$series1 = array();
$series1['name'] = 'Business';
$series2 = array();
$series2['name'] = 'Storage';
$series3 = array();
$series3['name'] = 'Residential';
$series4 = array();
$series4['name'] = 'Assembly';
$series5 = array();
$series5['name'] = 'Educational';
$series6 = array();
$series6['name'] = 'Institutional';
$series7 = array();
$series7['name'] = 'Mercantile';
$series8 = array();
$series8['name'] = 'Industrial';
$series9 = array();
$series9['name'] = 'Miscellaneous';
$series10 = array();
$series10['name'] = 'Mixed';
while($r = mysql_fetch_array($query)) {
$category['data'][] = $r['city'];
$series1['data'][] = $r['Business'];
$series2['data'][] = $r['Storage'];
$series3['data'][] = $r['Residential'];
$series4['data'][] = $r['Assembly'];
$series5['data'][] = $r['Educational'];
$series6['data'][] = $r['Institutional'];
$series7['data'][] = $r['Mercantile'];
$series8['data'][] = $r['Industrial'];
$series9['data'][] = $r['Miscellaneous'];
$series10['data'][] = $r['Mixed'];
}
$result = array();
array_push($result,$category);
array_push($result,$series1);
array_push($result,$series2);
array_push($result,$series3);
array_push($result,$series4);
array_push($result,$series5);
array_push($result,$series6);
array_push($result,$series7);
array_push($result,$series8);
array_push($result,$series9);
array_push($result,$series10);
print json_encode($result, JSON_NUMERIC_CHECK);
mysql_close($con);
?>
end of data.php
and here's my structure.php which the data loaded.can anyone help me please?
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Bar chart with data from MySQL using Highcharts</title>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
height: 400,
width: 1000,
renderTo: 'container',
type: 'column'
},
title: {
text: 'Consolidated Fire Incident by Structure in each Station',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: []
},
yAxis: {
min: 0,
title: {
text: 'Requests'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
this.series.name +': '+ this.y;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: false,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: []
}
$.getJSON("data.php", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
options.series[1] = json[2];
options.series[2] = json[3];
options.series[3] = json[4];
options.series[4] = json[5];
options.series[5] = json[6];
options.series[6] = json[7];
options.series[7] = json[8];
options.series[8] = json[9];
options.series[9] = json[10];
chart = new Highcharts.Chart(options);
});
});
</script>
<script src="highcharts.js"></script>
<script src="exporting.js"></script>
</head>
<body>
<div id="container" style="min-width: 400px; height: 800px; margin: 0 auto"></div>
</body>
</html>
Upvotes: 0
Views: 1212
Reputation: 4776
you can do it in 2 different ways.
maintain the entire data month-wise as separate data sets. append them to make an entire year data. when user selects any month in the dropdown then update the series data or re-render the chart
you can use setExtremes() method for xAxis depending on the month selected in the drop down.
if user selects june set xAxis extremes from 1st Jun to 30th Jun.
Hope this will help you
Upvotes: 1