使用来自Elasticsearch的搜索数据填充Google图表 [英] Populate Google Chart with Search Data from Elasticsearch
问题描述
我只是在学习Elasticsearch和Javascript，由于易用性，我刚开始使用Google图表。
I'm just learning Elasticsearch and Javascript and I just started using Google Charts due to their ease of use.
我正在尝试渲染基于Google图表的在Elasticsearch查询上。由于数据格式不正确，该图表无法呈现。这是我的无效代码：
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:
<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>
我遇到的问题是查询返回的数据不是字段
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.
有没有一种方法可以只保留字段而返回此查询？也许有一种方法可以查询并格式化PHP文件中的数据，然后可以在图表中调用它？ Google Charts网站建议可以创建一个PHP文件来加载查询。这来自他们的网站：
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:
<?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文件？例如：
I'm most interested in the last comment.. how do I query Elasticsearch and return an acceptable JSON document? EX:
{
"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）完成此操作：
I was able to complete this using the following code (thanks 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图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
