Databases
StackOverflow2013
Postsdbo
POupdate google chart dynamically on dropdown using ajax and php
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POupdate google chart dynamically on dropdown using ajax and php
    text
    copied!<p>I have to display google chart according to dropdown value, which contains shop ids i am retrieving the data from mysql, no problem with values, i am retrieving the data according to shop id from ajax, and just confirming it in the input box it is also fine.</p> <p>but i dont know how to update that chart with those values, without reloading the page. here is my google chart code with hardcoded values.</p> <pre><code> &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt; &lt;title&gt;newChart&lt;/title&gt; &lt;script type="text/javascript" src="https://www.google.com/jsapi"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); function drawChart() {var data = google.visualization.arrayToDataTable([['Company &amp; 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); } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;h3&gt;COLUMN CHART FOR MOST POPULAR ITEM &lt;/h3&gt; Select Shop &lt;select id="MPI_selected_shop" onchange="MPI_set_shop(this.value);"&gt; &lt;option value="all_Shops"&gt;All Shops&lt;/option&gt; &lt;option value="1"&gt;1&lt;/option&gt; &lt;option value="2"&gt;2&lt;/option&gt; &lt;option value="3"&gt;3&lt;/option&gt; &lt;option value="4"&gt;4&lt;/option&gt; &lt;/select&gt; &lt;input type="text" id="sd" /&gt; &lt;div id="MPI_chart_div" style="width: 800px; height: 400px;"&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>here is my ajax code in the same page within script tag</p> <pre><code>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); } } </code></pre> <p>here is my chart.php from where i am getting the formatted data from mysql using ajax</p> <pre><code>&lt;?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'],"],"; } ?&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload