Представление формы с использованием запроса даты PHP / MySQL на страницу Google Visualization

Im создает круговые диаграммы в google-визуализации, используя вытащенные данные из PHP / MySQL.

Диаграмма кажется приятной, но я хотел добавить календарь (выбор даты), чтобы сделать круговую диаграмму динамической.

Кажется, работает мой выбор диапазона дат. Он извлекает нужные данные из моей базы данных.

ВЫБЕРИТЕ ДАТА:

введите описание изображения здесь

ПОСЛЕ ПОДАЧИ ЗАПРОСА:

Он возвращает эту строку: (general_ban_pos_pie_date.php)

{"cols":[{"id":"0","label":"Column 1","type":"string"},{"id":"1","label":"Count","type":"number"}],"rows":[{"c":[{"v":"String Value 1"},{"v":6}]},{"c":[{"v":"String Value 2"},{"v":4}]}]}

Эта строка читается визуализацией google. Если бы я использовал эту страницу PHP в качестве источника данных для моей круговой диаграммы, она отобразит ее значения.

МОЯ ПРОБЛЕМА / ВОПРОС:

После того, как я нажал кнопку «Отправить запрос», она направляет меня на страницу строки php. То, что я хочу сделать, – это когда пользователь выбирает даты начала и окончания и нажимает на запрос отправки, круговую диаграмму, которую мне нужно изменить, в зависимости от дат, запрошенных из базы данных, и не направленных на общий_ban_pos_pie_date.php (который я использовал для моя круговая диаграмма как таблица данных с использованием строки JSON). Я хочу, чтобы это перенаправляло меня к моему

Страница страницы пирога: (calendar_test.html)

введите описание изображения здесь

Может ли кто-нибудь сказать мне, как это сделать? Заранее спасибо.

PHP CODE: (general_ban_pos_pie_date.php)

 <?php $con = mysql_connect("localhost","root",""); if (!$con) die('Could not connect: ' . mysql_error()); mysql_select_db("db_campanaltest", $con); $j=0; $k=1; $l=0; $label = array("String Value 1","String Value 2"); $cols = '{"cols":[{"id":"'.$j.'","label":"Column 1","type":"string"},{"id":"'.$k.'","label":"Count","type":"number"}],'; $field1 = $_POST['startdate']; $field2 = $_POST['enddate']; $query = mysql_query("SELECT fk_IntCampID, COUNT( * ) AS count FROM tbl_trans2 WHERE date BETWEEN '".$field1."' AND '".$field2."' AND fk_IntCampID = '1' AND eventScored = 'Y' AND scoreQuoteSent = 'Y' OR date BETWEEN '".$field1."' AND '".$field2."' AND fk_IntCampID = '5' AND eventScored = 'Y' AND scoreQuoteSent = 'Y' GROUP BY fk_IntCampID"); while($r = mysql_fetch_assoc($query)){ $rows[] = '{"c":[{"v":'.'"'. $label[$l].'"},{"v":'. $r['count'].'}]}'; $l++; } $google_JSON_row =implode(",",$rows); echo $cols . '"rows":[',$google_JSON_row ."]}"; ?>

HTML PAGE: отображает календарь и круговую диаграмму (надеюсь)

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart','table','piechart']}]}"> </script> <script type="text/javascript"> google.setOnLoadCallback(pieChart); function pieChart() { var startdate = ""; var enddate = ""; if ($("#datepicker").hasClass('hasDatepicker')) { startdate = $("#datepicker").datepicker('getDate'); } if ($("#datepicker2").hasClass('hasDatepicker')) { enddate = $("#datepicker2").datepicker('getDate'); } var pieJsonData = $.ajax({ url: "overall_ban_pos_pie_date.php?startdate=" + startdate + "&amp;enddate=" + enddate, dataType:"json", async: false }).responseText; var pieData = new google.visualization.DataTable(pieJsonData); var pieChartWrapper = new google.visualization.ChartWrapper({ 'chartType': 'PieChart', 'containerId': 'pie_div', 'dataTable':pieData, 'options': { chartArea:{left:10,top:40,height:200,width:360}, width:300, height:260, title: "Neutral Percentage", titleTextStyle:{fontSize:12}, tooltip:{showColorCode:true}, legend:{textStyle:{fontSize: 10},position:'left'}, pieSliceTextStyle:{fontSize: 10} } }); pieChartWrapper.draw(); } </script> <script> $(document).ready(function() { $("#datepicker").datepicker({dateFormat: "yy-mm-dd"}); }); $(document).ready(function() { $("#datepicker2").datepicker({dateFormat: "yy-mm-dd"}); }); $("#pieChart").click(function(e) { e.preventDefault(); pieChart(); }); </script> </head> <body style="font-size:62.5%;"> <form action="overall_ban_pos_pie_date.php" method="post"> Start Date: <input type="text" name="startdate" id="datepicker"/> End Date: <input type="text" name="enddate" id="datepicker2"/> <input type="submit" id="pieChart"/> </form> <div id="pie_div"></div> </body> </html>

Solutions Collecting From Web of "Представление формы с использованием запроса даты PHP / MySQL на страницу Google Visualization"

Попробуйте вот так:

 $("#pieChart").click(function(e) { e.preventDefault(); pieChart(); });

Это отключит pichart() формы и вызовет pichart() . Теперь измените var pieJsonData = ... строку pieChart() следующим образом:

 var startdate = ""; var enddate = ""; if ($("#datepicker").hasClass('hasDatepicker')) { startdate = $("#datepicker").datepicker('getDate'); } if ($("#datepicker2").hasClass('hasDatepicker')) { enddate = $("#datepicker2").datepicker('getDate'); } var pieJsonData = $.ajax({ url: "overall_ban_pos_pie_date.php?startdate=" + startdate + "&amp;enddate=" + enddate, dataType:"json", async: false }).responseText;