CODEWITHSUNDEEP
javascriptphpmysqljqueryhighcharts
jcbbea
jcbbea

Reputation: 17

highchart change chart by choosing month in drop down

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

Answers (1)

Strikers
Strikers

Reputation: 4776

you can do it in 2 different ways.

  1. 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

  2. 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

Related Questions