Fix #73 Chart Animation Rendering stucks

Author: Jelte Lagendijk

src/ChartJS/widgets/BarChart/BarChart.xml

@@ -47,6 +47,11 @@
             <category>Appearance</category>
             <description>Animation duration (milliseconds) for responsive resizing. (Note: When implementing multiple charts, there can be problems with rendering. You can set this to 0 when having problems)</description>
         </property>
+        <property key="chartAnimation" type="boolean" required="true" defaultValue="true">
+            <caption>Animation</caption>
+            <category>Appearance</category>
+            <description>Switch animation on and off. Try to switch it off when you have rendering problems with multiple charts on a page</description>
+        </property>
         <!-- Data Source -->
         <property key="sourceentity" type="entity" required="true" allowNonPersistableEntities="true">
             <caption>Chart Entity</caption>

src/ChartJS/widgets/Core.js

@@ -71,13 +71,20 @@ define([
             // Activate chartJS.
             this._chartJS = _charts.noConflict();
 
+            console.log(this._chartJS);
+
             // Fonts
             this._font = this.labelFont || "Helvetica Neue";
 
             // Hack to fix the tooltip event, also added "mouseover"
             this._chartJS.defaults.global.tooltipEvents = ["mouseover", "mouseup", "mousedown", "mousemove", "touchstart", "touchmove", "mouseout"];
             this._chartJS.defaults.global.tooltipXOffset = 0;
 
+            if (!this.chartAnimation) {
+                this._chartJS.defaults.global.animation.duration = 0;
+            }
+
+
             // Set object , dataset and datapoint.
             this._dataset = this.datasetentity.split("/")[0];
             this._datapoint = this.datapointentity && this.datapointentity.split("/")[0];
@@ -136,7 +143,7 @@ define([
                     guid: this._mxObj.getGuid(),
                     callback: lang.hitch(this, this._loadData)
                 });
-    
+
                 // Load data again.
                 this._loadData();
                 domStyle.set(this.domNode, "display", "");

src/ChartJS/widgets/DoughnutChart/DoughnutChart.xml

@@ -37,6 +37,11 @@
                 <category>Appearance</category>
                 <description>Animation duration (milliseconds) for responsive resizing. (Note: When implementing multiple charts, there can be problems with rendering. You can set this to 0 when having problems)</description>
             </property>
+            <property key="chartAnimation" type="boolean" required="true" defaultValue="true">
+                <caption>Animation</caption>
+                <category>Appearance</category>
+                <description>Switch animation on and off. Try to switch it off when you have rendering problems with multiple charts on a page</description>
+            </property>
             <!-- Data Source -->
             <property key="sourceentity" type="entity" required="true" allowNonPersistableEntities="true">
                 <caption>Chart Entity</caption>

src/ChartJS/widgets/LineChart/LineChart.xml

@@ -54,6 +54,11 @@
             <category>Appearance</category>
             <description>Animation duration (milliseconds) for responsive resizing. (Note: When implementing multiple charts, there can be problems with rendering. You can set this to 0 when having problems)</description>
         </property>
+        <property key="chartAnimation" type="boolean" required="true" defaultValue="true">
+            <caption>Animation</caption>
+            <category>Appearance</category>
+            <description>Switch animation on and off. Try to switch it off when you have rendering problems with multiple charts on a page</description>
+        </property>
         <!-- Data Source -->
         <property key="sourceentity" type="entity" required="true" allowNonPersistableEntities="true">
             <caption>Chart Entity</caption>

src/ChartJS/widgets/PieChart/PieChart.xml

@@ -40,6 +40,11 @@
             <category>Appearance</category>
             <description>Animation duration (milliseconds) for responsive resizing. (Note: When implementing multiple charts, there can be problems with rendering. You can set this to 0 when having problems)</description>
         </property>
+        <property key="chartAnimation" type="boolean" required="true" defaultValue="true">
+            <caption>Animation</caption>
+            <category>Appearance</category>
+            <description>Switch animation on and off. Try to switch it off when you have rendering problems with multiple charts on a page</description>
+        </property>
         <!-- Data Source -->
         <property key="sourceentity" type="entity" required="true" allowNonPersistableEntities="true">
             <caption>Chart Entity</caption>

src/ChartJS/widgets/PolarChart/PolarChart.xml

@@ -36,6 +36,11 @@
                 <caption>Responsive animation duration</caption>
                 <category>Appearance</category>
                 <description>Animation duration (milliseconds) for responsive resizing. (Note: When implementing multiple charts, there can be problems with rendering. You can set this to 0 when having problems)</description>
+            </property>
+            <property key="chartAnimation" type="boolean" required="true" defaultValue="true">
+                <caption>Animation</caption>
+                <category>Appearance</category>
+                <description>Switch animation on and off. Try to switch it off when you have rendering problems with multiple charts on a page</description>
             </property>
 			<!-- Data Source -->
 			<property key="sourceentity" type="entity" required="true" allowNonPersistableEntities="true">

src/ChartJS/widgets/RadarChart/RadarChart.xml

@@ -37,6 +37,11 @@
             <category>Appearance</category>
             <description>Animation duration (milliseconds) for responsive resizing. (Note: When implementing multiple charts, there can be problems with rendering. You can set this to 0 when having problems)</description>
         </property>
+        <property key="chartAnimation" type="boolean" required="true" defaultValue="true">
+            <caption>Animation</caption>
+            <category>Appearance</category>
+            <description>Switch animation on and off. Try to switch it off when you have rendering problems with multiple charts on a page</description>
+        </property>
         <!-- Data Source -->
         <property key="sourceentity" type="entity" required="true" allowNonPersistableEntities="true">
             <caption>Chart Entity</caption>

src/ChartJS/widgets/StackedBarChart/StackedBarChart.xml

@@ -47,6 +47,11 @@
             <category>Appearance</category>
             <description>Animation duration (milliseconds) for responsive resizing. (Note: When implementing multiple charts, there can be problems with rendering. You can set this to 0 when having problems)</description>
         </property>
+        <property key="chartAnimation" type="boolean" required="true" defaultValue="true">
+            <caption>Animation</caption>
+            <category>Appearance</category>
+            <description>Switch animation on and off. Try to switch it off when you have rendering problems with multiple charts on a page</description>
+        </property>
         <!-- Data Source -->
 		<property key="sourceentity" type="entity" required="true" allowNonPersistableEntities="true">
 			<caption>Chart Entity</caption>