Kris1988

Hi, I have a php script that generates a select dropdown box <option value="1"> Bob </option> <option value="2"> Tim </option> <option value="3"> Sam </option> <option value="4"> Phil </option> I then have the following javascript to produce my google api graph: <script type="text/javascript"> google.load('visualization', '1', {'packages':['corechart']}); google.setOnLoadCallback(drawChart); function drawChart() { var jsonData = $.ajax({ url: "test1.php", dataType:"json", async: false, }).responseText; var data = new google.visualization.DataTable(jsonData); var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(data); } </script> This then runs a php script that returns the data back in Json format. How can I pass the <option value=""> through the to the test1.php script to generate the json data based on the the value selected i.e 1, 2, 3 etc. i an new at javascript and the google api can anyone let me know how I can get this variable sent through by the google api script. and for the graph to refresh every time another option is chosen. Thanks kris

@hansford -- can you show me how i'd call the ajax everytime? I am new to PHP and JS so what I've tried hasn't worked

Hi I am trying to create a google chart from data in query.php and using the google api to load it. Everything works until I want to change the MetalSourceID from a drop select box. PHP CODE FOR DROP DOWN BOX: <form> <select name="users" onchange="showUser(this.value);drawChart();"> <option value=""> Select a Metal: </option> <?php $query = "SELECT TOP(31) tblMetalPrice.MetalSourceID, tblMetalSource.MetalSourceName from tblMetalPrice INNER JOIN tblMetalSource ON tblMetalPrice.MetalSourceID=tblMetalSource.MetalSourceID ORDER BY tblMetalPrice.DateCreated DESC "; $result = sqlsrv_query( $conn, $query); while( $row = sqlsrv_fetch_object ($result)) { echo "<option value='".$row->MetalSourceID ."'>". $row->MetalSourceName ."</option>"; } sqlsrv_close( $conn); ?> </select> </form> This works fine and generates all the correct values. One part of this changes contents of a table which works fine. But I also echo the MetalSourceID into the javascript for the google api, JS script below: <script type="text/javascript"> google.load('visualization', '1', {'packages':['corechart']}); google.setOnLoadCallback(drawChart); function drawChart() { var jsonData = $.ajax({ url: "query.php", dataType:"json", async: false, data: { 'MetalSourceID' : <?php $q = intval($_GET['q']); echo $q; ?> } }).responseText; var data = new google.visualization.DataTable(jsonData); var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(data); } </script> This then runs the query.php script and returns the google line chart, a copy of the query.php script is below: $query ="SELECT TOP(30)tblMetalPrice.DateCreated, tblMetalPrice.UnitPrice, tblMetalPrice.HighUnitPrice FROM tblMetalPrice WHERE tblMetalPrice.MetalSourceID = '" .$q. "' ORDER BY tblMetalPrice.DateCreated DESC"; $array['cols'][] = array( 'id' => 'Date', 'label' => 'Date', 'type' => 'string' ); $array['cols'][] = array( 'id' => 'Price', 'label' => 'UnitPrice', 'type' => 'number' ); $array['cols'][] = array( 'id' => 'Price', 'label' => 'HighUnitPrice', 'type' => 'number' ); $result = sqlsrv_query($conn, $query); while($row = sqlsrv_fetch_object($result)){ $array['rows'][] = array ( 'c' =>array( array ('v' => $row->DateCreated->format('d-m-Y')), array ('v' => $row->UnitPrice), array ('v' => $row->HighUnitPrice), ) ); } return $array; } print json_encode(graphdata()); sqlsrv_close( $conn); The scripts works when the $q variable is static, how can I make it that when some changes the drop down box that it refreshed the data in the graph and displays the new data?