Я должен отображать диаграмму Google в соответствии с выпадающим значением, которое содержит идентификаторы магазина. Я извлекаю данные из mysql, без проблем со значениями, я извлекаю данные в соответствии с идентификатором магазина из ajax и просто подтверждаю его в поле ввода, это также хорошо.
но я не знаю, как обновить этот график с этими значениями, не перезагружая страницу. вот мой код диаграммы google с жестко заданными значениями.
<!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> вот мой код ajax на той же странице в теге скрипта
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); } }
вот мой chart.php, откуда я получаю отформатированные данные из mysql с помощью 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'],"],"; } ?>
В функции Ajax Response Call drawChart () снова с новыми значениями. Ниже приведен код, который я пробовал.
Файл индекса
<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>
Обратите внимание, что я создал другую функцию с именем drawChart2 (), но если вы вызове drawChart (), то она также даст вам предупреждение с помощью «called». Вам просто нужно передать новые значения в нем. Надежда выше ответа поможет вам. Самое главное, что я ничего не делал, кроме функции обратного вызова. [Хотя я изменил код javascript ajax, но это не проблема.]
Просмотрели ли вы панели диаграммы google, в которых вы можете привязать диаграмму (например, гистограмму) с помощью элемента управления (строковый фильтр – текстовое поле, выбор категории – выпадающее меню, селектор диапазона чисел – слайдер)? Это связано с тем, что я не вижу экземпляров параметра ChartWrapper и Data Table View.
Без использования информационных панелей простым способом является просто ajax запрос новых данных и вызов chart_ name.draw (new_chart_data, options); который будет перерисовывать весь график. Кроме того, вы можете столкнуться с проблемами разрешения / отображения в зависимости от размера вашего набора данных.