title: Google Chart From Json "undefined is not a function"
body: <p>I am trying to work with google charts for the first time. My Json is as below</p>
  
  <pre><code>{\"cols\":[{\"id\":\"Date\",\"label\":\"Date\",\"type\":\"date\"},{\"id\":\"KeywordCount\",\"label\":\"count\",\"type\":\"number\"}],\"rows\":[{\"c\":
  [{\"v\":\"new Date(2014725)\",\"f\":\"25 July 2014\"},{\"v\":\"77\",\"f\":\"77\"}]},{\"c\":
  [{\"v\":\"new Date(2014724)\",\"f\":\"24 July 2014\"},{\"v\":\"101\",\"f\":\"101\"}]},{\"c\":
  [{\"v\":\"new Date(2014723)\",\"f\":\"23 July 2014\"},{\"v\":\"100\",\"f\":\"100\"}]},{\"c\":
  [{\"v\":\"new Date(2014722)\",\"f\":\"22 July 2014\"},
  {\"v\":\"130\",\"f\":\"130\"}]}],\"p\":null}
  </code></pre>
  
  <p>This looks good for me, I am not able to figured it out what i am missing because i can only see an error in the chart ("undefined is not a function") . My javascript file for Google charts are</p>
  
  <pre><code>google.load('visualization', '1', { 'packages': ['corechart'] });
  var postDate = $('#ReportingWall').serialize();
  
  function drawChartAll() {
      var jsonData = $.ajax({
          url: '/ReportingWall/analyseStats/',
          type: 'POST',
          data: postDate,
          dataType: 'json',
          async: false,
          success: function (response) {
          }
      }).responseText;
  
      var data = new google.visualization.DataTable(jsonData);
  
      console.debug(jsonData);
      console.debug(data);
      var chart = new google.visualization.LineChart(document.getElementById('charts_all'));
      chart.draw(data, options);
  
      var columns = [];
      var series = {};
      for (var i = 0; i &lt; data.getNumberOfColumns() ; i++) {
          columns.push(i);
          if (i &gt; 0) {
              series[i - 1] = {};
          }
      }
  
      var options = {
          title: 'Keywords:',
          width: 908,
          legend: {
              position: 'right'
          },
          legendFontSize: 14,
          chartArea: {
              left: 50,
              width: '80%'
          },
          series: series
      }
  
      google.visualization.events.addListener(chart, 'select', function () {
          var sel = chart.getSelection();
          // if selection length is 0, we deselected an element
          if (sel.length &gt; 0) {
              // if row is undefined, we clicked on the legend
              if (sel[0].row === null) {
                  var col = sel[0].column;
                  if (columns[col] == col) {
                      // hide the data series
                      columns[col] = {
                          label: data.getColumnLabel(col),
                          type: data.getColumnType(col),
                          calc: function () {
                              return null;
                          }
                      };
  
                      // grey out the legend entry
                      series[col - 1].color = '#CCCCCC';
                  } else {
                      // show the data series
                      columns[col] = col;
                      series[col - 1].color = null;
                  }
                  var view = new google.visualization.DataView(data);
                  view.setColumns(columns);
                  chart.draw(view, options);
              }
          }
      });
  }
  </code></pre>