CODEWITHSUNDEEP
javascripthtmlgoogle-visualization
Sahan De Silva
Sahan De Silva

Reputation: 471

ChartWrapper is not displaying the graph

I'm using the google-chart-api to draw a graph using ChartWrapper class and ControlWrapper class. Here is the code I have been using.

This is the function to load hard-coded data.

   function drawVisualization() {
    // Prepare the data
    var data = google.visualization.arrayToDataTable([
      ['TimeLine', 'Time-Option', 'LOC', 'Comments'],
      ['Monthly', '1', 200, 20],
      ['Monthly', '2', 300, 30],
      ['Weekly', '1', 150, 15],
      ['Weekly', '3', 35, 3],
      ['Daily', '1', 230, 23],
      ['Daily', '2', 178, 17],

    ]);

This is my ControlWrapper.

     var timelinePicker = new google.visualization.ControlWrapper({
      'controlType': 'CategoryFilter',
      'containerId': 'control',
      'options': {
        'filterColumnLabel': 'Timeline',
        'ui': {
          'labelStacking': 'vertical',
          'allowTyping': false,
          'allowMultiple': false
        }
      }
    });

And this is my ChartWrapper.

        var lineChart = new google.visualization.ChartWrapper({
        'chartType': 'LineChart',
        'containerId': 'chart',
        'options': {
          'width': 900,
          'height': 500,
          'chartArea': {top: 0, right: 0, bottom: 0}
        },

        'view': {'columns': [1, 2]}
      });

   new google.visualization.DashBoard(document.getElementById('chart')).bind(timelinePicker, lineChart).draw(data);
}
    google.setOnLoadCallback(drawVisualization);

And to view the graph,

  <body>
  <div id="chart">
  <table>
    <tr style='vertical-align: top'>
      <td style='width: 300px; font-size: 0.9em;'>
        <div id="control"></div>
      </td>
      <td style='width: 600px'>
        <div style="float: left;" id="chart"></div>
      </td>
    </tr>
  </table>
  </div>
  </body>

But still, I don't get any output. Any idea what has gone wrong here?

Upvotes: 2

Views: 1460

Answers (1)

jmac
jmac

Reputation: 7128

Strong suggestion: always try to debug your own code first. There are oh-so-many careless mistakes in there that could be easily caught if you used firebug or the like to catch errors.

Error #1: DashBoard -> Dashboard

Wrong: new google.visualization.DashBoard(document.getElementById('chart')).bind(timelinePicker, lineChart).draw(data);

Right: new google.visualization.Dashboard(document.getElementById('chart')).bind(timelinePicker, lineChart).draw(data);`

Error #2: TimeLine -> Timeline

Wrong: 'filterColumnLabel': 'Timeline',

Right: 'filterColumnLabel': 'TimeLine',

Error #3: chart -> dashboard

Wrong: new google.visualization.Dashboard(document.getElementById('chart')).bind(timelinePicker, lineChart).draw(data);

Right: new google.visualization.Dashboard(document.getElementById('dashboard')).bind(timelinePicker, lineChart).draw(data);

Correct the HTML as well (you have two divs with the 'chart' id):

  <body>
  <div id="dashboard">
  <table>
    <tr style='vertical-align: top'>
      <td style='width: 300px; font-size: 0.9em;'>
        <div id="control"></div>
      </td>
      <td style='width: 600px'>
        <div style="float: left;" id="chart"></div>
      </td>
    </tr>
  </table>
  </div>
  </body>

Final Working Version

<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>
      Google Visualization API Sample
    </title>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1.1', {packages: ['controls']});
    </script>
    <script type="text/javascript">
      function drawVisualization() {
        // Prepare the data
        var data = google.visualization.arrayToDataTable([
          ['TimeLine', 'Time-Option', 'LOC', 'Comments'],
          ['Monthly', '1', 200, 20],
          ['Monthly', '2', 300, 30],
          ['Weekly', '1', 150, 15],
          ['Weekly', '3', 35, 3],
          ['Daily', '1', 230, 23],
          ['Daily', '2', 178, 17],  
        ]);

        var timelinePicker = new google.visualization.ControlWrapper({
          'controlType': 'CategoryFilter',
          'containerId': 'control',
          'options': {
            'filterColumnLabel': 'TimeLine',
            'ui': {
              'labelStacking': 'vertical',
              'allowTyping': false,
              'allowMultiple': false
            }
          }
        });

        var lineChart = new google.visualization.ChartWrapper({
          'chartType': 'LineChart',
          'containerId': 'chart',
          'options': {
            'width': 900,
            'height': 500,
            'chartArea': {top: 0, right: 0, bottom: 0}
          },

          'view': {'columns': [1, 2]}
        });

        new google.visualization.Dashboard(document.getElementById('dashboard')).bind(timelinePicker, lineChart).draw(data);
      }

      google.setOnLoadCallback(drawVisualization);
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="dashboard">
      <table>
        <tr style='vertical-align: top'>
          <td style='width: 300px; font-size: 0.9em;'>
            <div id="control"></div>
          </td>
          <td style='width: 600px'>
            <div style="float: left;" id="chart"></div>
          </td>
        </tr>
      </table>
    </div>
  </body>
</html>

Upvotes: 4

Related Questions