Jump to content

How to get google chart to display


kris1988edwards

Recommended Posts

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

 
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

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.