|
|
|
|
<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: {
|
|
|
|
|
json: {
|
|
|
|
|
data1: [30, 20, 50, 40, 60, 50],
|
|
|
|
|
data2: [200, 130, 90, 240, 130, 220],
|
|
|
|
|
data3: [300, 200, 160, 400, 250, 250]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
setTimeout(function () {
|
|
|
|
|
chart = c3.generate({
|
|
|
|
|
data: {
|
|
|
|
|
json: [{
|
|
|
|
|
"date": "2014-06-03",
|
|
|
|
|
"443": "3000",
|
|
|
|
|
"995": "500"
|
|
|
|
|
}, {
|
|
|
|
|
"date": "2014-06-04",
|
|
|
|
|
"443": "1000",
|
|
|
|
|
}, {
|
|
|
|
|
"date": "2014-06-05",
|
|
|
|
|
"443": "5000",
|
|
|
|
|
"995": "1000"
|
|
|
|
|
}],
|
|
|
|
|
keys: {
|
|
|
|
|
x: 'date',
|
|
|
|
|
value: [ "443", "995" ]
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
axis: {
|
|
|
|
|
x: {
|
|
|
|
|
type: "category"
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}, 1000);
|
|
|
|
|
|
|
|
|
|
setTimeout(function () {
|
|
|
|
|
chart = c3.generate({
|
|
|
|
|
data: {
|
|
|
|
|
// x: 'name',
|
|
|
|
|
json: [
|
|
|
|
|
{ id: 1, name: 'abc', visits: 200 },
|
|
|
|
|
{ id: 2, name: 'efg', visits: 400 },
|
|
|
|
|
{ id: 3, name: 'pqr', visits: 150 },
|
|
|
|
|
{ id: 4, name: 'xyz', visits: 420 },
|
|
|
|
|
],
|
|
|
|
|
keys: {
|
|
|
|
|
x: 'name',
|
|
|
|
|
value: ['visits'],
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
axis: {
|
|
|
|
|
x: {
|
|
|
|
|
type: 'categorized'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}, 2000);
|
|
|
|
|
|
|
|
|
|
setTimeout(function () {
|
|
|
|
|
chart.load({
|
|
|
|
|
json: [
|
|
|
|
|
{ id: 1, name: 'abc', visits: 1200 },
|
|
|
|
|
{ id: 2, name: 'efg', visits: 900 },
|
|
|
|
|
{ id: 3, name: 'pqr', visits: 1150 },
|
|
|
|
|
{ id: 4, name: 'xyz', visits: 1020 },
|
|
|
|
|
],
|
|
|
|
|
keys: {
|
|
|
|
|
x: 'name',
|
|
|
|
|
value: ['visits'],
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}, 3000);
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
