Quite good looking graph derived from d3.js http://c3js.org
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

131 lines
2.8 KiB

<html>
<head>
<link href="../css/c3.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="chart"></div>
<script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script>
<script src="../js/c3.js"></script>
<script>
var chart = c3.generate({
data: {
url: '/data/c3_test.csv',
labels: true,
filter: function (t) {
return t.id !== 'data1';
}
},
subchart: {
show: true
},
zoom: {
enabled: true
},
transition: {
duration: 500
}
});
var queue = [
function () {
chart.load({
url: '/data/c3_test2.csv',
filter: function (t) {
return t.id !== 'data1';
}
});
},
function () {
chart.load({
rows: [
['data4', 'data5', 'data6'],
[90, 120, 300],
[40, 160, 240],
[50, 200, 290],
[120, 160, 230],
[80, 130, 300],
[90, 220, 320],
[1090, 1220, 1320],
]
});
},
function () {
chart.unload({
ids: ['data4', 'data5']
});
},
function () {
chart.unload({
ids: 'data6'
});
},
function () {
chart.load({
columns:[
['data1', 30, 20, 50, 40, 60, 50, 100, 200],
['data7', 230, 220, 250, 240, 260, 250, 300, 400]
]
});
},
function () {
chart.load({
json: {
data1: [1030, 1020, 1050, 1040, 1060, 1050, 1100, 1200],
data7: [430, 420, 450, 440, 460, 550, 400, 200]
}
});
},
function () {
chart.load({
columns: [
['data8', 30, 20, 50, 40, 60, 50],
],
unload: true,
});
},
function () {
chart.load({
columns: [
['data9', 130, 120, 150, 140, 160, 150],
],
unload: ['data7', 'data8'],
});
},
function () {
chart.load({
unload: ['data1', 'data2'],
});
},
function () {
chart.unload();
},
function () {
chart.load({
rows: [
['data1', 'data2', 'data3'],
[90, 120, 300],
[40, 160, 240],
[50, 200, 290],
[120, 160, 230],
[80, 130, 300],
[90, 220, 320],
]
});
},
function () {
chart.unload({
ids: ['data2', 'data3']
});
},
];
var i = 0;
queue.forEach(function (f) {
setTimeout(f, 1500 * i++);
});
</script>
</body>
</html>