multiple line graph animation
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://rawgit.com/flot/flot/master/jquery.flot.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">
JavaScript
var datasets = [{
"label": "IT",
"idx": 0,
"data": [
[1543770632000, 27],
[1543778111000, 27],
[1543785586000, 27],
[1543793068000, 27],
[1543800538000, 27],
[1543808012000, 27]
]
}, {
"label": "Network",
"idx": 1,
"data": [{
"0": 1433156400000,
"1": "27"
}, {
"0": 1435748400000,
"1": "25"
}, {
"0": 1438426800000,
"1": "26"
}, {
"0": 1441105200000,
"1": "27"
}, {
"0": 1443697200000,
"1": "27"
}, {
"0": 1446379200000,
"1": "27"
}, {
"0": 1448971200000,
"1": "27"
}, {
"0": 1451649600000,
"1": "27"
}]
}
/*, {
"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, null],
[1446379200000, null],
[1448971200000, null],
[1451649600000, null]
]
}*/
];
var options = {
"series": {
"lines": {
"show": true
},
points: {
show: true
},
"curvedLines": {
"active": true
}
},
"xaxis": {
"mode": "time",
"timeformat": "%H:%M",
"tickSize": [2, "hour"],
"twelveHourClock": true,
"min": 1390780800000,
"max":...