1

私はElasticsearchとJavascriptを学んでおり、使いやすさからGoogle Chartsを使い始めました。

Elasticsearch クエリに基づいて Google Chart をレンダリングしようとしています。不適切な形式のデータが原因で、グラフが表示されません。ここに私の非動作コードがあります:

    <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}]}
  ]
}
4

2 に答える 2

0

次のようなものを試すことができますか:

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 ...
   }
}
于 2013-04-04T05:12:09.920 に答える
0

次のコードを使用してこれを完了することができました (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>
于 2013-04-09T17:52:59.247 に答える