使用來自Elasticsearch的搜索數據填充Google圖表

Question

我只是在學習Elasticsearch和Javascript，由於易用性，我剛開始使用Google圖表。

我正在嘗試根據Elasticsearch查詢呈現Google圖表。 由於數據格式不正確，該圖表無法呈現。 這是我的無效代碼：

    <html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="java/jquery-1.9.1.min.js""></script>
    <script type="text/javascript">

    // 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});
    }

    </script>
  </head>

  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div"></div>
  </body>
</html>

我遇到的問題是，從查詢返回的數據不是“字段”，而是整個查詢摘要。

有沒有辦法只保留字段就返回此查詢？ 也許有一種方法可以查詢並格式化PHP文件中的數據，然后可以在圖表中調用它？ Google Charts網站建議可以創建一個PHP文件來加載查詢。 這是從他們的網站：

<?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

?>

我對最后一條評論最感興趣。如何查詢Elasticsearch並返回可接受的JSON文檔？ 例如：

{
"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}]}
  ]
}

Answer 1

您可以嘗試以下方法嗎：

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

就是說，如果您確實需要如最后所述的內容，我認為您必須自己處理並將Elasticsearch響應格式轉換為數據格式。

這是我進行另一個項目的方法。

if(result != null && result.hits != null && result.hits.hits != null && result.hits.hits.length > 0){
   for(var i=0; i <= result.hits.hits.length; i++){
       var hit = result.hits.hits[i];
       // transform your hit to ...
   }
}

Answer 2

我能夠使用以下代碼完成此操作（感謝dinjas）：

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">

     google.load('visualization', '1', {'packages':['corechart']});

     google.setOnLoadCallback(drawChart);

   function drawChart() {
      var json;
    $.ajax({
            url: 'http://localhost:9200/wcs/routes/_search',
            type: 'POST',
            data :
                JSON.stringify(
                    {
                        "query" : { "match_all" : {} }
                    }),
            dataType : 'json',
            async: false,
            success: function(data){
                json = data;
            }
        })



var jdata = {};
jdata.cols = [
    {
        "id": "",
        "label": "Lane",
        "type": "string"
    },
    {
        "id": "",
        "label": "Routes",
        "type":"number"
    }
];
//need loop:
jdata.rows = [
    {
        "c": [
            {
                "v": json.hits.hits[0]._source.lane
            },
            {
                "v": json.hits.hits[0]._source.routes
            }
        ]
    }
];
     var data = new google.visualization.DataTable(jdata);

      var chart = new google.visualization.PieChart(document.getElementById('piechart_div'));
     chart.draw(data, {is3D: true, title: 'Multi Routes per Lane', width: 600, height: 440});
    }
    </script>
</head>
<body>
    <div id="piechart_div"> </div>
 </body>
</html>

使用來自Elasticsearch的搜索數據填充Google圖表

問題描述

2 個解決方案

解決方案1
0 2013-04-04 05:12:09

解決方案2
0 已采納 2013-04-09 17:52:59

使用來自Elasticsearch的搜索數據填充Google圖表

問題描述

2 個解決方案

解決方案1 0 2013-04-04 05:12:09

解決方案2 0 已采納 2013-04-09 17:52:59

解決方案1
0 2013-04-04 05:12:09

解決方案2
0 已采納 2013-04-09 17:52:59