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

  1. if want use angular nd3.js more easy find module https://github.com/krispo/angular-nvd3
  2. 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

Popular posts from this blog

javascript - jQuery: Add class depending on URL in the best way -

caching - How to check if a url path exists in the service worker cache -

Redirect to a HTTPS version using .htaccess -