nvd3.js - Passing array values to Nvd3 chart -
this array.
var array = [{"month":"january","url":1,"ip":12}, {"month":"february","url":102,"ip":200},{"month":"march","url":192}, {"month":"june","ip":10}];
is there possible way pass these array x axis , y axis values in line chart?.
i have tried this.
function() { var array = [{"month":"january","md5":1,"ip":12}, {"month":"february","url":102,"ip":200},{"month":"march","url":192}, {"month":"june","ip":10}]; var data=[], data2=[]; <div id="chart"> <svg></svg> </div> (var = 0; < array.length; i++) { data.push({x: array[i].url, y: array[i].month}) data2.push({x: array[i].ip, y: array[i].month}); } return [ { values: data, key: 'url', color: '#ff7f0e' }, { values: data2, key: 'ip', color: '#ff7f0e' } ]; } nv.addgraph(function() { var chart = nv.models.linechart() .useinteractiveguideline(true) ; chart.xaxis .axislabel('time (ms)') .tickformat(d3.format(',r')) ; chart.yaxis .axislabel('voltage (v)') .tickformat(d3.format('.02f')) ; d3.select('#chart svg') .datum(data()) .transition().duration(500) .call(chart) ; nv.utils.windowresize(chart.update); return chart; });
i not able pass x axis values array. there possiblw way pass these array line chart of nvd3?
for future questions, please include jsfiddle link. code provided not valid javascript , makes more work other people answer.
i think trying achieve: http://jsfiddle.net/992gdb83/1/
things need do:
a. you're using ordinal scale (months), therefore follow approach here: https://github.com/novus/nvd3/issues/29
var months = ["january", "february", "march", "april"]; chart.xaxis.axislabel("time (ms)").tickformat(function(index) { return months[index]; }); chart.x(function(d, i) { return i; });
b. you're missing data url/ip @ time points.
c. should use .x/.y accessor functions
d. code formatted poorly. use https://prettier.io/playground/
Comments
Post a Comment