multiple line graph animation
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>
<script src="https://rawgit.com/MichaelZinsmaier/CurvedLines/master/curvedLines.js"></script>
<script src="https://rawgit.com/Codicode/flotanimator/master/jquery.flot.animator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.time.js"></script>
<div id="choices_CAGraph"></div>
<div id="CAGraph" style="width:650px;height:400px"></div>
JavaScript
var datasets = [{
"label": "IT",
"curvedLines": {
"apply": true
},
"animator": {
"start": 0,
"steps": 7,
"duration": 3000,
"direction": "right"
},
"idx": 0,
"data": [
[1433156400000, 95.07],
[1435748400000, 97.80],
[1438426800000, 96.72],
[1441105200000, 97.62],
[1443697200000, 097.68],
[1446379200000, 98.49],
[1448971200000, 98.59],
[1451649600000, 98.69]
]
}, {
"label": "Network",
"curvedLines": {
"apply": true
},
"animator": {
"start": 0,
"steps": 7,
"duration": 3000,
"direction": "right"
},
"idx": 1,
"data": [{
"0": 1433156400000,
"1": "095.07"
}, {
"0": 1435748400000,
"1": "097.80"
}, {
"0": 1438426800000,
"1": "096.72"
}, {
"0": 1441105200000,
"1": "097.62"
}, {
"0": 1443697200000,
"1": "097.68"
}, {
"0": 1446379200000,
"1": "098.49"
}, {
"0": 1448971200000,
"1": "098.59"
}, {
"0": 1451649600000,
"1": "098.69"
}]
}
/*, {
"label": "Success Rate",
"curvedLines": {
"apply": true
},
"animator": {
"start": 0,
"steps": 7,
"duration": 3000,
"direction": "right"
},
"idx": 2,
"data": [
[1433156400000, 98.58],
[1433156400000, null],
[1433156400000, 95.18],
[1433156400000, null],
[1435748400000, null],
[1438426800000, null],
[1441105200000, null],
[1443697200000,...