filter on google chart month wise

[Senthilkumar]

Dear Team, 

I am creating google pie chart from mysql database on my PHP project. 

My actual chart and output is 

 

<script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          	  	   ['class Name','Students'],
                      <?php
 						$query = "select Brand, SUM(ASP) as sum from dbms.tiv_data where Category ='EXCAVATOR' AND Dealerid = '$Emp_No' group by Brand order by sum DESC";
                    $exec = mysqli_query($conn, $query);
					    while ($row = mysqli_fetch_array($exec)) {
							$Brand = $row['Brand'];
							$ASP = $row['sum'];
                            echo "['$Brand',$ASP],";
						}
				?>
             ]);

        var options = {
          is3D: true,
        };

        var chart = new google.visualization.PieChart(document.getElementById('Excavator_MS'));
        chart.draw(data, options);
      }
      </script>

			<div class="row " style="width:100%;margin-left:5px">
                  <div class="column card" style="width:33.33%;text-align:center">
                      <label style="text-align:center">Excavator</label>
                      <div id="Excavator_MS" style="width: 100%; height: 200px;" onclick="Excavator()"></div>
                  </div>
              </div>

 

But i want the filter option should be placed on the graph

My database is like bellow

I want once i select the month the chart data should change without refresh the page. Can any one help me how to do this

[Barand]

PHP and JS scripts run in different space-time dimensions...

• PHP runs on server and sends output to client browser, then
• client browser runs the JS script

Solutions:

• Ask Google to change their charts api to output the dropdown for you, or
• Write you own code to creat pie chart (using SVG or Canvas), or
• Create div with border. Put dropdown and google chart (without border) inside this div.