| 23 |
liveuser |
1 |
# amCharts Animate
|
|
|
2 |
|
|
|
3 |
Version: 1.0.0
|
|
|
4 |
|
|
|
5 |
|
|
|
6 |
## Description
|
|
|
7 |
|
|
|
8 |
Smoothly animates the `dataProvider`
|
|
|
9 |
|
|
|
10 |
It works with serial, pie, funnel, and radar.
|
|
|
11 |
|
|
|
12 |
Here are some examples:
|
|
|
13 |
|
|
|
14 |
[Serial chart (line)](http://codepen.io/team/amcharts/pen/64673d1369cc47c0e6a970b071bafd03)
|
|
|
15 |
|
|
|
16 |
[Serial chart (column)](http://codepen.io/team/amcharts/pen/a5322d071a194d5975a4c68309724324)
|
|
|
17 |
|
|
|
18 |
[Pie chart](http://codepen.io/team/amcharts/pen/3ff9b206ce37111fa508156df38504bc)
|
|
|
19 |
|
|
|
20 |
[Funnel chart](http://codepen.io/team/amcharts/pen/8fd8d025730b01939a2eb56b908488df)
|
|
|
21 |
|
|
|
22 |
[Radar chart](http://codepen.io/team/amcharts/pen/6ffb5e356b6015a6dcb6019d7b14d3f6)
|
|
|
23 |
|
|
|
24 |
|
|
|
25 |
## Installation
|
|
|
26 |
|
|
|
27 |
Include `animate.min.js` on your web page:
|
|
|
28 |
|
|
|
29 |
```
|
|
|
30 |
<script src="//www.amcharts.com/lib/3/plugins/animate/animate.min.js"></script>
|
|
|
31 |
```
|
|
|
32 |
|
|
|
33 |
## Usage
|
|
|
34 |
|
|
|
35 |
Rather than using `chart.validateData`, instead use `chart.animateData`:
|
|
|
36 |
|
|
|
37 |
```
|
|
|
38 |
chart.animateData(newData, { duration: 1000 });
|
|
|
39 |
```
|
|
|
40 |
|
|
|
41 |
It will now smoothly animate from the old data to the new data.
|
|
|
42 |
|
|
|
43 |
----
|
|
|
44 |
|
|
|
45 |
The first argument is the new `dataProvider` for the chart.
|
|
|
46 |
|
|
|
47 |
The second argument is an object that can contain the following options:
|
|
|
48 |
|
|
|
49 |
* `duration` is required: it is the number of milliseconds that the animation should play for.
|
|
|
50 |
|
|
|
51 |
* `complete` is optional: it is a function that is called when the animation completes.
|
|
|
52 |
|
|
|
53 |
----
|
|
|
54 |
|
|
|
55 |
The new `dataProvider` must be different from the old `dataProvider`
|
|
|
56 |
|
|
|
57 |
If you want to modify the existing `dataProvider`, you must create a deep copy:
|
|
|
58 |
|
|
|
59 |
```
|
|
|
60 |
// Creates a deep copy of the old dataProvider
|
|
|
61 |
var newDataProvider = JSON.parse(JSON.stringify(chart.dataProvider));
|
|
|
62 |
|
|
|
63 |
// Adds new data to the new dataProvider
|
|
|
64 |
newDataProvider.push({ category: "foo", value: 10 });
|
|
|
65 |
|
|
|
66 |
// Mutates the data in the new dataProvider
|
|
|
67 |
newDataProvider[0].value = 50;
|
|
|
68 |
|
|
|
69 |
// Animates with the new dataProvider
|
|
|
70 |
chart.animateData(newDataProvider, { duration: 1000 });
|
|
|
71 |
```
|
|
|
72 |
|
|
|
73 |
|
|
|
74 |
## License
|
|
|
75 |
|
|
|
76 |
All software included in this collection is licensed under Apache License 2.0.
|
|
|
77 |
|
|
|
78 |
This basically means you're free to use or modify it, even make your own
|
|
|
79 |
versions or completely different products out of them.
|
|
|
80 |
|
|
|
81 |
Please see attached file "license.txt" for the complete license or online here:
|
|
|
82 |
|
|
|
83 |
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
84 |
|
|
|
85 |
|
|
|
86 |
## Contact us
|
|
|
87 |
|
|
|
88 |
* Email: contact@amcharts.com
|
|
|
89 |
* Web: http://www.amcharts.com/
|
|
|
90 |
* Facebook: https://www.facebook.com/amcharts
|
|
|
91 |
* Twitter: https://twitter.com/amcharts
|
|
|
92 |
|
|
|
93 |
|
|
|
94 |
## Changelog
|
|
|
95 |
|
|
|
96 |
### 1.0.0
|
|
|
97 |
* Initial release
|