Passing variable to php script for google charts

[Kris1988]

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?

 

[hansford]

async: false,

Remove that line - you want it to be async.

Set a change handler on the drop down to call the ajax every time a change occurs and update the data.

[Kris1988]

@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

[hansford]

<form>
<select name="users" onchange="showUser(this.value);drawChart();">

you call it drawChart() but pure JavaScript - not jQuery which is your ajax call.

 

Re-post in the JavaScript forum.

Edited January 9, 2015 by hansford