title: How to use JSON in Google Charts?
body: <p>I want use JSON in Google Charts. This is my JSON Result:</p>
  
  <pre><code>[
      {
          "Ders": "Coğrafya",
          "SoruSayisi": "17"
      },
      {
          "Ders": "deneme",
          "SoruSayisi": "7"
      },
      {
          "Ders": "FEN BİLGİSİ",
          "SoruSayisi": "8"
      },
      {
          "Ders": "Geometri",
          "SoruSayisi": "5"
      }
  
  
  ]
  </code></pre>
  
  <p>My PHP Code:</p>
  
  <pre><code>public function getLessonCount()
              {
                  $result = $this-&gt;getModelsManager()-&gt;createBuilder()
                      -&gt;addFrom("\App\Models\Content\Dersler", "d")
                      -&gt;columns(array("Ders"=&gt;"d.dersAdi","SoruSayisi"=&gt;"count(q.dersId)"))
                      -&gt;innerJoin("\App\Models\CmsQuestion",'q.dersId=d.dersId', "q")
                      -&gt;groupBy("d.dersAdi")
                      -&gt;getQuery()-&gt;execute();
  
                  return $result;
              }
  </code></pre>
  
  <p>JavaScript code in AngularJS:</p>
  
  <pre><code>//google visualization loader
      google.load('visualization', '1', {'packages':['corechart']});
          google.setOnLoadCallback(getDatas());
          function drawChart() {
              var data = new google.visualization.DataTable([$scope.datas]);
              var options = {
                  title: 'Toplam Soru Sayısı: '
              };
              var chart = new google.visualization.PieChart(document.getElementById('piechart'));
              chart.draw(data, options);
          }
  </code></pre>
  
  <p>//call getDatas Function to receive JSON result</p>
  
  <pre><code>        function getDatas(){
              //call web service to get json
              WebService.getDatas(function (data) {
                  if (data) {
                     //put data in scope.datas
                      $scope.datas =data;
                      drawChart();
                  }
              });
          }
  </code></pre>
  
  <p>Also HTML code:</p>
  
  <pre><code>&lt;div data-ng-controller="AnalizController"&gt;
      &lt;div class="panel panel-primary"&gt;
          &lt;div class="panel-heading"&gt;
              &lt;h3&gt;Analiz&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="panel-body"&gt;
  
             &lt;div class="AnalyzeWrapper"&gt;
                 &lt;div class="AllQuestions"&gt;
              &lt;div id="piechart" style="width: 40%; height: 40%"&gt;&lt;/div&gt;
                 &lt;/div&gt;
             &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But I got an error in HTML page:</p>
  
  <blockquote>
    <p>Table has no columns.</p>
  </blockquote>