1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
|
<html>
<head>
<link href="/css/c3.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="chart"></div>
<script src="http://d3js.org/d3.v3.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>
|
