javascript - Using json file as data source for chart.js -
i attempting include json values in bar chart. have json logging console not sure how include in data property chart. here source json...
{time: "2016-07-03t21:29:57.987z", temperature: 25.2, pressure: 98241, altitude: 259.98737254818553}
thanks
<!doctype html> <html> <head> <title>weatherpush</title> <script src="../dist/jquery.min.js"></script> <script src="../dist/chart.bundle.js"></script> <style> canvas { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } </style> </head> <body> <div id='d1' style="position:absolute; top:50px; left:0px; z-index:1"> <canvas id='canvas' width='250' height='500'> browser not support html5 canvas. </canvas> </div> <div id='d1' style="position:absolute; top:50px; left:300px; z-index:1"> <canvas id='canvas2' width='250' height='500'> browser not support html5 canvas. </canvas> </div> <div id='d1' style="position:absolute; top:50px; left:600px; z-index:1"> <canvas id='canvas3' width='250' height='500'> browser not support html5 canvas. </canvas> </div> <script> var jsonobjgraph; var getdatapromise = $.getjson('../data.json', function(data) { jsonobjgraph = data; console.log(jsonobjgraph); }); getdatapromise.done(function () { // done }); getdatapromise.fail(function () { // fail; }); var barchartdata = { labels : ["temperature"], datasets : [ { label: 'temperature', data : [] } ] } var barchartdata2 = { labels : ["pressure"], datasets : [ { label: 'pressure', data : [] } ] } var barchartdata3 = { labels : ["altitude"], datasets : [ { label: 'altitude', data : [] } ] } window.onload = function(){ var ctx = document.getelementbyid("canvas").getcontext("2d"); window.mybar = new chart(ctx, { type: 'bar', data: barchartdata, options: { elements: { rectangle: { backgroundcolor: "rgba(151,187,205,0.5)", borderwidth: 2, bordercolor: 'gray', } }, responsive: true, legend: { position: 'right', display: false, }, title: { display: false, text: 'temperature' } } }); var ctx2 = document.getelementbyid("canvas2").getcontext("2d"); window.mybar = new chart(ctx2, { type: 'bar', data: barchartdata2, options: { elements: { rectangle: { backgroundcolor: "rgba(151,187,205,0.5)", borderwidth: 2, bordercolor: 'gray', } }, responsive: true, legend: { display: false, position: 'right', }, title: { display: false, text: 'pressure' } } }); var ctx3 = document.getelementbyid("canvas3").getcontext("2d"); window.mybar = new chart(ctx3, { type: 'bar', data: barchartdata3, options: { elements: { rectangle: { backgroundcolor: "rgba(151,187,205,0.5)", borderwidth: 2, bordercolor: 'gray', } }, responsive: true, legend: { display: false, position: 'right', }, title: { display: false, text: 'pressure' } } }); } </script> </body> </html>
<!doctype html> <html> <head> <title>weatherpush</title> <script src="../dist/jquery.min.js"></script> <script src="../dist/chart.bundle.js"></script> <style> canvas { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } </style> </head> <body> <div id='d1' style="position:absolute; top:50px; left:0px; z-index:1"> <canvas id='canvas' width='250' height='500'> browser not support html5 canvas. </canvas> </div> <div id='d1' style="position:absolute; top:50px; left:300px; z-index:1"> <canvas id='canvas2' width='250' height='500'> browser not support html5 canvas. </canvas> </div> <div id='d1' style="position:absolute; top:50px; left:600px; z-index:1"> <canvas id='canvas3' width='250' height='500'> browser not support html5 canvas. </canvas> </div> <button id="updatedataset">update datasets</button> <script> $.getjson("data.json", function (data) { time = data.time temp = data.temperature press = data.pressure alt = data.altitude console.log(time) var barchartdata = { labels: ["temperature"], datasets: [ { label: 'temperature', data: [temp] } ] }; var barchartdata2 = { labels : ["pressure"], datasets : [ { label: 'pressure', data : [press] } ] }; var barchartdata3 = { labels : ["altitude"], datasets : [ { label: 'altitude', data : [alt] } ] }; var ctx = document.getelementbyid("canvas").getcontext("2d"); window.mybar = new chart(ctx, { type: 'bar', data: barchartdata, options: { elements: { rectangle: { backgroundcolor: "rgba(151,187,205,0.5)", borderwidth: 2, bordercolor: 'gray', } }, responsive: true, legend: { display: false, position: 'right', }, title: { display: true, text: time } } } ); var ctx2 = document.getelementbyid("canvas2").getcontext("2d"); window.mybar = new chart(ctx2, { type: 'bar', data: barchartdata2, options: { elements: { rectangle: { backgroundcolor: "rgba(151,187,205,0.5)", borderwidth: 2, bordercolor: 'gray', } }, responsive: true, legend: { display: false, position: 'right', }, title: { display: true, text: time } } }); var ctx3 = document.getelementbyid("canvas3").getcontext("2d"); window.mybar = new chart(ctx3, { type: 'bar', data: barchartdata3, options: { elements: { rectangle: { backgroundcolor: "rgba(151,187,205,0.5)", borderwidth: 2, bordercolor: 'gray', } }, responsive: true, legend: { display: false, position: 'right', }, title: { display: true, text: time } } }); }) </script> </body> </html>
Comments
Post a Comment