Skip to content

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

Update samples

parent 74d2c2a9
Hide whitespace changes
Inline Side-by-side
Showing with 385 additions and 8 deletions
htdocs/css/bootstrap.min.css 0 → 100644
View file @ fdaaa615
This source diff could not be displayed because it is too large. You can view the blob instead.
htdocs/data/c3_test.csv 0 → 100644
View file @ fdaaa615
data1,data2,data3
120,80,200
140,50,210
170,100,250
150,70,300
180,120,280
\ No newline at end of file
htdocs/data/c3_test2.csv 0 → 100644
View file @ fdaaa615
data1,data2,data3
20,180,400
40,150,310
70,120,470
50,170,400
80,200,380
\ No newline at end of file
htdocs/index.html
View file @ fdaaa615
<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>
htdocs/samples/axes_y2.html 0 → 100644
View file @ fdaaa615
<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>
htdocs/samples/categorized.html 0 → 100644
View file @ fdaaa615
<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>
htdocs/samples/chart_bar.html 0 → 100644
View file @ fdaaa615
<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>
htdocs/samples/chart_bar_stacked.html 0 → 100644
View file @ fdaaa615
<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>
htdocs/samples/chart_spline.html 0 → 100644
View file @ fdaaa615
<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>
htdocs/samples/data_columned.html 0 → 100644
View file @ fdaaa615
<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>
htdocs/samples/data_load.html 0 → 100644
View file @ fdaaa615
<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>
htdocs/samples/data_rowed.html 0 → 100644
View file @ fdaaa615
<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>
htdocs/samples/data_url.html 0 → 100644
View file @ fdaaa615
<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>
htdocs/samples/simple_multiple.html 0 → 100644
View file @ fdaaa615
<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>
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