javascript - Formatting JSON document to specification needed for visualization -
i'm attempting create google chart based on data in elastic search. json document needs in following format:
{ "cols": [ {"id":"","label":"lane","type":"string"}, {"id":"","label":"routes","type":"number"} ], "rows": [ {"c":[{"v":"m01"},{"v":4657}]}, {"c":[{"v":"m02"},{"v":4419}]}, {"c":[{"v":"m03"},{"v":4611}]}, {"c":[{"v":"m04"},{"v":4326}]}, {"c":[{"v":"m05"},{"v":4337}]}, {"c":[{"v":"m06"},{"v":5363}]} ] } my query (via ajax command) returns following data:
$ curl http://localhost:9200/wcs/routes/_search?pretty=true -d '{"query_all":{}}}' { "took" : 2, "timed_out" : false, "_shards" : { "total" : 5, "successful" : 5, "failed" : 0 }, "hits" : { "total" : 7, "max_score" : 1.0, "hits" : [ { "_index" : "wcs", "_type" : "routes", "_id" : "4", "_score" : 1.0, "_source" : {"lane":"m04","routes":"102"} }, { "_index" : "wcs", "_type" : "routes", "_id" : "5", "_score" : 1.0, "_source" : {"lane":"m03","routes":"143"} }, { "_index" : "wcs", "_type" : "routes", "_id" : "1", "_score" : 1.0, "_source" : {"lane":"m07","routes":"80"} }, { "_index" : "wcs", "_type" : "routes", "_id" : "6", "_score" : 1.0, "_source" : {"lane":"m02","routes":"157"} }, { "_index" : "wcs", "_type" : "routes", "_id" : "2", "_score" : 1.0, "_source" : {"lane":"m06","routes":"101"} }, { "_index" : "wcs", "_type" : "routes", "_id" : "7", "_score" : 1.0, "_source" : {"lane":"m01","routes":"105"} }, { "_index" : "wcs", "_type" : "routes", "_id" : "3", "_score" : 1.0, "_source" : {"lane":"m05","routes":"160"} } ] } } the html/js i'm attempting run (and returns nothing) follows. provide insight may doing wrong? appreciated.
<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 jsondata = $.ajax({ url: 'http://localhost:9200/wcs/routes/_search?pretty=true' , type: 'post' , data : json.stringify( { "query" : { "match_all" : {} } }) , datatype : 'json' async: false }); var json = json.parse(jsondata); var jdata = '{ "cols": [{"id":"", "label":"lane", "type": "string"},' + '{"id": "", "label": "routes", "type": "number"}],' + '"rows":[{"c": [{"v":' + json.hits[0].hits[0]._source.lane + '},{"v":' + json.hits[0].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> <input type="button" onclick = "drawchart()" value="test"> <div id="piechart_div"> </div> </body> </html>
add success handler in ajax call. felix king pointed out, google.visualization.datatable expects javascript object - not string
so move code
var jdata = '{ "cols": [{"id":"", "label":"lane", "type": "string"},' + '{"id": "", "label": "routes", "type": "number"}],' + '"rows":[{"c": [{"v":' + json.hits[0].hits[0]._source.lane + '},{"v":' + json.hits[0].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}); into success handler
$.ajax({ url: 'http://localhost:9200/wcs/routes/_search?pretty=true' , type: 'post' , data : json.stringify( { "query" : { "match_all" : {} } }) , datatype : 'json' , success : function (json){ // <-- json = javascript object since set datatype 'json' // object pass datatable var jdata = { "cols": [{ "id": "", "label": "lane", "type": "string" }, { "id": "", "label": "routes", "type": "number" }], "rows": [{ "c": [{ "v": json.hits[0].hits[0]._source.lane }, { "v": json.hits[0].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}); } });
Comments
Post a Comment