Fix Loading new data pie chart

When loading new data (context) the old pie chart should not not be overwritten but updated with the new information.

Author: Andries-Smit

src/ChartJS/widgets/PieChart/widget/PieChart.js

@@ -91,76 +91,85 @@ define([
 
         _createChart : function (data) {
             logger.debug(this.id + "._createChart");
-            this._chart = new this._chartJS(this._ctx, {
-                type: "pie",
-                data:  this._createDataSets(data),
-                options: {
-                    title: {
-                        display: (this.chartTitle !== "") ? true : false,
-                        text: (this.chartTitle !== "") ? this.chartTitle : "",
-                        fontFamily: this._font,
-                        fontSize: this.titleSize
-                    },
-
-                    responsive : this.responsive,
-                    responsiveAnimationDuration : (this.responsiveAnimationDuration > 0 ? this.responsiveAnimationDuration : 0),
-                    tooltips : {
-                        enabled : this.showTooltips
-                    },
-                    legend: {
-                        display: this.showLegend,
-                        labels : { fontFamily : this._font }
-                    },
-
-                    //Boolean - Whether we should show a stroke on each segment
-                    segmentShowStroke : this.segmentShowStroke,
-
-                    //String - The colour of each segment stroke
-                    segmentStrokeColor : this.segmentStrokeColor,
-
-                    //Number - The width of each segment stroke
-                    segmentStrokeWidth : this.segmentStrokeWidth,
-
-                    //Number - Amount of animation steps
-                    animationSteps : this.animationSteps,
-
-                    //String - Animation easing effect
-                    animationEasing : this.animationEasing,
-
-                    //Boolean - Whether we animate the rotation of the Doughnut
-                    animateRotate : this.animateRotate,
-
-                    //Boolean - Whether we animate scaling the Doughnut from the centre
-                    animateScale : this.animateScale,
-
-                    legendCallback : this._legendAlternateCallback,
-
-                    // Show tooltips at all
-                    showTooltips : this.showTooltips,
-
-                    // maintainAspectRatio
-                    maintainAspectRatio : this.maintainAspectRatio,
-
+            if (this._chart) {
+                var set = this._createDataSets(data);
+                this._chart.stop();
+                this._chart.data.datasets = set.datasets;
+                this._chart.data.labels = set.labels;
+                this._chart.update(1000);
+                this._chart.bindEvents(); // tooltips otherwise won't work
+            } else {
+                var chartOptions = {
+                    type: "pie",
+                    data:  this._createDataSets(data),
+                    options: {
+                        title: {
+                            display: (this.chartTitle !== "") ? true : false,
+                            text: (this.chartTitle !== "") ? this.chartTitle : "",
+                            fontFamily: this._font,
+                            fontSize: this.titleSize
+                        },
+
+                        responsive : this.responsive,
+                        responsiveAnimationDuration : (this.responsiveAnimationDuration > 0 ? this.responsiveAnimationDuration : 0),
+                        tooltips : {
+                            enabled : this.showTooltips
+                        },
+                        legend: {
+                            display: this.showLegend,
+                            labels : { fontFamily : this._font }
+                        },
+
+                        //Boolean - Whether we should show a stroke on each segment
+                        segmentShowStroke : this.segmentShowStroke,
+
+                        //String - The colour of each segment stroke
+                        segmentStrokeColor : this.segmentStrokeColor,
+
+                        //Number - The width of each segment stroke
+                        segmentStrokeWidth : this.segmentStrokeWidth,
+
+                        //Number - Amount of animation steps
+                        animationSteps : this.animationSteps,
+
+                        //String - Animation easing effect
+                        animationEasing : this.animationEasing,
+
+                        //Boolean - Whether we animate the rotation of the Doughnut
+                        animateRotate : this.animateRotate,
+
+                        //Boolean - Whether we animate scaling the Doughnut from the centre
+                        animateScale : this.animateScale,
+
+                        legendCallback : this._legendAlternateCallback,
+
+                        // Show tooltips at all
+                        showTooltips : this.showTooltips,
+
+                        // maintainAspectRatio
+                        maintainAspectRatio : this.maintainAspectRatio,
+
+
+                        //cutOut of pie
+                        cutoutPercentage : 0, //always zero for Pie chart
+
+                        // Custom tooltip?
+                        customTooltips : false //lang.hitch(this, this.customTooltip)
+
+                    }
+                };
+                this._chart = new this._chartJS(this._ctx, chartOptions);
 
-                    //cutOut of pie
-                    cutoutPercentage : 0, //always zero for Pie chart
+                // Set the con
+                html.set(this._numberNode, this._data.object.get(this.numberInside));
 
-                    // Custom tooltip?
-                    customTooltips : false //lang.hitch(this, this.customTooltip)
+                // Add class to determain chart type
+                this._addChartClass("chartjs-pie-chart");
 
+                if (this.onclickmf) {
+                    on(this._chart.chart.canvas, "click", lang.hitch(this, this._onClickChart));
                 }
-            });
-
-            // Set the con
-            html.set(this._numberNode, this._data.object.get(this.numberInside));
-
-            // Add class to determain chart type
-            this._addChartClass("chartjs-pie-chart");
-
-            if (this.onclickmf) {
-                on(this._chart.chart.canvas, "click", lang.hitch(this, this._onClickChart));
             }
-
         }
     });
 });