CODEWITHSUNDEEP
angularjsnvd3.js
Union find
Union find

Reputation: 8160

Using NVD3 Angular and angular ng-repeat for data

Is it possible to load the data into my chart inside an ng-repeat? I've been unsuccessful at implementation.

For example using:

<div id="appbottom" ng-repeat="chartdata in crunch.Sectors | filter:query">     
    <nvd3-scatter-chart
            data={{chartdata}}
            id="exampleId"
            width="570"
            height="510"
            yAxisTickFormat="yAxisTickFormatFunction()"
            xAxisTickFormat="xAxisTickFormatFunction()"
            interactive="true"
            fisheye="100"
            margin="{left:80,top:40,bottom:50,right:50}"
             >
            <svg></svg>
    </nvd3-scatter-chart>

Upvotes: 1

Views: 1332

Answers (1)

krispo
krispo

Reputation: 526

You can do it quite easily using angular-nvd3 directive:

//html
<div ng-repeat="data in dataset">
    <nvd3 options="options" data="data"></nvd3>
</div>

and in controller just set chart options and specific data for each chart:

//javascript
$scope.options = { /*chart options*/ }
$scope.dataset = {
    data1: generateData(4,40),
    data2: generateData(4,40),
    data3: generateData(4,40),
    data4: generateData(4,40)
} //just an example

See live example.

Upvotes: 3

Related Questions