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

Update samples

pull/3/head
Masayuki Tanaka 11 years ago
parent
74d2c2a945
commit
fdaaa615cb
14 changed files with 391 additions and 8 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. 8
      htdocs/css/bootstrap.min.css
  2. 6
      htdocs/data/c3_test.csv
  3. 6
      htdocs/data/c3_test2.csv
  4. 101
      htdocs/index.html
  5. 30
      htdocs/samples/axes_y2.html
  6. 25
      htdocs/samples/categorized.html
  7. 30
      htdocs/samples/chart_bar.html
  8. 33
      htdocs/samples/chart_bar_stacked.html
  9. 25
      htdocs/samples/chart_spline.html
  10. 22
      htdocs/samples/data_columned.html
  11. 48
      htdocs/samples/data_load.html
  12. 26
      htdocs/samples/data_rowed.html
  13. 18
      htdocs/samples/data_url.html
  14. 21
      htdocs/samples/simple_multiple.html

8
htdocs/css/bootstrap.min.css vendored
View File

File diff suppressed because one or more lines are too long

6
htdocs/data/c3_test.csv
Unescape View File

@ -0,0 +1,6 @@
data1,data2,data3
120,80,200
140,50,210
170,100,250
150,70,300
180,120,280
1 data1 data2 data3
2 120 80 200
3 140 50 210
4 170 100 250
5 150 70 300
6 180 120 280

6
htdocs/data/c3_test2.csv
Unescape View File

@ -0,0 +1,6 @@
data1,data2,data3
20,180,400
40,150,310
70,120,470
50,170,400
80,200,380
1 data1 data2 data3
2 20 180 400
3 40 150 310
4 70 120 470
5 50 170 400
6 80 200 380

101
htdocs/index.html
Unescape View File

@ -1,14 +1,99 @@
<html>
<head>
<link href="/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h3>Excamples:</h3>
<ul>
<li><a href="/samples/simple.html">Simple</a></li>
<li><a href="/samples/timeseries.html">Timeseries</a></li>
<li><a href="/samples/simple_region.html">Region on Simple</a></li>
<li><a href="/samples/timeseries_region.html">Region on Timeseries</a></li>
<li><a href="/samples/simple_tooltip_show.html">Tooltip on Init</a></li>
</ul>
<div class="container">
<div class="section">
<a href="/#basic" name="basic"><h2># <span>Basic</span></h2></a>
<div>
<div class="row">
<div class="col-md-4">
<h3>Simple Line Chart</h3>
<p>Simple line chart for getting started.</p>
<p><a class="btn btn-default" href="/samples/simple.html" role="button">View details &raquo;</a></p>
</div>
<div class="col-md-4">
<h3>Multiple Line Chart</h3>
<p>Multiple line chart with multiple data.</p>
<p><a class="btn btn-default" href="/samples/simple_multiple.html" role="button">View details &raquo;</a></p>
</div>
<div class="col-md-4">
<h3>Timeseries Chart</h3>
<p>Simple line chart with timeseries data.</p>
<p><a class="btn btn-default" href="/samples/timeseries.html" role="button">View details &raquo;</a></p>
</div>
</div>
</div>
</div>
<div class="section">
<a href="/#axes" name="axes"><h2># <span>Axes</span></h2></a>
<div>
<div class="row">
<div class="col-md-4">
<h3>Categorized Axis</h3>
<p>Axis with ticks categorizing each data.</p>
<p><a class="btn btn-default" href="/samples/categorized.html" role="button">View details &raquo;</a></p>
</div>
<div class="col-md-4">
<h3>Additional Axis</h3>
<p>Additional y axis can be added.</p>
<p><a class="btn btn-default" href="/samples/axes_y2.html" role="button">View details &raquo;</a></p>
</div>
</div>
</div>
</div>
<div class="section">
<a href="/#data" name="data"><h2># <span>Data</span></h2></a>
<div>
<div class="row">
<div class="col-md-4">
<h3>Column Oriented Data</h3>
<p>Column-oriented data can be used as input.</p>
<p><a class="btn btn-default" href="/samples/data_columned.html" role="button">View details &raquo;</a></p>
</div>
<div class="col-md-4">
<h3>Row Oriented Data</h3>
<p>Row-oriented data can be used as input.</p>
<p><a class="btn btn-default" href="/samples/data_rowed.html" role="button">View details &raquo;</a></p>
</div>
<div class="col-md-4">
<h3>Data from URL</h3>
<p>Data from URL can be used as input.</p>
<p><a class="btn btn-default" href="/samples/data_url.html" role="button">View details &raquo;</a></p>
</div>
</div>
<div class="row">
<div class="col-md-4">
<h3>Load Data</h3>
<p>Load data dinamically.</p>
<p><a class="btn btn-default" href="/samples/data_load.html" role="button">View details &raquo;</a></p>
</div>
</div>
</div>
</div>
<div class="section">
<a href="/#chart_type" name="chart_type"><h2># <span>Chart Type</span></h2></a>
<div>
<div class="row">
<div class="col-md-4">
<h3>Bar Chart</h3>
<p>Display as Bar Chart</p>
<p><a class="btn btn-default" href="/samples/chart_bar.html" role="button">View details &raquo;</a></p>
</div>
<div class="col-md-4">
<h3>Stacked Bar Chart</h3>
<p>Display as Stacked Bar Chart</p>
<p><a class="btn btn-default" href="/samples/chart_bar_stacked.html" role="button">View details &raquo;</a></p>
</div>
<div class="col-md-4">
<h3>Spline Chart</h3>
<p>Display as Spline Chart</p>
<p><a class="btn btn-default" href="/samples/chart_spline.html" role="button">View details &raquo;</a></p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

