使用来自Elasticsearch的搜索数据填充Google图表

廉实

2023-03-14

问题内容：

我只是在学习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}]}
  ]
}

问题答案：

我能够使用以下代码完成此操作（感谢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图表

相关阅读

相关文章

相关问答

相关工具

相关文档