Multi-Series Line chart
by Kamal Kumawat
HTML
<link rel="stylesheet" href="https://zinoui.com/1.5/themes/silver/zino.core.css">
<link rel="stylesheet" href="https://zinoui.com/1.5/themes/silver/zino.chart.css">
<script src="https://zinoui.com/1.5/compiled/zino.svg.min.js"></script>
<script src="https://zinoui.com/1.5/compiled/zino.chart.min.js"></script>
<div id="chart"></div>
JavaScript
$("#chart").zinoChart({
type: "line",
width: 530,
height: 320,
tooltip: false,
legend: false,
categories: [{
'category': [{
'label': '0'
}, {
'label': '2'
}, {
'label': '4'
}, {
'label': '6'
}, {
'label': '8'
}]
}],
series: [{
'label': '240',
'color': 'red',
'data': [{
'value': 0.006
}, {
'value': 0.0063
}, {
'value': 0.007
}, {
'value': 0.0079
}, {
'value': 0.0087
}]
}, {
/* OutputNode 240p 360p 480p 720p
0 0.006 0.0043 0.003 0.0035
2 0.0063 0.0056 0.0047
4 0.007 0.0068 0.0063
6 0.0079 0.008 0.0079
8 0.0087 0.0092 0.0095
1 0.0058 */
/* OutputNode 240p
0 0.0106
2 0.0077
4 0.0087
6 0.0095
8 0.0104 */
'label': '250-5 epoch',
'color': 'blue',
'data': [{
'value': 0.0106
}, {
'value': 0.0077
}, {
'value': 0.0087
}, {
'value': 0.0095
}, {
'value': 0.0104
}]
}
, {
'label': '360',
'color': 'orange',
'data': [{
'value': 0.0043
}, {
'value': 0.0056
}, {
'value': 0.0068
}, {
'value': 0.008
}, {
'value': 0.0092
}]
}
, {
'label': '480',
'color': 'green',
'data': [{
'value': 0.003
}, {
'value': 0.0047
}, {
'value': 0.0063
}, {
'value': 0.0079
}, {
'value': 0.0095
}]
}
]
});