javascript - NVD3 - Using JSON url data with LinePlusBarChart (mapping values) -
i'm trying use nvd3 library make graphs can't json url work code.
graph script:
d3.json("jsondata3.json",function(error,data){ var chart; nv.addgraph(function() { chart = nv.models.lineplusbarchart() .x(function(d) { return d.label }) .y(function(d) { return d.value }) .margin({top: 30, right: 20, bottom: 50, left: 175}) chart.y1axis.tickformat(d3.format(',f')); chart.y2axis.tickformat(d3.format(',f')); d3.select('#chart svg') .datum(data) .transition().duration(500) .call(chart); nv.utils.windowresize(chart.update); chart.dispatch.on('statechange', function(e) { nv.log('new state:', json.stringify(e)); }); return chart; }); });
json data format:
[{"transaction_day":"20130620","mt_attempted":4505891,"mt_success":83.54,"mo_attempted":321857,"mo_success":98.9},{"transaction_day":"20130621","mt_attempted":6636631,"mt_success":81.33,"mo_attempted":311954,"mo_success":98.66},{"transaction_day":"20130622","mt_attempted":2708897,"mt_success":90.47,"mo_attempted":334279,"mo_success":98.95} ]
the example came code (which works obviously) recognize has different formatting json data. "map.series.values" function used there.
var testdata = [ { "key" : "quantity" , "bar": true, "values" : [ [ 1327986000000 , 690033.0] , [ 1330491600000 , 690033.0] , [ 1333166400000 , 514733.0] , [ 1335758400000 , 514733.0]] }, { "key" : "price" , "values" : [ [ 1322629200000 , 382.2] , [ 1325307600000 , 405.0] , [ 1327986000000 , 456.48] , [ 1330491600000 , 542.44] , [ 1333166400000 , 599.55] , [ 1335758400000 , 583.98] ] } ].map(function(series) { series.values = series.values.map(function(d) { return {x: d[0], y: d[1] } }); return series; });
so how json file work code? i'm lost...
i think still need format json data same format of sample data. try this.
notice: javascript timestamp in millisecond should convert timestamp (20130620 etc.) unix timestamp , multiple 1000.
var testdata = [ { "key" : "mt_attempted" , "bar": true, "values" : [ [ 4505891 , 20130620] , [ 6636631 , 20130621] , [ 2708897 , 20130622] ] }, { "key" : "mt_success" , "values" : [ [ 83.54 , 20130620] , [ 81.33 , 20130621] , [ 90.47 , 20130622] ] }, { "key" : "mo_attempted" , "values" : [ [ 321857 , 20130620] , [ 311954 , 20130621] , [ 334279 , 20130622] ] }, { "key" : "mo_success" , "values" : [ [ 98.9 , 20130620] , [ 98.66 , 20130621] , [ 98.95 , 20130622] ] }, ].map(function(series) { series.values = series.values.map(function(d) { return {x: d[0], y: d[1] } }); return series; });
Comments
Post a Comment