title: Populate Google Chart with Search Data from Elasticsearch
body: <p>I'm just learning Elasticsearch and Javascript and I just started using Google Charts due to their ease of use.</p>
  
  <p>I'm attempting to render a Google Chart based on an Elasticsearch query.  The chart does not render due to improperly formatted data.  Here is my non-working code:</p>
  
  <pre><code>    &lt;html&gt;
    &lt;head&gt;
      &lt;!--Load the AJAX API--&gt;
      &lt;script type="text/javascript" src="https://www.google.com/jsapi"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="java/jquery-1.9.1.min.js""&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
  
      // Load the Visualization API and the piechart package.
      google.load('visualization', '1', {'packages':['corechart']});
  
      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);
  
      function drawChart() {
        var jsonData = $.ajax({
            url: 'http://localhost:9200/inventory/_search?pretty=true'
                 , type: 'POST'
                 , data :
                 JSON.stringify(
                    {
                      "query" : { "match_all" : {} },
  
                      "facets" : {
                        "tags" : {
                          "terms" : {
                              "field" : "qty_onhand",
                              "size"  : "10"
                          }
                        }
                      }
                    }),
            dataType:"json"
            async: false
            ,processData: false
            }).responseText;
  
        // Create our data table out of JSON data loaded from server.
        var data = new google.visualization.DataTable(jsonData);
  
        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240});
      }
  
      &lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;!--Div that will hold the pie chart--&gt;
      &lt;div id="chart_div"&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The issue I'm running into is that the data returned from the query is not the the "fields", but its the entire query summary as well.</p>
  
  <p>Is there a way to return this query while retaining only the fields? Or perhaps there is a way to query and format the data in a PHP file that I can then call in the chart?  Google Charts site suggests that a PHP file can be created to load the query.  This is from their site:</p>
  
  <pre><code>&lt;?php 
  
  // This is just an example of reading server side data and sending it to the client.
  // It reads a json formatted text file and outputs it.
  
  $string = file_get_contents("sampleData.json");
  echo $string;
  
  // Instead you can query your database and parse into JSON etc etc
  
  ?&gt;
  </code></pre>
  
  <p>I'm most interested in the last comment.. how do I query Elasticsearch and return an acceptable JSON document? EX:</p>
  
  <pre><code>{
  "cols": [
      {"id":"","label":"Topping","pattern":"","type":"string"},
      {"id":"","label":"Slices","pattern":"","type":"number"}
    ],
  "rows": [
      {"c":[{"v":"Mushrooms","f":null},{"v":3,"f":null}]},
      {"c":[{"v":"Onions","f":null},{"v":1,"f":null}]},
      {"c":[{"v":"Olives","f":null},{"v":1,"f":null}]},
      {"c":[{"v":"Zucchini","f":null},{"v":1,"f":null}]},
      {"c":[{"v":"Pepperoni","f":null},{"v":2,"f":null}]}
    ]
  }
  </code></pre>