This sample shows how to display the data in a JSON-stat response in a sortable table, using the Google Visualization API.
This is done in a script of less than 40 lines, thanks to the JSON-stat toTable() method.
Click Open in a new window to see the whole page.
Check the JSON-stat Javascript Toolkit. See more method examples in the Test Suite page.
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="https://d3js.org/d3.v3.min.js" type="text/javascript"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/jsonstat@0.13.13" type="text/javascript"></script> | |
| <script src="https://www.google.com/jsapi" type="text/javascript"></script> | |
| <style type="text/css"> | |
| h1 { | |
| font-family: arial, helvetica; | |
| text-align: center; | |
| font-size: 16px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="table"></div> | |
| <script type="text/javascript"> | |
| google.load('visualization', '1', {packages:['table']}); | |
| google.setOnLoadCallback(init); | |
| function init(){ | |
| JSONstat('https://json-stat.org/samples/oecd.json', function(){ | |
| var | |
| len=this.length, | |
| d=document, | |
| table=d.getElementById('table') | |
| ; | |
| if (len){ | |
| for(var i=0; i<len; i++){ | |
| var | |
| p=d.createElement("p"), | |
| h1=d.createElement("h1"), | |
| id='ds'+i, | |
| ds=this.Dataset(i) | |
| ; | |
| p.id=id; | |
| h1.innerHTML=ds.label; | |
| table.appendChild(h1); | |
| table.appendChild(p); | |
| var data=new google.visualization.DataTable(ds.toTable({type:'object'}),0.6); | |
| new google.visualization.Table(d.getElementById(id)) | |
| .draw(data, {showRowNumber: false}) | |
| ; | |
| } | |
| }else{ | |
| table.innerHTML="Something went wrong..."; | |
| } | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> |