From: etimberg <evert.timberg@gmail.com>
Date: Sun, 23 Apr 2017 23:53:31 +0000 (-0400)
Subject: initial data update docs
X-Git-Tag: v2.6.0~2^2~10
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=d7335bf1eeec93092b5141dbfc64ca69cdda3e90;p=thirdparty%2FChart.js.git

initial data update docs
---

diff --git a/docs/SUMMARY.md b/docs/SUMMARY.md
index d7950fed9..5ec896e40 100644
--- a/docs/SUMMARY.md
+++ b/docs/SUMMARY.md
@@ -40,6 +40,7 @@
   * [Styling](axes/styling.md)
 * [Developers](developers/README.md)
   * [Chart.js API](developers/api.md)
+  * [Updating Charts](developers/updates.md)
   * [Plugins](developers/plugins.md)
   * [New Charts](developers/charts.md)
   * [New Axes](developers/axes.md)
diff --git a/docs/developers/api.md b/docs/developers/api.md
index 03dbe797f..714cb580a 100644
--- a/docs/developers/api.md
+++ b/docs/developers/api.md
@@ -30,6 +30,8 @@ myLineChart.update(); // Calling update now animates the position of March from
 
 > **Note:** replacing the data reference (e.g. `myLineChart.data = {datasets: [...]}` only works starting **version 2.6**. Prior that, replacing the entire data object could be achieved with the following workaround: `myLineChart.config.data = {datasets: [...]}`.
 
+See [Updating Charts](updates.md) for more details.
+
 ## .reset()
 
 Reset the chart to it's state before the initial animation. A new animation can then be triggered using `update`.
diff --git a/docs/developers/updates.md b/docs/developers/updates.md
new file mode 100644
index 000000000..06550ce0c
--- /dev/null
+++ b/docs/developers/updates.md
@@ -0,0 +1,31 @@
+# Updating Charts
+
+It's pretty common to want to update charts after they've been created. When the chart data is changed, Chart.js will animate to the new data values. 
+
+## Adding or Removing Data
+
+Adding and removing data is supported by changing the data array. To add data, just add data into the data array as seen in this example.
+
+```javascript
+function addData(chart, label, data) {
+    chart.data.labels.push(label);
+    chart.data.datasets.forEach((dataset) => {
+        dataset.data.push(data);
+    });
+    chart.update();
+}
+```
+
+```javascript
+function removeData(chart) {
+    chart.data.labels.pop();
+    chart.data.datasets.forEach((dataset) => {
+        dataset.data.pop();
+    });
+    chart.update();
+}
+```
+
+## Preventing Animations
+
+Sometimes when a chart updates, you may not want an animation. To achieve this you can call `update` with a duration of `0`. This will render the chart synchronously and without an animation.
\ No newline at end of file