angularjs - How to draw a nvd3 line chart inside an angular directive -
how draw line chart using nvd3 angular directives.
i've followed url.
to data,i'm unable draw graph.do need change code on here.
can please me out regarding issue ...
myscope:
$scope.data = [{ "x": "2015-10-01", "y": "244" }, { "x": "2015-07-01", "y": "0" }, { "x": "2015-06-01", "y": "117" }, { "x": "2015-05-01", "y": "5353" }, { "x": "2015-04-01", "y": "11159" }, { "x": "2015-03-01", "y": "7511" }, { "x": "2015-02-01", "y": "6906" }, { "x": "2015-01-01", "y": "10816" }, { "x": "2014-12-01", "y": "3481" }, { "x": "2014-11-01", "y": "1619" }, { "x": "2014-10-01", "y": "4084" }, { "x": "2014-09-01", "y": "1114" }]; $scope.options = { chart: { type: 'linechart', height: 450, margin: { top: 20, right: 20, bottom: 40, left: 55 }, x: function (d) { return d.x; }, y: function (d) { return d.y; }, useinteractiveguideline: true, xscale: d3.time.scale(), "xaxis": { "axislabel": "months (ms)" }, "yaxis": { "axislabel": "ww (v)", "axislabeldistance": -10 } xaxis: { axislabel: 'months', ticks: d3.time.months, tickformat: function (d) { return d3.time.format('%y %b')(new date(d)); } }, yaxis: { axislabel: 'ww', tickformat: function (d) { if (d == null) { return 0; } return d3.format('.02f')(d); }, axislabeldistance: 30 } } };
my html:
<nvd3 options="options" data="data"></nvd3>
the question not clear i’ll try you
- if want use angular nd3.js more easy find module https://github.com/krispo/angular-nvd3
if know , want create chart looks link in question can use
angular-nvd3
module (yeah link above)the directive<nvd3 options="options" data="data"></nvd3>
you can see plunker http://plnkr.co/edit/lbkfld?p=preview has chart want angular , nvd3.js have change options , data fill needs (the plunker module) hope helps.
Comments
Post a Comment