How to get google chart to display

[kris1988edwards]

Good afternoon,

 

I am working on a project that gives the user a data table and a google chart (using the api) based on what the user selects for a <select> <option>.

 

Index.PHP code:

 

<form>
<select name="users" onchange="showUser(this.value);drawChart();">
<option value=""> Select a Metal: </option>
<?php
//connection details
$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>
<div id="chart_div"></div>
<div id="txtHint"><b>Past metal information will be generated below.</b></div>

this works fine and generates the list in the select option dropdown

 

Script to get table contents:

 

<script>
function showUser(str) {
  if (str=="") {
    document.getElementById("txtHint").innerHTML="";
    return;
  } 
  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) {
      document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","scripts/gettabledata001.php?q="+str,true);
  xmlhttp.send();
}
</script>

this also works fine and generates the table contents based on 'q' value from the select dropdown. 

 

Google API script:

 

<script type="text/javascript">


  // Load the Visualization API and the piechart,table package.
  google.load('visualization', '1', {'packages':['corechart']});
  google.setOnLoadCallback(drawChart());
  
  function drawChart() {
   var jsonData = $.ajax({
          url: "scripts/getgraphdata.php",
          dataType:"json",
 data: "q="+num,
          async: false
          }).responseText;


    // Instantiate and draw our pie chart, passing in some options.
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
      chart.draw(data, {width: 400, height: 240});
}




  </script>

getgraphdata.php script:

 

$q = intval($_GET['q']);


ini_set('display_errors',1);
ini_set('display_startup_errors',1);
error_reporting(-1);




$query ="SELECT TOP(30) tblMetalPrice.MetalSourceID, tblMetalPrice.DateCreated, tblMetalPrice.UnitPrice, tblMetalPrice.HighUnitPrice, tblMetalSource.MetalSourceName FROM tblMetalPrice INNER JOIN tblMetalSource ON tblMetalPrice.MetalSourceID = tblMetalSource.MetalSourceID WHERE tblMetalPrice.MetalSourceID = '".$q."' ORDER BY tblMetalPrice.DateCreated DESC";




$result = sqlsrv_query($conn, $query);
echo "{ \"cols\": [ {\"id\":\"\",\"label\":\"Date\",\"pattern\":\"\",\"type\":\"string\"}, {\"id\":\"\",\"label\":\"Unit Price\",\"pattern\":\"\",\"type\":\"number\"} ], \"rows\": [ ";
$total_rows = sqlsrv_num_rows($result);
$row_num = 0;
while($row = sqlsrv_fetch_object($result)){
$row_num++;
    if ($row_num == $total_rows){
      echo "{\"c\":[{\"v\":\"" . $row->DateCreated->format('d-m-Y') ."\",\"f\":null},{\"v\":" . $row->UnitPrice . ",\"f\":null}]}";
    } else {
      echo "{\"c\":[{\"v\":\"" . $row->DateCreated->format('d-m-Y') ."\",\"f\":null},{\"v\":" . $row->UnitPrice . ",\"f\":null}]}, ";
    }
}
echo " ] }";




sqlsrv_close( $conn);

When ever i try these they don't work the getgraphdata.php scripts runs fine the issue I believe but may be totally wrong may be done to the google api script that should generate the chart but doesn't.

 

Can anyone help here I've been trying to sort this for a few days now and losing confidence in myself rapidly. 

 

Thanks

 

Kris

 

[jcbones]

Have you found any JavaScript errors? You can check then using Firefox developer tools.

[kris1988edwards]

No I haven't jcbones ... I will try this out and report back if i have any issues or can't find the problem

[kris1988edwards]

Hi, Not found any problems with the javascript any ideas?