Untitled

<!DOCTYPE html>
<html>
<head>
  <title>ElasticSearch Terms Facet As Donut Chart</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <!-- Load JS libraries -->
  <script src="jquery-1.5.1.min.js"></script>
  <script src="protovis-r3.2.js"></script>
  <script src="donut.js"></script>
  <script>
    $( function() { load_data(); });

    var display_chart = function(json) {
      Donut().data(json.facets.tags.terms).draw();
    };

    var load_data = function() {
      $.ajax({   url: 'http://localhost:9200/articles-terms-facet/_search?pretty=true'
               , type: 'POST'
               , data :
                  JSON.stringify(
                  {
                    "query" : { "match_all" : {} },

                    "facets" : {
                      "tags" : {
                        "terms" : {
                            "field" : "tags",
                            "size"  : "10"
                        }
                      }
                    }
                  })
               , dataType : 'json'
               , processData: false
               , success: function(json, statusText, xhr) {
                   return display_chart(json);
                 }
               , error: function(xhr, message, error) {
                   console.error("Error while loading data from ElasticSearch", message);
                   throw(error);
                 }
      });
    };
  </script>
</head>
<body>

  <!-- Placeholder for the chart -->
  <div id="chart"></div>

</body>
</html>