Having trouble with rendering the piechart using nvd3.js in Ionic 1.0.1 Any Help will be appreciated
**IONIC PAGE CODE **
<ion-view class="layouts-view">
<!-- <ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
-->
<ion-nav-back-button >
<i class="ion-arrow-left-c"></i> Back
</ion-nav-back-button>
<ion-nav-title>
<span>Report Charts</span>
</ion-nav-title>
<ion-content>
<div class="item item-divider">
Pie chart 2 - interactive
</div>
<div class="item item-text-wrap" >
<nvd3 options="vm.options" data="vm.data3" config="config" ></nvd3>
</div>
</ion-content>
- CONTROLLER -
$scope.vm = {};
$scope.vm.data3 = [
{
key: "One",
y: 5
},
{
key: "Two",
y: 2
},
{
key: "Three",
y: 9
},
{
key: "Four",
y: 7
},
{
key: "Five",
y: 4
},
{
key: "Six",
y: 3
},
{
key: "Seven",
y: 5
}
];
$scope.vm.options = {
chart: {
type: 'pieChart',
height: 500,
x: function(d){return d.key;},
y: function(d){return d.y;},
showLabels: true,
duration: 500,
labelThreshold: 0.01,
labelSunbeamLayout: true,
legend: {
margin: {
top: 5,
right: 35,
bottom: 5,
left: 0
}
}
}
};
My system information: Cordova CLI: 6.1.1 Gulp version: CLI version 3.9.1 Gulp local: Local version 3.9.1 Ionic Framework Version: 1.0.1 Ionic CLI Version: 2.1.1 Ionic App Lib Version: 2.1.1 OS: Distributor ID: SUSE LINUX Description: openSUSE Leap 42.1 (x86_64) Node Version: v0.12.7