playground
/
c3
mirror of https://github.com/masayuki0812/c3.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

Update samples

pull/319/head
Masayuki Tanaka 11 years ago
parent
b4619dbf29
commit
32b6f93c8c
20 changed files with 181 additions and 333 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 62
      htdocs/samples/api_xgrid_lines.html
  2. 0
      htdocs/samples/api_ygrid_lines.html
  3. 22
      htdocs/samples/chart_area.html
  4. 2
      htdocs/samples/data_load.html
  5. 0
      htdocs/samples/data_region.html
  6. 13
      htdocs/samples/donut.html
  7. 74
      htdocs/samples/grid_x_lines.html
  8. 8
      htdocs/samples/grids_timeseries.html
  9. 23
      htdocs/samples/interaction_zoom.html
  10. 60
      htdocs/samples/multiple_charts.html
  11. 16
      htdocs/samples/pie.html
  12. 28
      htdocs/samples/selection_line.html
  13. 4
      htdocs/samples/simple.html
  14. 25
      htdocs/samples/simple_bar.html
  15. 30
      htdocs/samples/simple_grid_x_lines.html
  16. 30
      htdocs/samples/simple_multiple.html
  17. 26
      htdocs/samples/simple_zoom.html
  18. 39
      htdocs/samples/timeseries_grid_x_lines.html
  19. 52
      htdocs/samples/timeseries_raw.html
  20. 0
      htdocs/samples/tooltip_show.html

62
htdocs/samples/api_xgrid_lines.html
Unescape View File

@ -0,0 +1,62 @@
<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: [
['sample', 30, 200, 100, 400, 150, 250]
]
},
axis: {
// rotated: true,
},
grid: {
x: {
// 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>

0
htdocs/samples/grid_y_lines.html → htdocs/samples/api_ygrid_lines.html
Unescape View File

22
htdocs/samples/chart_area.html
Unescape View File

@ -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>

2
htdocs/samples/data_load.html
Unescape View File

@ -23,7 +23,7 @@
enabled: true
},
transition: {
duration: 200
duration: 500
}
});

0
htdocs/samples/simple_region.html → htdocs/samples/data_region.html
Unescape View File

13
htdocs/samples/donut.html
Unescape View File

@ -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: {

74
htdocs/samples/grid_x_lines.html
Unescape View File

@ -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>

8
htdocs/samples/grids_timeseries.html
Unescape View File

@ -12,12 +12,12 @@
<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'],
['sample', 30, 200, 100, 400, 150, 250]
['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'],
['sample', 30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250]
['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]
];
c3.generate({

23
htdocs/samples/interaction_zoom.html
Unescape View File

@ -1,23 +0,0 @@
<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>

60
htdocs/samples/multiple_charts.html
Unescape View File

@ -1,60 +0,0 @@
<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>

16
htdocs/samples/pie.html
Unescape View File

@ -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);

28
htdocs/samples/selection_line.html
Unescape View File

@ -1,28 +0,0 @@
<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>

4
htdocs/samples/simple.html
Unescape View File

@ -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); },

25
htdocs/samples/simple_bar.html
Unescape View File

@ -1,25 +0,0 @@
<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>

30
htdocs/samples/simple_grid_x_lines.html
Unescape View File

@ -1,30 +0,0 @@
<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: {
columns: [
['sample', 30, 200, 100, 400, 150, 250]
]
},
grid: {
x: {
lines: [{
value: 3,
text: '3',
class: 'lineFor3'
}]
}
}
});
</script>
</body>
</html>

30
htdocs/samples/simple_multiple.html
Unescape View File

@ -1,30 +0,0 @@
<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>

26
htdocs/samples/simple_zoom.html
Unescape View File

@ -1,26 +0,0 @@
<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>

39
htdocs/samples/timeseries_grid_x_lines.html
Unescape View File

@ -1,39 +0,0 @@
<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>

52
htdocs/samples/timeseries_raw.html
Unescape View File

@ -0,0 +1,52 @@
<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>

0
htdocs/samples/simple_tooltip_show.html → htdocs/samples/tooltip_show.html
Unescape View File

Write Preview
Loading…
Cancel
Save