Skip to content

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

Add sample for area chart

parent a10389df
Show whitespace changes
Inline Side-by-side
Showing with 278 additions and 9 deletions
htdocs/index.html
View file @ eb3fb496
......@@ -26,12 +26,21 @@
<a href="./samples/chart_area.html">
Area chart with ordinary data
</a>
<a class="btn btn-danger" href="./samples/chart_area_spline.html">
<a href="./samples/chart_area_spline.html">
Area-spline chart with ordinary data
</a>
<a class="btn btn-danger" href="./samples/chart_area_step.html">
<a href="./samples/chart_area_step.html">
Area-step chart with ordinary data
</a>
<a href="./samples/chart_area_stacked.html">
Stacked Area chart with ordinary data
</a>
<a href="./samples/chart_area_spline_stacked.html">
Stacked Area-spline chart with ordinary data
</a>
<a href="./samples/chart_area_step_stacked.html">
Stacked Area-step chart with ordinary data
</a>
</div>
<div class="col-md-4">
<h3>Bar Chart</h3>
......
htdocs/samples/chart_area.html
View file @ eb3fb496
......@@ -5,6 +5,7 @@
<body>
<div id="chart1"></div>
<div id="chart2"></div>
<div id="chart3"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
......@@ -17,10 +18,7 @@
['data1', 300, 350, 300, 0, 0, 0],
['data2', 130, 100, 140, 200, 150, 50]
],
types: {
data1: 'area',
data2: 'area-spline'
}
type: 'area'
}
});
......@@ -31,10 +29,18 @@
['data1', -300, -350, -300, 0, 0, 0],
['data2', -130, -100, -140, -200, -150, -50]
],
types: {
data1: 'area',
data2: 'area-spline'
type: 'area'
}
});
var chart3 = c3.generate({
bindto: '#chart3',
data: {
columns: [
['data1', -300, 350, -300, 0, 0, 0],
['data2', -130, -100, 140, -200, 150, -50]
],
type: 'area'
}
});
......
htdocs/samples/chart_area_spline.html 0 → 100644
View file @ eb3fb496
<html>
<head>
<link href="/css/c3.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="chart1"></div>
<div id="chart2"></div>
<div id="chart3"></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: {
columns: [
['data1', 300, 350, 300, 0, 0, 0],
['data2', 130, 100, 140, 200, 150, 50]
],
type: 'area-spline'
}
});
var chart2 = c3.generate({
bindto: '#chart2',
data: {
columns: [
['data1', -300, -350, -300, 0, 0, 0],
['data2', -130, -100, -140, -200, -150, -50]
],
type: 'area-spline'
}
});
var chart3 = c3.generate({
bindto: '#chart3',
data: {
columns: [
['data1', -300, 350, -300, 0, 0, 0],
['data2', -130, -100, 140, -200, 150, -50]
],
type: 'area-spline'
}
});
</script>
</body>
</html>
htdocs/samples/chart_area_spline_stacked.html 0 → 100644
View file @ eb3fb496
<html>
<head>
<link href="/css/c3.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="chart1"></div>
<div id="chart2"></div>
<div id="chart3"></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: {
columns: [
['data1', 300, 350, 300, 0, 0, 0],
['data2', 130, 100, 140, 200, 150, 50]
],
type: 'area-spline',
groups: [['data1', 'data2']],
}
});
var chart2 = c3.generate({
bindto: '#chart2',
data: {
columns: [
['data1', -300, -350, -300, 0, 0, 0],
['data2', -130, -100, -140, -200, -150, -50]
],
type: 'area-spline',
groups: [['data1', 'data2']],
}
});
var chart3 = c3.generate({
bindto: '#chart3',
data: {
columns: [
['data1', -300, 350, -300, 0, 0, 0],
['data2', -130, -100, 140, -200, 150, -50]
],
type: 'area-spline',
groups: [['data1', 'data2']],
}
});
</script>
</body>
</html>
htdocs/samples/chart_area_stacked.html 0 → 100644
View file @ eb3fb496
<html>
<head>
<link href="/css/c3.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="chart1"></div>
<div id="chart2"></div>
<div id="chart3"></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: {
columns: [
['data1', 300, 350, 300, 0, 0, 0],
['data2', 130, 100, 140, 200, 150, 50]
],
type: 'area',
groups: [['data1', 'data2']],
}
});
var chart2 = c3.generate({
bindto: '#chart2',
data: {
columns: [
['data1', -300, -350, -300, 0, 0, 0],
['data2', -130, -100, -140, -200, -150, -50]
],
type: 'area',
groups: [['data1', 'data2']],
}
});
var chart3 = c3.generate({
bindto: '#chart3',
data: {
columns: [
['data1', -300, 350, -300, 0, 0, 0],
['data2', -130, -100, 140, -200, 150, -50]
],
type: 'area',
groups: [['data1', 'data2']],
}
});
</script>
</body>
</html>
htdocs/samples/chart_area_step.html 0 → 100644
View file @ eb3fb496
<html>
<head>
<link href="/css/c3.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="chart1"></div>
<div id="chart2"></div>
<div id="chart3"></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: {
columns: [
['data1', 300, 350, 300, 0, 0, 0],
['data2', 130, 100, 140, 200, 150, 50]
],
type: 'area-step'
}
});
var chart2 = c3.generate({
bindto: '#chart2',
data: {
columns: [
['data1', -300, -350, -300, 0, 0, 0],
['data2', -130, -100, -140, -200, -150, -50]
],
type: 'area-step'
}
});
var chart3 = c3.generate({
bindto: '#chart3',
data: {
columns: [
['data1', -300, 350, -300, 0, 0, 0],
['data2', -130, -100, 140, -200, 150, -50]
],
type: 'area-step'
}
});
</script>
</body>
</html>
htdocs/samples/chart_area_step_stacked.html 0 → 100644
View file @ eb3fb496
<html>
<head>
<link href="/css/c3.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="chart1"></div>
<div id="chart2"></div>
<div id="chart3"></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: {
columns: [
['data1', 300, 350, 300, 0, 0, 0],
['data2', 130, 100, 140, 200, 150, 50]
],
type: 'area-step',
groups: [['data1', 'data2']],
}
});
var chart2 = c3.generate({
bindto: '#chart2',
data: {
columns: [
['data1', -300, -350, -300, 0, 0, 0],
['data2', -130, -100, -140, -200, -150, -50]
],
type: 'area-step',
groups: [['data1', 'data2']],
}
});
var chart3 = c3.generate({
bindto: '#chart3',
data: {
columns: [
['data1', -300, 350, -300, 0, 0, 0],
['data2', -130, -100, 140, -200, 150, -50]
],
type: 'area-step',
groups: [['data1', 'data2']],
}
});
</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