backbone.js - how to present json data on Highchart -
[{"seep":"iw-b-(l)","date":" 27-jul-13","reslevel":79.215,"flowrate":1320.25}, {"seep":"iw-b-(l)","date":" 28-jul-13","reslevel":79.25,"flowrate":1320.833333}, {"seep":"iw-b-(l)","date":" 29-jul-13","reslevel":79.275,"flowrate":1321.25}, {"seep":"iw-b-(l)","date":" 30-jul-13","reslevel":79.29,"flowrate":1321.5}, {"seep":"iw-b-(l)","date":" 31-jul-13","reslevel":79.315,"flowrate":1321.916667}, {"seep":"iw-b-(l)","date":" 1-aug-13","reslevel":79.365,"flowrate":1322.75}, {"seep":"iw-b-(l)","date":" 2-aug-13","reslevel":79.38,"flowrate":1323}, {"seep":"iw-b-(l)","date":" 3-aug-13","reslevel":79.38,"flowrate":1323}, {"seep":"iw-b-(l)","date":" 4-aug-13","reslevel":79.58,"flowrate":1326.333333}, {"seep":"iw-b-(l)","date":" 5-aug-13","reslevel":79.66,"flowrate":1327.666667}, {"seep":"iw-b-(l)","date":" 6-aug-13","reslevel":79.8,"flowrate":1330}, {"seep":"iw-b-(l)","date":" 7-aug-13","reslevel":79.8,"flowrate":1330}, {"seep":"iw-b-(l)","date":" 8-aug-13","reslevel":79.965,"flowrate":1332.75}, {"seep":"iw-b-(l)","date":" 9-aug-13","reslevel":80.15,"flowrate":1335.833333}, {"seep":"iw-b-(l)","date":" 10-aug-13","reslevel":80.285,"flowrate":1338.083333}, {"seep":"iw-b-(l)","date":" 11-aug-13","reslevel":80.395,"flowrate":1339.916667}, {"seep":"iw-b-(l)","date":" 12-aug-13","reslevel":80.44,"flowrate":1340.666667}, {"seep":"iw-b-(l)","date":" 13-aug-13","reslevel":80.54,"flowrate":1342.333333}, {"seep":"iw-b-(l)","date":" 14-aug-13","reslevel":81.495,"flowrate":1358.25}, {"seep":"iw-b-(r)","date":" 27-jul-13","reslevel":79.215,"flowrate":1320.25}, {"seep":"iw-b-(r)","date":" 28-jul-13","reslevel":79.25,"flowrate":1320.833333}, {"seep":"iw-b-(r)","date":" 29-jul-13","reslevel":79.275,"flowrate":1321.25}, {"seep":"iw-b-(r)","date":" 30-jul-13","reslevel":79.29,"flowrate":1321.5}, {"seep":"iw-b-(r)","date":" 31-jul-13","reslevel":79.315,"flowrate":1321.916667}, {"seep":"iw-b-(r)","date":" 1-aug-13","reslevel":79.365,"flowrate":1322.75}, {"seep":"iw-b-(r)","date":" 2-aug-13","reslevel":79.38,"flowrate":1323}, {"seep":"iw-b-(r)","date":" 3-aug-13","reslevel":79.38,"flowrate":1323}, {"seep":"iw-b-(r)","date":" 4-aug-13","reslevel":79.58,"flowrate":1326.333333}, {"seep":"iw-b-(r)","date":" 5-aug-13","reslevel":82.38,"flowrate":1373}, {"seep":"iw-b-(r)","date":" 6-aug-13","reslevel":83.555,"flowrate":1392.583333}, {"seep":"iw-b-(r)","date":" 7-aug-13","reslevel":84.55,"flowrate":1409.166667}, {"seep":"iw-b-(r)","date":" 8-aug-13","reslevel":84.695,"flowrate":1411.583333}, {"seep":"iw-b-(r)","date":" 9-aug-13","reslevel":86.89,"flowrate":1448.166667}, {"seep":"iw-b-(r)","date":" 10-aug-13","reslevel":87.545,"flowrate":1459.083333}, {"seep":"iw-b-(r)","date":" 11-aug-13","reslevel":88.8,"flowrate":1480}, {"seep":"iw-b-(r)","date":" 12-aug-13","reslevel":88.955,"flowrate":1482.583333}, {"seep":"iw-b-(r)","date":" 13-aug-13","reslevel":89.051,"flowrate":1484.183333}, {"seep":"iw-b-(r)","date":" 14-aug-13","reslevel":90.154,"flowrate":1502.566667}, {"seep":"iw-d","date":" 27-jul-13","reslevel":79.66,"flowrate":1327.666667}, {"seep":"iw-d","date":" 28-jul-13","reslevel":79.8,"flowrate":1330}, {"seep":"iw-d","date":" 29-jul-13","reslevel":79.8,"flowrate":1330}, {"seep":"iw-d","date":" 30-jul-13","reslevel":79.965,"flowrate":1332.75}, {"seep":"iw-d","date":" 31-jul-13","reslevel":80.15,"flowrate":1335.833333}, {"seep":"iw-d","date":" 1-aug-13","reslevel":80.285,"flowrate":1338.083333}, {"seep":"iw-d","date":" 2-aug-13","reslevel":80.395,"flowrate":1339.916667}, {"seep":"iw-d","date":" 3-aug-13","reslevel":80.44,"flowrate":1340.666667}, {"seep":"iw-d","date":" 4-aug-13","reslevel":80.54,"flowrate":1342.333333}, {"seep":"iw-d","date":" 5-aug-13","reslevel":81.495,"flowrate":1358.25}, {"seep":"iw-d","date":" 6-aug-13","reslevel":82.79,"flowrate":1379.833333}, {"seep":"iw-d","date":" 7-aug-13","reslevel":84.55,"flowrate":1409.166667}, {"seep":"iw-d","date":" 8-aug-13","reslevel":84.65,"flowrate":1410.833333}, {"seep":"iw-d","date":" 9-aug-13","reslevel":85,"flowrate":1416.666667}, {"seep":"iw-d","date":" 10-aug-13","reslevel":89.35,"flowrate":1489.166667}, {"seep":"iw-d","date":" 11-aug-13","reslevel":89.95,"flowrate":1499.166667}, {"seep":"iw-d","date":" 12-aug-13","reslevel":90.05,"flowrate":1500.833333}, {"seep":"iw-d","date":" 13-aug-13","reslevel":91.25,"flowrate":1520.833333}, {"seep":"iw-d","date":" 14-aug-13","reslevel":91.3,"flowrate":1521.666667}, {"seep":"iw-e-(l)","date":" 27-jul-13","reslevel":79.29,"flowrate":1321.5}, {"seep":"iw-e-(l)","date":" 28-jul-13","reslevel":79.315,"flowrate":1321.916667}, {"seep":"iw-e-(l)","date":" 29-jul-13","reslevel":79.365,"flowrate":1322.75}, {"seep":"iw-e-(l)","date":" 30-jul-13","reslevel":79.38,"flowrate":1323}, {"seep":"iw-e-(l)","date":" 31-jul-13","reslevel":79.38,"flowrate":1323}, {"seep":"iw-e-(l)","date":" 1-aug-13","reslevel":79.58,"flowrate":1326.333333}, {"seep":"iw-e-(l)","date":" 2-aug-13","reslevel":79.66,"flowrate":1327.666667}, {"seep":"iw-e-(l)","date":" 3-aug-13","reslevel":79.8,"flowrate":1330}, {"seep":"iw-e-(l)","date":" 4-aug-13","reslevel":79.8,"flowrate":1330}, {"seep":"iw-e-(l)","date":" 5-aug-13","reslevel":79.965,"flowrate":1332.75}, {"seep":"iw-e-(l)","date":" 6-aug-13","reslevel":80.15,"flowrate":1335.833333}, {"seep":"iw-e-(l)","date":" 7-aug-13","reslevel":80.285,"flowrate":1338.083333}, {"seep":"iw-e-(l)","date":" 8-aug-13","reslevel":80.395,"flowrate":1339.916667}, {"seep":"iw-e-(l)","date":" 9-aug-13","reslevel":80.44,"flowrate":1340.666667}, {"seep":"iw-e-(l)","date":" 10-aug-13","reslevel":80.54,"flowrate":1342.333333}, {"seep":"iw-e-(l)","date":" 11-aug-13","reslevel":81.495,"flowrate":1358.25}, {"seep":"iw-e-(l)","date":" 12-aug-13","reslevel":82.36,"flowrate":1372.666667}, {"seep":"iw-e-(l)","date":" 13-aug-13","reslevel":82.69,"flowrate":1378.166667}, {"seep":"iw-e-(l)","date":" 14-aug-13","reslevel":83.88,"flowrate":1398}, {"seep":"iw-e-(r)","date":" 27-jul-13","reslevel":75.05,"flowrate":1250.833333}, {"seep":"iw-e-(r)","date":" 28-jul-13","reslevel":75.25,"flowrate":1254.166667}, {"seep":"iw-e-(r)","date":" 29-jul-13","reslevel":76.95,"flowrate":1282.5}, {"seep":"iw-e-(r)","date":" 30-jul-13","reslevel":78,"flowrate":1300}, {"seep":"iw-e-(r)","date":" 31-jul-13","reslevel":78.115,"flowrate":1301.916667}, {"seep":"iw-e-(r)","date":" 1-aug-13","reslevel":79.215,"flowrate":1320.25}, {"seep":"iw-e-(r)","date":" 2-aug-13","reslevel":79.25,"flowrate":1320.833333}, {"seep":"iw-e-(r)","date":" 3-aug-13","reslevel":79.275,"flowrate":1321.25}, {"seep":"iw-e-(r)","date":" 4-aug-13","reslevel":79.29,"flowrate":1321.5}, {"seep":"iw-e-(r)","date":" 5-aug-13","reslevel":79.315,"flowrate":1321.916667}, {"seep":"iw-e-(r)","date":" 6-aug-13","reslevel":79.365,"flowrate":1322.75}, {"seep":"iw-e-(r)","date":" 7-aug-13","reslevel":79.38,"flowrate":1323}, {"seep":"iw-e-(r)","date":" 8-aug-13","reslevel":79.38,"flowrate":1323}, {"seep":"iw-e-(r)","date":" 9-aug-13","reslevel":79.58,"flowrate":1326.333333}, {"seep":"iw-e-(r)","date":" 10-aug-13","reslevel":79.66,"flowrate":1327.666667}, {"seep":"iw-e-(r)","date":" 11-aug-13","reslevel":79.8,"flowrate":1330}, {"seep":"iw-e-(r)","date":" 12-aug-13","reslevel":79.8,"flowrate":1330}, {"seep":"iw-e-(r)","date":" 13-aug-13","reslevel":79.965,"flowrate":1332.75}, {"seep":"iw-e-(r)","date":" 14-aug-13","reslevel":80.15,"flowrate":1335.833333}, {"seep":"sm-1","date":" 27-jul-13","reslevel":80.285,"flowrate":1338.083333}, {"seep":"sm-1","date":" 28-jul-13","reslevel":80.395,"flowrate":1339.916667}, {"seep":"sm-1","date":" 29-jul-13","reslevel":80.44,"flowrate":1340.666667}, {"seep":"sm-1","date":" 30-jul-13","reslevel":80.54,"flowrate":1342.333333}, {"seep":"sm-1","date":" 31-jul-13","reslevel":81.495,"flowrate":1358.25}, {"seep":"sm-1","date":" 1-aug-13","reslevel":76.15,"flowrate":1269.166667}, {"seep":"sm-1","date":" 2-aug-13","reslevel":76.95,"flowrate":1282.5}, {"seep":"sm-1","date":" 3-aug-13","reslevel":78,"flowrate":1300}, {"seep":"sm-1","date":" 4-aug-13","reslevel":78.115,"flowrate":1301.916667}, {"seep":"sm-1","date":" 5-aug-13","reslevel":79.215,"flowrate":1320.25}, {"seep":"sm-1","date":" 6-aug-13","reslevel":79.25,"flowrate":1320.833333}, {"seep":"sm-1","date":" 7-aug-13","reslevel":79.275,"flowrate":1321.25}, {"seep":"sm-1","date":" 8-aug-13","reslevel":79.29,"flowrate":1321.5}, {"seep":"sm-1","date":" 9-aug-13","reslevel":79.315,"flowrate":1321.916667}, {"seep":"sm-1","date":" 10-aug-13","reslevel":79.365,"flowrate":1322.75}, {"seep":"sm-1","date":" 11-aug-13","reslevel":79.38,"flowrate":1323}, {"seep":"sm-1","date":" 12-aug-13","reslevel":79.38,"flowrate":1323}, {"seep":"sm-1","date":" 13-aug-13","reslevel":79.58,"flowrate":1326.333333}, {"seep":"sm-1","date":" 14-aug-13","reslevel":79.66,"flowrate":1327.666667}, {"seep":"sm-2-(l)","date":" 27-jul-13","reslevel":79.8,"flowrate":1330}, {"seep":"sm-2-(l)","date":" 28-jul-13","reslevel":79.8,"flowrate":1330}, {"seep":"sm-2-(l)","date":" 29-jul-13","reslevel":79.965,"flowrate":1332.75}, {"seep":"sm-2-(l)","date":" 30-jul-13","reslevel":80.15,"flowrate":1335.833333}, {"seep":"sm-2-(l)","date":" 31-jul-13","reslevel":80.285,"flowrate":1338.083333}, {"seep":"sm-2-(l)","date":" 1-aug-13","reslevel":80.395,"flowrate":1339.916667}, {"seep":"sm-2-(l)","date":" 2-aug-13","reslevel":80.44,"flowrate":1340.666667}, {"seep":"sm-2-(l)","date":" 3-aug-13","reslevel":80.54,"flowrate":1342.333333}, {"seep":"sm-2-(l)","date":" 4-aug-13","reslevel":81.495,"flowrate":1358.25}, {"seep":"sm-2-(l)","date":" 5-aug-13","reslevel":76.15,"flowrate":1269.166667}, {"seep":"sm-2-(l)","date":" 6-aug-13","reslevel":76.95,"flowrate":1282.5}, {"seep":"sm-2-(l)","date":" 7-aug-13","reslevel":78,"flowrate":1300}, {"seep":"sm-2-(l)","date":" 8-aug-13","reslevel":78.115,"flowrate":1301.916667}, {"seep":"sm-2-(l)","date":" 9-aug-13","reslevel":79.215,"flowrate":1320.25}, {"seep":"sm-2-(l)","date":" 10-aug-13","reslevel":79.215,"flowrate":1320.25}, {"seep":"sm-2-(l)","date":" 11-aug-13","reslevel":79.25,"flowrate":1320.833333}, {"seep":"sm-2-(l)","date":" 12-aug-13","reslevel":79.275,"flowrate":1321.25}, {"seep":"sm-2-(l)","date":" 13-aug-13","reslevel":79.29,"flowrate":1321.5}, {"seep":"sm-2-(l)","date":"14-aug-13","reslevel":79.315,"flowrate":1321.916667}, {"seep":"sm-2-(r)","date":"27-jul-13","reslevel":79.365,"flowrate":1322.75}, {"seep":"sm-2-(r)","date":"28-jul-13","reslevel":79.38,"flowrate":1323}, {"seep":"sm-2-(r)","date":"29-jul-13","reslevel":79.38,"flowrate":1323}, {"seep":"sm-2-(r)","date":"30-jul-13","reslevel":79.58,"flowrate":1326.333333}, {"seep":"sm-2-(r)","date":"31-jul-13","reslevel":79.66,"flowrate":1327.666667}, {"seep":"sm-2-(r)","date":"1-aug-13","reslevel":79.8,"flowrate":1330}, {"seep":"sm-2-(r)","date":"2-aug-13","reslevel":79.8,"flowrate":1330}, {"seep":"sm-2-(r)","date":"3-aug-13","reslevel":79.965,"flowrate":1332.75}, {"seep":"sm-2-(r)","date":"4-aug-13","reslevel":80.15,"flowrate":1335.833333}, {"seep":"sm-2-(r)","date":"5-aug-13","reslevel":80.285,"flowrate":1338.083333}, {"seep":"sm-2-(r)","date":"6-aug-13","reslevel":80.395,"flowrate":1339.916667}, {"seep":"sm-2-(r)","date":"7-aug-13","reslevel":80.44,"flowrate":1340.666667}, {"seep":"sm-2-(r)","date":"8-aug-13","reslevel":80.54,"flowrate":1342.333333}, {"seep":"sm-2-(r)","date":"9-aug-13","reslevel":81.495,"flowrate":1358.25}, {"seep":"sm-2-(r)","date":"10-aug-13","reslevel":82.38,"flowrate":1373}, {"seep":"sm-2-(r)","date":"11-aug-13","reslevel":83.55,"flowrate":1392.5}, {"seep":"sm-2-(r)","date":"12-aug-13","reslevel":84.55,"flowrate":1409.166667}, {"seep":"sm-2-(r)","date":"13-aug-13","reslevel":84.65,"flowrate":1410.833333}, {"seep":"sm-2-(r)","date":"14-aug-13","reslevel":86.89,"flowrate":1448.166667}] this data (in json format) displayed on chart , not sure how categorise reslevel , flowrate
and code i've been working on
this.collection.each(function (data) { var dt = data.attributes.date, reslevel = data.attributes.reslevel, flowrate = data.attributes.flowrate; options.series.push({ 'name': 'reservoir level', data: [dt, reslevel] }); options.series.push({ 'name': 'flow rate', yaxis: 1, data: [dt, flowrate] }); }, this); the code above using backbone.js, reside in backbone.view.extend. please help
update: @pawel
here result wrong me. should showing 2 options, reservoir level , flow rate
change that:
this.collection.each(function (data) { var dt = data.attributes.date, reslevel = data.attributes.reslevel, flowrate = data.attributes.flowrate; options.series.push({ 'name': 'reservoir level', data: [dt, reslevel] }); options.series.push({ 'name': 'flow rate', yaxis: 1, data: [dt, flowrate] }); }, this); to create 2 series, add points series:
options.series.push({ 'name': 'reservoir level', data: [] }); options.series.push({ 'name': 'flow rate', yaxis: 1, data: [] }); this.collection.each(function (data) { var dt = data.attributes.date, reslevel = data.attributes.reslevel, flowrate = data.attributes.flowrate; options.series[0].data.push([dt, reslevel]); options.series[1].data.push([dt, flowrate]); }, this);
Comments
Post a Comment