Jump to content
Sign in to follow this  
Kris1988

Passing variable to php script for google charts

Recommended Posts

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?

 

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

@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

Share this post


Link to post
Share on other sites
<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 by hansford

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.