Solved

Can not view Google Column Chart on webpage

Posted on 2013-10-23
2
410 Views
Last Modified: 2013-10-23
Hi all.

I have the following files that I want to use to display a column chart on my website. Unfortunately, the code below is simply displaying a blank page. Do I have something wrong in the code that is not displaying the column chart?

ChartTest2.html:
<html>
  <head>
    <!--Load the AJAX API-->
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
    <meta content="utf-8" http-equiv="encoding" />
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
 google.setOnLoadCallback(drawChart1);

 function drawChart1() {
  var jsonData1 = $.ajax({
          url: "GetChartData1.php",
          dataType:"json",
          async: false
          }).responseText;
        
        // Create our data table out of JSON data loaded from server
        var data = new google.visualization.DataTable(jsonData1);
  var options = {'title':'Super Workload',
                       'width':900,
                       'height':500};

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div1'));
        chart.draw(data, options);
        
      
      }

    </script>
  </head>

  <body>
 <div id="chart_div1"></div> 
   
  </body>
</html>

Open in new window


GetChartData1.php:
<?php 
// First we execute our common code to connection to the database and start the session 
require("common.php"); 

    $smt = $db->prepare('SELECT Count(Type) as Count, firstname FROM FieldSuperDataEntry INNER JOIN Users ON DataEntry.UserID = Users.userid Group By firstname')
    $smt->execute(); 
    $data = $smt->fetchAll(); 
    
  $rows = array();
  $table = array();
  $table['cols'] = array(
    array('label' => 'firstname', 'type' => 'string'),
    array('label' => 'Count', 'type' => 'number')
  
);

foreach($data as $row) {
      $temp = array();
      $temp[] = array('v' => (string) $row['firstname']); 
      $temp[] = array('v' => (int) $row['Count']); 
 
      $rows[] = array('c' => $temp);
    }

$table['rows'] = $rows;
$jsonTable = json_encode($table);
echo $jsonTable;
?>

Open in new window


Thank you in advance.
0
Comment
Question by:Sim1980
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 39595711
open the page GetChartData1.php directly in your brozser with the full URL of course and post what you get
0
 

Author Closing Comment

by:Sim1980
ID: 39595968
Thanks! I did what you suggested and the output was an error, I misspelled a field in the sql statement.

I'm going to post another question because I want to be able to show 2 counts and a sum, so it would be 3 bar graphs per user.
0

Featured Post

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

615 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question