Skip to content

Instantly share code, notes, and snippets.

@fotock

fotock/index.html

Last active August 29, 2015 14:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save fotock/3513fd10be7d0bd4c93e to your computer and use it in GitHub Desktop.
Save fotock/3513fd10be7d0bd4c93e to your computer and use it in GitHub Desktop.
Download ZIP
A C3.js Line Chart
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<link href="http://c3js.org/css/c3-b03125fa.css" rel="stylesheet" type="text/css" />
<body>
<div id="chart" style="margin-top: 30px;"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://c3js.org/js/c3.min-12912fb6.js"></script>
<script>
var chart = c3.generate({
data: {
x: 'x',
columns: [
['x', '2010-01-01', '2010-01-02', '2010-01-03', '2010-01-04', '2010-01-05',
'2010-01-06', '2010-01-07', '2010-01-08', '2010-01-09', '2010-01-10', '2010-01-11'],
['2013', 30, 200, 100, 400, 150, 250, 200, 140, 400, 150, 250],
['2014', 30, 220, 100, 300, 140, 280, 210, 100, 350, 140, 280]
],
type: 'spline'
},
axis : {
x : {
type: 'timeseries',
tick: {
format: '%d-%b'
},
values: ['2014-01-05', '2014-01-10']
}
},
color: {
pattern: ['#0000df', '#dddddd', '#999999', '#ffbb78', '#2ca02c', '#98df8a', '#d62728', '#ff9896', '#9467bd', '#c5b0d5', '#8c564b', '#c49c94', '#e377c2', '#f7b6d2', '#7f7f7f', '#c7c7c7', '#bcbd22', '#dbdb8d', '#17becf', '#9edae5']
},
grid: {
y: {
show: true
}
}
});
</script>
</body>
@fotock
Copy link
Author

fotock commented Mar 25, 2015

View at: http://bl.ocks.org/fotock/3513fd10be7d0bd4c93e

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment