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

Add sample for area chart

pull/329/head
Masayuki Tanaka 10 years ago
parent
a10389df16
commit
eb3fb4965b
7 changed files with 279 additions and 10 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. 13
      htdocs/index.html
  2. 22
      htdocs/samples/chart_area.html
  3. 49
      htdocs/samples/chart_area_spline.html
  4. 52
      htdocs/samples/chart_area_spline_stacked.html
  5. 52
      htdocs/samples/chart_area_stacked.html
  6. 49
      htdocs/samples/chart_area_step.html
  7. 52
      htdocs/samples/chart_area_step_stacked.html

13
htdocs/index.html
Unescape View File

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

22
htdocs/samples/chart_area.html
Unescape View File

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

49
htdocs/samples/chart_area_spline.html
Unescape View File

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

52
htdocs/samples/chart_area_spline_stacked.html
Unescape View File

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

52
htdocs/samples/chart_area_stacked.html
Unescape View File

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

49
htdocs/samples/chart_area_step.html
Unescape View File

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

52
htdocs/samples/chart_area_step_stacked.html
Unescape View File

@ -0,0 +1,52 @@
<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>
Write Preview
Loading…
Cancel
Save