Merge pull request #38 from fusioncharts/feature/restructure-plugin

ashok1994 · web-flow · commit 4ad4296efbb1 · 2018-12-28T15:48:01.000+05:30
Feature/restructure plugin
diff --git a/example/index.html b/example/index.html
@@ -18,20 +18,24 @@
 
   <body>
     <div id="chart1">
-      <fusioncharts :options="options">
+      <fusioncharts
+        :width="width"
+        :height="height"
+        :type="pieType"
+        :dataFormat="dataFormat"
+        :dataSource="chartDs"
+      >
+        FusionCharts will render here...
+      </fusioncharts>
+      <fusioncharts
+        :width="width"
+        :height="height"
+        :type="type"
+        :dataFormat="dataFormat"
+        :dataSource="dataSource"
+      >
         FusionCharts will render here...
       </fusioncharts>
-      <div v-show="displayChart">
-        <fusioncharts
-          :width="width"
-          :height="height"
-          :type="type"
-          :dataFormat="dataFormat"
-          :dataSource="dataSource"
-        >
-          FusionCharts will render here...
-        </fusioncharts>
-      </div>
       <button @click="changeFirstChartAttr">Change 1st Chart Attributes</button>
       <button @click="changeSecondChartAttr">
         Change 2nd Chart Attributes
diff --git a/example/index.js b/example/index.js
@@ -58,6 +58,16 @@ var chart = new Vue({
         }
       ]
     },
+    pieType: 'Pie2D',
+    chartDs: {
+      chart: {
+        caption: 'Vue FusionCharts Sample',
+        theme: 'fint',
+        animation: '1',
+        updateanimduration: '100'
+      },
+      data: [{ value: 1.9 }, { value: 2.3 }, { value: 2.1 }]
+    },
     options: {
       width: '500',
       height: '300',
@@ -89,15 +99,14 @@ var chart = new Vue({
           }
         ]
       }
-    },
-    displayChart: false
+    }
   },
   methods: {
     changeFirstChartAttr: function() {
       // let dataSource = Object.assign({}, this.pieDataSource);
-      this.options.dataSource.chart.caption = 'Changed to something else';
-      // dataSource.data[2].value = this.getRandomNumber();
-      // dataSource.data[1].value = this.getRandomNumber();
+      this.chartDs.chart.caption = 'Changed to something else';
+      this.chartDs.data[2].value = this.getRandomNumber();
+      this.chartDs.data[1].value = this.getRandomNumber();
       // this.pieDataSource = dataSource;
     },
     changeSecondChartAttr: function() {
@@ -120,7 +129,6 @@ var chart = new Vue({
         schema
       );
       this.dataSource.data = fusionTable;
-      this.displayChart = true;
     });
   }
 });
diff --git a/src/vue-fusioncharts-component.js b/src/vue-fusioncharts-component.js
@@ -143,6 +143,24 @@ export default (FC, ...options) => {
           }
         },
         deep: true
+      },
+      'datasource.data': {
+        handler: function() {
+          this.chartObj.setChartData(
+            this.datasource || this.dataSource,
+            this.dataFormat || this.dataformat
+          );
+        },
+        deep: false
+      },
+      'dataSource.data': {
+        handler: function() {
+          this.chartObj.setChartData(
+            this.datasource || this.dataSource,
+            this.dataFormat || this.dataformat
+          );
+        },
+        deep: false
       }
     },
     deactivated: function() {