30
htdocs/samples/axes_y2.html
Unescape View File

@ -0,0 +1,30 @@
<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: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
axes: {
data1: 'y',
data2: 'y2'
}
},
axis: {
y2: {
show: true
}
}
});
</script>
</body>
</html>

25
htdocs/samples/categorized.html
Unescape View File

@ -0,0 +1,25 @@
<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: [
['data1', 30, 200, 100, 400, 150, 250, 50, 100, 250]
]
},
axis: {
x: {
type: 'categorized'
}
}
});
</script>
</body>
</html>

30
htdocs/samples/chart_bar.html
Unescape View File

@ -0,0 +1,30 @@
<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: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 100, 140, 200, 150, 50]
],
types: {
data1: 'bar',
data2: 'bar'
}
},
axis: {
x: {
type: 'categorized'
}
}
});
</script>
</body>
</html>

33
htdocs/samples/chart_bar_stacked.html
Unescape View File

@ -0,0 +1,33 @@
<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: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 100, 140, 200, 150, 50]
],
types: {
data1: 'bar',
data2: 'bar'
},
groups: [
['data1', 'data2']
]
},
axis: {
x: {
type: 'categorized'
}
}
});
</script>
</body>
</html>

25
htdocs/samples/chart_spline.html
Unescape View File

@ -0,0 +1,25 @@
<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: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 100, 140, 200, 150, 50]
],
types: {
data1: 'spline',
data2: 'spline'
}
}
});
</script>
</body>
</html>

22
htdocs/samples/data_columned.html
Unescape View File

@ -0,0 +1,22 @@
<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: [
['data1', 30, 20, 50, 40, 60, 50],
['data2', 200, 130, 90, 240, 130, 220],
['data3', 300, 200, 160, 400, 250, 250]
]
}
});
</script>
</body>
</html>

48
htdocs/samples/data_load.html
Unescape View File

@ -0,0 +1,48 @@
<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: {
url: '/data/c3_test.csv'
}
});
setTimeout(function () {
chart.load({
url: '/data/c3_test2.csv'
});
}, 2000);
setTimeout(function () {
chart.load({
columns: [
['data1', 30, 20, 50, 40, 60, 50],
['data2', 200, 130, 90, 240, 130, 220],
['data3', 300, 200, 160, 400, 250, 250]
]
});
}, 4000);
setTimeout(function () {
chart.load({
rows: [
['data1', 'data2', 'data3'],
[90, 120, 300],
[40, 160, 240],
[50, 200, 290],
[120, 160, 230],
[80, 130, 300],
[90, 220, 320],
]
});
}, 6000);
</script>
</body>
</html>

26
htdocs/samples/data_rowed.html
Unescape View File

@ -0,0 +1,26 @@
<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: {
rows: [
['data1', 'data2', 'data3'],
[90, 120, 300],
[40, 160, 240],
[50, 200, 290],
[120, 160, 230],
[80, 130, 300],
[90, 220, 320],
]
}
});
</script>
</body>
</html>

18
htdocs/samples/data_url.html
Unescape View File

@ -0,0 +1,18 @@
<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: {
url: '/data/c3_test.csv'
}
});
</script>
</body>
</html>

21
htdocs/samples/simple_multiple.html
Unescape View File

@ -0,0 +1,21 @@
<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: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
]
}
});
</script>
</body>
</html>
Write Preview
Loading…
Cancel
Save