Skip to content

C
c3-closed
Commit 32b6f93c authored by Masayuki Tanaka's avatar Masayuki Tanaka
Browse files
Options

Update samples

parent b4619dbf
Show whitespace changes
Inline Side-by-side
Showing with 155 additions and 307 deletions
htdocs/samples/simple_grid_x_lines.html → htdocs/samples/api_xgrid_lines.html
View file @ 32b6f93c
......@@ -6,7 +6,7 @@
<div id="chart"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.min.js"></script>
<script src="/js/c3.js"></script>
<script>
var chart = c3.generate({
bindto: '#chart',
......@@ -15,16 +15,48 @@
['sample', 30, 200, 100, 400, 150, 250]
]
},
axis: {
// rotated: true,
},
grid: {
x: {
lines: [{
value: 3,
text: '3',
class: 'lineFor3'
}]
// lines: [{value: 3, text:'Label 3'}, {value: 4.5, text: 'Label 4.5'}]
}
}
});
setTimeout(function () {
chart.xgrids([{value: 1, text:'Label 1'}, {value: 4, text: 'Label 4'}]);
}, 1000);
setTimeout(function () {
chart.xgrids([{value: 2, text:'Label 2'}]);
}, 2000);
setTimeout(function () {
chart.xgrids.add([{value: 3, text:'Label 3', class:'hoge'}]);
}, 3000);
setTimeout(function () {
chart.xgrids.remove({value:2});
}, 4000);
setTimeout(function () {
chart.xgrids.remove({class:'hoge'});
}, 5000);
setTimeout(function () {
chart.xgrids.remove([{value: 1}, {value: 4}]);
}, 6000);
setTimeout(function () {
chart.xgrids([{value: 1, text:'Label 1'}, {value: 4, text: 'Label 4'}]);
}, 7000);
setTimeout(function () {
chart.xgrids.remove();
}, 8000);
</script>
</body>
</html>
htdocs/samples/chart_area.html
View file @ 32b6f93c
......@@ -3,12 +3,15 @@
<link href="/css/c3.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="chart"></div>
<div id="chart1"></div>
<div id="chart2"></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({
var chart1 = c3.generate({
bindto: '#chart1',
data: {
columns: [
['data1', 300, 350, 300, 0, 0, 0],
......@@ -20,6 +23,21 @@
}
}
});
var chart2 = c3.generate({
bindto: '#chart2',
data: {
columns: [
['data1', -300, -350, -300, 0, 0, 0],
['data2', -130, -100, -140, -200, -150, -50]
],
types: {
data1: 'area',
data2: 'area-spline'
}
}
});
</script>
</body>
</html>
htdocs/samples/data_load.html
View file @ 32b6f93c
......@@ -23,7 +23,7 @@
enabled: true
},
transition: {
duration: 200
duration: 500
}
});
......
htdocs/samples/donut.html
View file @ 32b6f93c
......@@ -10,24 +10,15 @@
<script>
var chart = c3.generate({
data: {
xs: {
setosa: 'setosa_x',
versicolor: 'versicolor_x',
virginica: 'virginica_x'
},
columns: [
["setosa_x", 3.5, 3.0, 3.2, 3.1, 3.6, 3.9, 3.4, 3.4, 2.9, 3.1, 3.7, 3.4, 3.0, 3.0, 4.0, 4.4, 3.9, 3.5, 3.8, 3.8, 3.4, 3.7, 3.6, 3.3, 3.4, 3.0, 3.4, 3.5, 3.4, 3.2, 3.1, 3.4, 4.1, 4.2, 3.1, 3.2, 3.5, 3.6, 3.0, 3.4, 3.5, 2.3, 3.2, 3.5, 3.8, 3.0, 3.8, 3.2, 3.7, 3.3],
["versicolor_x", 3.2, 3.2, 3.1, 2.3, 2.8, 2.8, 3.3, 2.4, 2.9, 2.7, 2.0, 3.0, 2.2, 2.9, 2.9, 3.1, 3.0, 2.7, 2.2, 2.5, 3.2, 2.8, 2.5, 2.8, 2.9, 3.0, 2.8, 3.0, 2.9, 2.6, 2.4, 2.4, 2.7, 2.7, 3.0, 3.4, 3.1, 2.3, 3.0, 2.5, 2.6, 3.0, 2.6, 2.3, 2.7, 3.0, 2.9, 2.9, 2.5, 2.8],
["virginica_x", 3.3, 2.7, 3.0, 2.9, 3.0, 3.0, 2.5, 2.9, 2.5, 3.6, 3.2, 2.7, 3.0, 2.5, 2.8, 3.2, 3.0, 3.8, 2.6, 2.2, 3.2, 2.8, 2.8, 2.7, 3.3, 3.2, 2.8, 3.0, 2.8, 3.0, 2.8, 3.8, 2.8, 2.8, 2.6, 3.0, 3.4, 3.1, 3.0, 3.1, 3.1, 3.1, 2.7, 3.2, 3.3, 3.0, 2.5, 3.0, 3.4, 3.0],
["setosa", 0.2, 0.2, 0.2, 0.2, 0.2, 0.4, 0.3, 0.2, 0.2, 0.1, 0.2, 0.2, 0.1, 0.1, 0.2, 0.4, 0.4, 0.3, 0.3, 0.3, 0.2, 0.4, 0.2, 0.5, 0.2, 0.2, 0.4, 0.2, 0.2, 0.2, 0.2, 0.4, 0.1, 0.2, 0.2, 0.2, 0.2, 0.1, 0.2, 0.2, 0.3, 0.3, 0.2, 0.6, 0.4, 0.3, 0.2, 0.2, 0.2, 0.2],
// ["setosa", 0.2, 0.2, 0.2, 0.2, 0.2, 0.4, 0.3, 0.2, 0.2, 0.1, 0.2, 0.2, 0.1, 0.1, 0.2, 0.4, 0.4, 0.3, 0.3, 0.3, 0.2, 0.4, 0.2, 0.5, 0.2, 0.2, 0.4, 0.2, 0.2, 0.2, 0.2, 0.4, 0.1, 0.2, 0.2, 0.2, 0.2, 0.1, 0.2, 0.2, 0.3, 0.3, 0.2, 0.6, 0.4, 0.3, 0.2, 0.2, 0.2, 0.2],
["versicolor", 1.4, 1.5, 1.5, 1.3, 1.5, 1.3, 1.6, 1.0, 1.3, 1.4, 1.0, 1.5, 1.0, 1.4, 1.3, 1.4, 1.5, 1.0, 1.5, 1.1, 1.8, 1.3, 1.5, 1.2, 1.3, 1.4, 1.4, 1.7, 1.5, 1.0, 1.1, 1.0, 1.2, 1.6, 1.5, 1.6, 1.5, 1.3, 1.3, 1.3, 1.2, 1.4, 1.2, 1.0, 1.3, 1.2, 1.3, 1.3, 1.1, 1.3],
["virginica", 2.5, 1.9, 2.1, 1.8, 2.2, 2.1, 1.7, 1.8, 1.8, 2.5, 2.0, 1.9, 2.1, 2.0, 2.4, 2.3, 1.8, 2.2, 2.3, 1.5, 2.3, 2.0, 2.0, 1.8, 2.1, 1.8, 1.8, 1.8, 2.1, 1.6, 1.9, 2.0, 2.2, 1.5, 1.4, 2.3, 2.4, 1.8, 1.8, 2.1, 2.4, 2.3, 1.9, 2.3, 2.5, 2.3, 1.9, 2.0, 2.3, 1.8],
// ["setosa", 30],
["setosa", 30],
// ["versicolor", 40],
// ["virginica", 50],
],
type : 'donut',
// type : 'pie',
},
axis: {
x: {
......
htdocs/samples/grid_x_lines.html
View file @ 32b6f93c
......@@ -3,59 +3,55 @@
<link rel="stylesheet" type="text/css" href="/css/c3.css">
</head>
<body>
<div id="chart"></div>
<div id="chart1"></div>
<div id="chart2"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
<script src="/js/c3.min.js"></script>
<script>
var chart = c3.generate({
bindto: '#chart',
bindto: '#chart1',
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 250]
['data1', 30, 200, 100, 400, 150, 250]
]
},
axis: {
// rotated: true,
},
grid: {
x: {
// lines: [{value: 3, text:'Label 3'}, {value: 4.5, text: 'Label 4.5'}]
lines: [{
value: 2,
text: 'Label 2',
class: 'lineFor2'
}]
}
}
});
setTimeout(function () {
chart.xgrids([{value: 1, text:'Label 1'}, {value: 4, text: 'Label 4'}]);
}, 1000);
setTimeout(function () {
chart.xgrids([{value: 2, text:'Label 2'}]);
}, 2000);
setTimeout(function () {
chart.xgrids.add([{value: 3, text:'Label 3', class:'hoge'}]);
}, 3000);
setTimeout(function () {
chart.xgrids.remove({value:2});
}, 4000);
setTimeout(function () {
chart.xgrids.remove({class:'hoge'});
}, 5000);
setTimeout(function () {
chart.xgrids.remove([{value: 1}, {value: 4}]);
}, 6000);
setTimeout(function () {
chart.xgrids([{value: 1, text:'Label 1'}, {value: 4, text: 'Label 4'}]);
}, 7000);
setTimeout(function () {
chart.xgrids.remove();
}, 8000);
var chart2 = c3.generate({
bindto: '#chart2',
data: {
x : 'x',
columns: [
['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05'],
['sample', 30, 200, 100, 400, 150]
]
},
axis : {
x : {
type : 'timeseries'
}
},
grid: {
x: {
lines: [{
value: '2013-01-04',
text: '2013/01/04',
class: 'lineFor20130104'
}]
}
}
});
</script>
</body>
......
htdocs/samples/grids_timeseries.html
View file @ 32b6f93c
......@@ -12,11 +12,11 @@
<script>
var smallData = [
['x', '2014-01-01 00:00:00', '2014-02-01 00:00:00', '2014-03-01 00:00:00', '2014-04-01 00:00:00', '2014-05-01 00:00:00', '2014-06-01 00:00:00'],
['x', '2014-01-01', '2014-02-01', '2014-03-01', '2014-04-01', '2014-05-01', '2014-06-01'],
['sample', 30, 200, 100, 400, 150, 250]
],
bigData = [
['x', '2014-01-01 00:00:00', '2014-02-01 00:00:00', '2014-03-01 00:00:00', '2014-04-01 00:00:00', '2014-05-01 00:00:00', '2014-06-01 00:00:00', '2014-07-01 00:00:00', '2014-08-01 00:00:00', '2014-09-01 00:00:00', '2014-10-01 00:00:00', '2014-11-01 00:00:00', '2014-12-01 00:00:00'],
['x', '2014-01-01', '2014-02-01', '2014-03-01', '2014-04-01', '2014-05-01', '2014-06-01', '2014-07-01', '2014-08-01', '2014-09-01', '2014-10-01', '2014-11-01', '2014-12-01'],
['sample', 30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250]
];
......
htdocs/samples/interaction_zoom.html deleted 100644 → 0
View file @ b4619dbf
<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.min.js"></script>
<script>
var chart = c3.generate({
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 150, 250, 150, 200, 170, 240, 100, 150, 250, 150, 200, 170, 240, 30, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 350, 220, 250, 300, 270, 140, 150, 90, 150, 50, 120, 70, 40]
]
},
zoom: {
enabled: true
}
});
</script>
</body>
</html>
htdocs/samples/multiple_charts.html deleted 100644 → 0
View file @ b4619dbf
<html>
<head>
<link href="/css/c3.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="chart1" style="height:300px;"></div>
<div id="chart2" style="height:150px;"></div>
<div id="chart3" style="height:150px;"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
<script>
var chart1 = c3.generate({
bindto: '#chart1',
data: {
// xs: {
// 'data2': 'data1',
// },
columns: [
['data1', 130, 210, 120, 440, 250, 350],
['data2', 50, 20, 10, 40, 15, 25]
],
// type: 'scatter'
// type: 'pie'
selection: {
enabled: true
}
},
zoom: {
enabled: true
},
subchart : {
show: true
}
});
var chart2 = c3.generate({
bindto: '#chart2',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 150, 120, 210, 240, 215, 125]
],
// type: 'scatter'
// type: 'pie'
},
});
var chart3 = c3.generate({
bindto: '#chart3',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 550, 520, 510, 540, 515, 525]
],
// type: 'scatter'
// type: 'pie'
},
});
</script>
</body>
</html>
htdocs/samples/pie.html
View file @ 32b6f93c
......@@ -10,19 +10,11 @@
<script>
var chart = c3.generate({
data: {
xs: {
setosa: 'setosa_x',
versicolor: 'versicolor_x',
virginica: 'virginica_x'
},
columns: [
["setosa_x", 3.5, 3.0, 3.2, 3.1, 3.6, 3.9, 3.4, 3.4, 2.9, 3.1, 3.7, 3.4, 3.0, 3.0, 4.0, 4.4, 3.9, 3.5, 3.8, 3.8, 3.4, 3.7, 3.6, 3.3, 3.4, 3.0, 3.4, 3.5, 3.4, 3.2, 3.1, 3.4, 4.1, 4.2, 3.1, 3.2, 3.5, 3.6, 3.0, 3.4, 3.5, 2.3, 3.2, 3.5, 3.8, 3.0, 3.8, 3.2, 3.7, 3.3],
["versicolor_x", 3.2, 3.2, 3.1, 2.3, 2.8, 2.8, 3.3, 2.4, 2.9, 2.7, 2.0, 3.0, 2.2, 2.9, 2.9, 3.1, 3.0, 2.7, 2.2, 2.5, 3.2, 2.8, 2.5, 2.8, 2.9, 3.0, 2.8, 3.0, 2.9, 2.6, 2.4, 2.4, 2.7, 2.7, 3.0, 3.4, 3.1, 2.3, 3.0, 2.5, 2.6, 3.0, 2.6, 2.3, 2.7, 3.0, 2.9, 2.9, 2.5, 2.8],
["virginica_x", 3.3, 2.7, 3.0, 2.9, 3.0, 3.0, 2.5, 2.9, 2.5, 3.6, 3.2, 2.7, 3.0, 2.5, 2.8, 3.2, 3.0, 3.8, 2.6, 2.2, 3.2, 2.8, 2.8, 2.7, 3.3, 3.2, 2.8, 3.0, 2.8, 3.0, 2.8, 3.8, 2.8, 2.8, 2.6, 3.0, 3.4, 3.1, 3.0, 3.1, 3.1, 3.1, 2.7, 3.2, 3.3, 3.0, 2.5, 3.0, 3.4, 3.0],
["setosa", 0.2, 0.2, 0.2, 0.2, 0.2, 0.4, 0.3, 0.2, 0.2, 0.1, 0.2, 0.2, 0.1, 0.1, 0.2, 0.4, 0.4, 0.3, 0.3, 0.3, 0.2, 0.4, 0.2, 0.5, 0.2, 0.2, 0.4, 0.2, 0.2, 0.2, 0.2, 0.4, 0.1, 0.2, 0.2, 0.2, 0.2, 0.1, 0.2, 0.2, 0.3, 0.3, 0.2, 0.6, 0.4, 0.3, 0.2, 0.2, 0.2, 0.2],
// ["setosa", 0.2, 0.2, 0.2, 0.2, 0.2, 0.4, 0.3, 0.2, 0.2, 0.1, 0.2, 0.2, 0.1, 0.1, 0.2, 0.4, 0.4, 0.3, 0.3, 0.3, 0.2, 0.4, 0.2, 0.5, 0.2, 0.2, 0.4, 0.2, 0.2, 0.2, 0.2, 0.4, 0.1, 0.2, 0.2, 0.2, 0.2, 0.1, 0.2, 0.2, 0.3, 0.3, 0.2, 0.6, 0.4, 0.3, 0.2, 0.2, 0.2, 0.2],
["versicolor", 1.4, 1.5, 1.5, 1.3, 1.5, 1.3, 1.6, 1.0, 1.3, 1.4, 1.0, 1.5, 1.0, 1.4, 1.3, 1.4, 1.5, 1.0, 1.5, 1.1, 1.8, 1.3, 1.5, 1.2, 1.3, 1.4, 1.4, 1.7, 1.5, 1.0, 1.1, 1.0, 1.2, 1.6, 1.5, 1.6, 1.5, 1.3, 1.3, 1.3, 1.2, 1.4, 1.2, 1.0, 1.3, 1.2, 1.3, 1.3, 1.1, 1.3],
["virginica", 2.5, 1.9, 2.1, 1.8, 2.2, 2.1, 1.7, 1.8, 1.8, 2.5, 2.0, 1.9, 2.1, 2.0, 2.4, 2.3, 1.8, 2.2, 2.3, 1.5, 2.3, 2.0, 2.0, 1.8, 2.1, 1.8, 1.8, 1.8, 2.1, 1.6, 1.9, 2.0, 2.2, 1.5, 1.4, 2.3, 2.4, 1.8, 1.8, 2.1, 2.4, 2.3, 1.9, 2.3, 2.5, 2.3, 1.9, 2.0, 2.3, 1.8],
// ["setosa", 30],
["setosa", 30],
// ["versicolor", 40],
// ["virginica", 50],
],
......@@ -44,16 +36,14 @@
});
setTimeout(function () {
console.log("== LOAD ==");
chart.load({
columns: [
["setosa", 30],
["setosa", 130],
]
});
}, 1000);
setTimeout(function () {
console.log("== UNLOAD ==");
chart.unload('virginica');
}, 2000);
......
htdocs/samples/selection_line.html deleted 100644 → 0
View file @ b4619dbf
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/c3.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({
bindto: '#chart',
data: {
columns: [
['sample1', 30, 200, 100, 400, 150, 250],
['sample2', 130, 300, 200, 500, 250, 350],
['sample3', 230, 400, 300, 600, 350, 450]
],
selection: {
enabled: true,
grouped: true,
multiple: false
}
}
});
</script>
</body>
</html>
htdocs/samples/simple.html
View file @ 32b6f93c
......@@ -9,10 +9,10 @@
<script src="/js/c3.js"></script>
<script>
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 250]
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
onclick: function (d, element) { console.log("onclick", d, element); },
onenter: function (d) { console.log("onenter", d); },
......
htdocs/samples/simple_bar.html deleted 100644 → 0
View file @ b4619dbf
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/style.css">
<link rel="stylesheet" type="text/css" href="/css/c3.css">
</head>
<body>
<div id="chart"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.min.js"></script>
<script>
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 250]
],
types: {
'sample': 'bar'
}
}
});
</script>
</body>
</html>
htdocs/samples/simple_multiple.html deleted 100644 → 0
View file @ b4619dbf
<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: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
]
},
tooltip: {
// enabled: false
},
zoom: {
// enabled: true
},
subchart: {
// show: true
}
});
</script>
</body>
</html>
htdocs/samples/simple_zoom.html deleted 100644 → 0
View file @ b4619dbf
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/c3.css">
</head>
<body>
<div id="chart"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.min.js"></script>
<script>
var chart = c3.generate({
zoom: {
enabled: true
},
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 250]
]
},
subchart: {
show: true
}
});
</script>
</body>
</html>
htdocs/samples/timeseries_grid_x_lines.html deleted 100644 → 0
View file @ b4619dbf
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/c3.css">
</head>
<body>
<div id="chart"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.min.js"></script>
<script>
var chart = c3.generate({
bindto: '#chart',
data: {
x : 'date',
x_format : '%Y%m%d',
columns: [
// ['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'],
['date', '20130101', '20130102', '20130103', '20130104', '20130105', '20130106'],
['sample', 30, 200, 100, 400, 150, 250]
]
},
axis : {
x : {
type : 'timeseries'
}
},
grid: {
x: {
lines: [{
value: '20130104',
text: '2013/01/04',
class: 'lineFor20130104'
}]
}
}
});
</script>
</body>
</html>
htdocs/samples/timeseries_raw.html 0 → 100644
View file @ 32b6f93c
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/c3.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 rows = [["x","Views","GMV"]];
rows = rows.concat([[1398709800000,780,136],
[1398450600000,812,134],
[1399401000000,784,154],
[1399228200000,786,135],
[1399573800000,802,131],
[1399487400000,773,166],
[1399314600000,787,146],
[1399919400000,1496,309],
[1399833000000,767,138],
[1399746600000,797,141],
[1399660200000,796,146],
[1398623400000,779,143],
[1399055400000,794,140],
[1398969000000,791,140],
[1398882600000,825,107],
[1399141800000,786,136],
[1398537000000,773,143],
[1398796200000,783,154],
[1400005800000,1754,284]].sort(function (a, b) {
return a[0] - b[0];
}));
var chart = c3.generate({
bindto: '#chart',
data: {
x : 'x',
rows: rows
},
axis : {
x : {
type : 'timeseries',
tick : {
format : "%Y-%m-%d" // https://github.com/mbostock/d3/wiki/Time-Formatting#wiki-format
}
}
}
});
</script>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment