added a data reload example for charts

bragayann · bragayann · commit ca6eeef5f732 · 2017-02-20T11:35:17.000-03:00
diff --git a/src/pages/miscellaneous/charts/charts.html b/src/pages/miscellaneous/charts/charts.html
@@ -7,6 +7,15 @@
 </ion-header>
 <ion-content>
   <ion-card>
+    <button ion-button (click)="updateData()">Update Pie Chart Data</button>
+    <ion-card>
+      <ion-card-header>
+        Pie Chart
+      </ion-card-header>
+      <ion-card-content>
+        <canvas #pieCanvas></canvas>
+      </ion-card-content>
+    </ion-card>
     <ion-card-header>
       Bar Chart
     </ion-card-header>
@@ -46,14 +55,6 @@
       <canvas #polarCanvas></canvas>
     </ion-card-content>
   </ion-card>
-  <ion-card>
-    <ion-card-header>
-      Pie Chart
-    </ion-card-header>
-    <ion-card-content>
-      <canvas #pieCanvas></canvas>
-    </ion-card-content>
-  </ion-card>
   <ion-card>
     <ion-card-header>
       Bubble Chart
@@ -70,4 +71,4 @@
       <canvas #mixedCanvas></canvas>
     </ion-card-content>
   </ion-card>
-</ion-content>
+</ion-content>
diff --git a/src/pages/miscellaneous/charts/charts.ts b/src/pages/miscellaneous/charts/charts.ts
@@ -32,10 +32,18 @@ export class ChartsPage {
     this.doughnutChart = this.getDoughnutChart();
     this.lineChart = this.getLineChart();
     this.radarChart = this.getRadarChart();
-    this.pieChart = this.getPieChart();
+
     this.polarAreaChart = this.getPolarAreaChart();
     this.bubbleChart = this.getBubbleChart();
     this.mixedChart = this.getMixedChart();
+    this.pieChart = this.getPieChart();
+  }
+
+  updateData() {
+    // After instantiating your chart, its data is accessible and can be changed anytime with the function update().
+    // It takes care of everything and even redraws the animations :D
+    this.pieChart.data.datasets[0].data = [Math.random() * 1000, Math.random() * 1000, Math.random() * 1000];
+    this.pieChart.update();
   }
 
   getChart(context, chartType, data, options?) {
