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

Popular posts from this blog

java - activate/deactivate sonar maven plugin by profile? -

python - TypeError: can only concatenate tuple (not "float") to tuple -

java - What is the difference between String. and String.this. ? -