|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<link href="/css/c3.css" rel="stylesheet" type="text/css">
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div id="chart"></div>
|
|
|
|
|
|
|
|
|
|
<script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
|
|
|
|
|
<script src="/js/c3.js"></script>
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
var chart = c3.generate({
|
|
|
|
|
data: {
|
|
|
|
|
url: '/data/c3_test.csv'
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
setTimeout(function () {
|
|
|
|
|
chart.load({
|
|
|
|
|
url: '/data/c3_test2.csv',
|
|
|
|
|
});
|
|
|
|
|
}, 1000);
|
|
|
|
|
|
|
|
|
|
setTimeout(function () {
|
|
|
|
|
chart.load({
|
|
|
|
|
url: '/data/c3_test.tsv',
|
|
|
|
|
mimeType: 'tsv'
|
|
|
|
|
});
|
|
|
|
|
}, 2000);
|
|
|
|
|
|
|
|
|
|
setTimeout(function () {
|
|
|
|
|
chart = c3.generate({
|
|
|
|
|
data: {
|
|
|
|
|
url: '/data/c3_test.json',
|
|
|
|
|
mimeType: 'json'
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}, 3000);
|
|
|
|
|
|
|
|
|
|
setTimeout(function () {
|
|
|
|
|
chart.load({
|
|
|
|
|
url: '/data/c3_test_2.json',
|
|
|
|
|
mimeType: 'json'
|
|
|
|
|
});
|
|
|
|
|
}, 4000);
|
|
|
|
|
|
|
|
|
|
setTimeout(function () {
|
|
|
|
|
chart.load({
|
|
|
|
|
url: '/data/c3_test_3.json',
|
|
|
|
|
mimeType: 'json',
|
|
|
|
|
keys: {
|
|
|
|
|
value: ['data1', 'data2']
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}, 5000);
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
