CODEWITHSUNDEEP
javascriptgoogle-visualization
nv39
nv39

Reputation: 535

Google Charts - graph not displaying

This bit of code is meant to display a chart, but doesn't:

  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    data.addcColumn('string', 'Type');
    data.addColumn('number', 'Job Registration');
    data.addRows([
  <?php foreach ($chart_result as $result) {
            echo $result;
        }?>  
    ]);

    var options = {
      title: 'Job Registration by Type',
      hAxis: {title: '',  titleTextStyle: {color: 'red'}}
    };

    var chart = new google.visualization.ColumnChart(document.getElementById('visualization'));
    chart.draw(data, options);
  }

When I submit the form and view page source, this is the result for data.addRows:

data.addRows([
  [' Engineer',1],['Assistant',1],['Developer',4],[' Ninja!',1],['Web Application Developer',1],  
    ]);

This looks right to me, but this is the first time I've used Google Analytics (or JavaScript...) and I was following an example of an existing chart rather closely, so maybe it's not right at all. Any ideas why this might not be working?

Cheers

Upvotes: 1

Views: 3862

Answers (1)

jmac
jmac

Reputation: 7128

You have two issues.

The first is that you don't define the data.

Add the following line to your code:

var data = new google.visualization.DataTable();

The second is a silly syntax error:

data.addcColumn('string', 'Type');

Should be:

data.addColumn('string', 'Type');

And with those, like magic, it works:

function drawVisualization() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Type');
  data.addColumn('number', 'Job Registration');
  data.addRows([
    [' Engineer',1],
    ['Assistant',1],
    ['Developer',4],
    [' Ninja!',1],
    ['Web Application Developer',1],  
  ]);

  var options = {
    title: 'Job Registration by Type',
    hAxis: {title: '',  titleTextStyle: {color: 'red'}}
  };

  var chart = new google.visualization.ColumnChart(document.getElementById('visualization'));
  chart.draw(data, options);
}

Upvotes: 1

Related Questions