javascript - Chart.js with JSON empty -
i'm having problems using readings json file fill in chart. found function here allows me pass api url , returns json data , works, decided loop through json array adding each reading in array , passing array chart function when load page chart empty, here code `
<!doctype html> <html lang="en"> <head> <script src="chart.js"></script> </head> <body> <canvas id="mychart" width="400" height="400"></canvas> <div id="result"></div> <script> var getjson = function(url) { return new promise(function(resolve, reject) { var xhr = new xmlhttprequest(); xhr.open('get', url, true); xhr.responsetype = 'json'; xhr.onload = function() { var status = xhr.status; if (status == 200) { resolve(xhr.response); } else { reject(status); } }; xhr.send(); }); }; var json = getjson('http://ec2-54-152-138-146.compute-1.amazonaws.com:9000/system/listsystems').then(function(data) { alert(data.data[0].waterlevel); var chartdata =[]; (var = 0; < data.length; i++){ chartdata.push(data.data[i].waterlevel); } alert(chartdata); var bardata = { labels: ['italy', 'uk', 'usa', 'germany', 'france', 'japan'], datasets: [ { label: '2010 customers #', fillcolor: '#382765', data: chartdata }, { label: '2014 customers #', fillcolor: '#7bc225', data: chartdata } ] }; var context = document.getelementbyid('mychart').getcontext('2d'); var mychart = new chart(context).bar(bardata) result.innertext = data.data; //display result in html element }, function(status) { //error detection.... alert('something went wrong.'); });</script> </body> </html>
your loop incorrect, @ stop condition in cycle.
you have use data.data.length instead of data.length: reference:
for (var = 0; < data.data.length; i++)
Comments
Post a Comment