All geek questions in one place

Dynamically update google chart with dropdown using ajax and php

I need to display the Google diagram according to the dropdown value that contains the store identifiers I retrieve the data from mysql, not a problem with the values, I retrieve the data according to the store identifier from ajax and just confirm it in the input field, this is also normal.

but I don’t know how to update this graph with these values ​​without reloading the page. here is my google chart code with hardcoded values.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>newChart</title> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); function drawChart() {var data = google.visualization.arrayToDataTable([['Company & Model', 'Views'],['Samsung Hero Music E1232B',5],['Samsung Galaxy Y S5360',7],['Samsung Galaxy Ace S5830',7],['Karbonn K 1212',2],]); var options = { title: 'Most Popular Item ', hAxis: {title: 'Brand', titleTextStyle: {color: 'red'}}}; var chart = new google.visualization.ColumnChart(document.getElementById('MPI_chart_div')); chart.draw(data, options); } </script> </head> <body> <h3>COLUMN CHART FOR MOST POPULAR ITEM </h3> Select Shop <select id="MPI_selected_shop" onchange="MPI_set_shop(this.value);"> <option value="all_Shops">All Shops</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> <input type="text" id="sd" /> <div id="MPI_chart_div" style="width: 800px; height: 400px;"></div> </body> </html>

here is my ajax code on the same page in the script tag

 var xmlHttp function MPI_set_shop(str) { alert(str); xmlHttp=GetXmlHttpObject(); if (xmlHttp==null) { alert ("Your browser does not support AJAX!"); return; } var url="chart.php"; url=url+"?q="+str; alert(url); xmlHttp.onreadystatechange=stateChanged; xmlHttp.open("GET",url,true); xmlHttp.send(null); } function stateChanged() { if (xmlHttp.readyState==4) { document.getElementById("sd").value=xmlHttp.responseText; $st=xmlHttp.responseText; alert($st); } }

here is my chart.php where i get formatted data from mysql using ajax

 <?php $testid=0; $testid=$_REQUEST["q"]; //echo $testid; $con = mysql_connect("localhost","root",""); if (!$con) { die('Could not connect: ' . mysql_error()); } // Select Database mysql_select_db("mysql", $con) or die('Could not connect: ' . mysql_error());; $qMostPopularItem = "SELECT t.pr_id,p.pdt_company_name,p.pdt_model_name,SUM(t.count) AS count FROM tmp AS t INNER JOIN product_mapping AS p ON t.pr_id = p.pr_id AND t.shop_id =$testid GROUP BY pr_id ORDER BY t.count DESC;"; $mpi = mysql_query($qMostPopularItem,$con) or die('Could not fetch MPI: ' . mysql_error()); while($infoMPISW = mysql_fetch_assoc($mpi)) { echo "['".$infoMPISW['pdt_company_name']." "; echo $infoMPISW['pdt_model_name'] ."',"; echo $infoMPISW['count'],"],"; } ?>
+4
source share
2 answers

In Ajax Response Call drawChart () mode again with the new values. Below is the code I tried.

Index file

 <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); function drawChart() { alert('called'); var data = google.visualization.arrayToDataTable([['Company & Model', 'Views'],['Samsung Hero Music E1232B',5],['Samsung Galaxy Y S5360',7],['Samsung Galaxy Ace S5830',7],['Karbonn K 1212',2],]); var options = { title: 'Most Popular Item ', hAxis: {title: 'Brand', titleTextStyle: {color: 'red'}}}; var chart = new google.visualization.ColumnChart(document.getElementById('MPI_chart_div')); chart.draw(data, options); } function drawChart2() { alert('called2'); var data = google.visualization.arrayToDataTable([['Company & Model', 'Views'],['Samsung Music E1232B',5],['Samsung S5360',7],['Samsung S5830',7],['Karbonn K 1212',2],]); var options = { title: 'Most Popular Item ', hAxis: {title: 'Brand', titleTextStyle: {color: 'red'}}}; var chart = new google.visualization.ColumnChart(document.getElementById('MPI_chart_div')); chart.draw(data, options); } </script> <script> var xmlHttp function MPI_set_shop(str) { alert(str); if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { alert(xmlhttp.responseText); //google.load("visualization", str, {packages:["corechart"]}); //google.setOnLoadCallback(drawChart); drawChart2(); // Note down here.. } } xmlhttp.open("GET","chart.php?q="+str,true); xmlhttp.send(); } </script> <h3>COLUMN CHART FOR MOST POPULAR ITEM </h3> Select Shop <select id="MPI_selected_shop" onchange="MPI_set_shop(this.value);"> <option value="all_Shops">All Shops</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> <input type="text" id="sd" /> <div id="MPI_chart_div" style="width: 800px; height: 400px;"></div>

Note that I created another function called drawChart2 (), but if you call drawChart (), it will also give you a warning using "called". You just need to pass the new values ​​in it. Hope the above answer will help you. Most importantly, I did nothing except the callback function. [Although I changed the javascript ajax code, but this is not a problem.]

+1
source

Have you looked at the charts of Google charts in which you can bind a chart (for example, a bar chart) using a control (string filter - text box, category selection - drop-down menu, number range selector - slider)? This is because I do not see instances of the ChartWrapper and Data Table View parameters.

Without using dashboards, an easy way is to simply ajax request new data and call chart_ name.draw (new_chart_data, options); which will redraw the entire chart. In addition, you may encounter resolution / display problems depending on the size of your dataset.

0
source

Source: https://habr.com/ru/post/1442479/

More articles:


All Articles