Skip to content

Instantly share code, notes, and snippets.

@revox

revox/c3_sample.html

Last active November 30, 2018 10:41
Show Gist options
  • Save revox/bc4bfa2eee0bca6fe36e to your computer and use it in GitHub Desktop.
Save revox/bc4bfa2eee0bca6fe36e to your computer and use it in GitHub Desktop.
Download ZIP
Simple C3.js time series example
Raw
c3_sample.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>C3 demo chart</title>
<meta name="keywords" content="adult obesity, overweight, public health">
<meta name="description" content="Adult obesity has increased in the UK from 1 in 5 to 1 in 4 since 2001">
<!-- Load c3.css -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.9/c3.min.css" rel="stylesheet" type="text/css">
<!-- Load d3.js and c3.js -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js" charset="utf-8"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.9/c3.min.js"></script>
</head>
<body>
<div id="chart"></div>
<script type="text/javascript">
var male = ['male',19.8,20.8,21.3,22.0,22.0,22.8,23.4,23.7,23.4,24.1,24.2];
var dates = ['years','2001','2002','2003','2004','2005','2006','2007','2008','2009','2010','2011'];
// Year 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011
// Males 19.8 20.8 21.3 22.0 22.0 22.8 23.4 23.7 23.4 24.1 24.2
// Females 21.7 22.2 22.7 22.5 23.1 23.5 24.0 24.3 24.5 24.9 25.2
var chart = c3.generate({
bindto: '#chart',
data: {
x:'years',
columns: [dates,male],
xFormat: '%Y'
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%Y'
}
}
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment