Skip to content

Instantly share code, notes, and snippets.

@samuel-holt

samuel-holt/charts.js

Last active August 23, 2016 14:39
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save samuel-holt/c1cbcfc13821d467148d2c1b5bc3d89a to your computer and use it in GitHub Desktop.
Save samuel-holt/c1cbcfc13821d467148d2c1b5bc3d89a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
charts.js
import c3 from 'c3';
export function charts() {
const errorChart = c3.generate({
bindto: '.js-chart',
data: {
x: 'date',
y: 'errors',
url: './data/dummydata.json',
mimeType: 'json'
},
zoom: {
enabled: true
},
axis: {
x: {
label: {
text: 'Date'
},
type: 'timeseries',
tick: {
format: '%d-%m-%y',
fit: true
}
}
}
});
}
Raw
dummydata.json
{
"date": ["16-02-22","16-02-23","16-02-24","16-02-25","16-02-26","16-02-27","16-02-28","16-02-29","16-03-01","16-03-02","16-03-03","16-03-04","16-03-05","16-03-06","16-03-07","16-03-08","16-03-09","16-03-10","16-03-11","16-03-12","16-03-13","16-03-14","16-03-15","16-03-16","16-03-17","16-03-18","16-03-19","16-03-20","16-03-21","16-03-22","16-03-23","16-03-24","16-03-25","16-03-26","16-03-27","16-03-28","16-03-29","16-03-30","16-03-31","16-04-01","16-04-02","16-04-03","16-04-04","16-04-05","16-04-06","16-04-07","16-04-08","16-04-09","16-04-10","16-04-11","16-04-12","16-04-13","16-04-14","16-04-15","16-04-16","16-04-17","16-04-18","16-04-19","16-04-20","16-04-21","16-04-22","16-04-23","16-04-24","16-04-25","16-04-26","16-04-27","16-04-28","16-04-29","16-04-30","16-05-01","16-05-02","16-05-03","16-05-04","16-05-05","16-05-06","16-05-07","16-05-08","16-05-09","16-05-10","16-05-11","16-05-12","16-05-13","16-05-14","16-05-15","16-05-16","16-05-17","16-05-18","16-05-19","16-05-20","16-05-21","16-05-22","16-05-23","16-05-24","16-05-25","16-05-26","16-05-27","16-05-28","16-05-29","16-05-30","16-05-31"
],
"errors": [7863,6058,1200,7760,4059,8748,4684,4596,3120,735,6246,9941,9142,1661,8031,3378,4243,7294,5246,6644,205,701,6020,6808,9319,3235,3838,5462,2608,4278,8352,4938,5446,2368,9770,633,4107,2167,5189,1424,1644,8928,3248,3063,6949,7207,8473,798,2466,459,691,9892,7650,4398,9685,1870,1302,653,8517,5606,8792,4939,4570,1016,3375,9201,7424,5451,5711,7766,9074,1867,4153,2401,6884,1986,2661,629,3430,5546,6108,983,3784,4161,4900,9729,9479,7407,820,6906,3775,5093,2915,9947,2174,3345,2742,4353,7572,9476
],
"abandoned_carts": [543,879,723,450,744,113,229,255,410,160,431,460,757,585,476,388,403,665,750,790,979,949,490,213,426,862,693,299,570,673,606,145,841,761,763,680,376,126,987,577,702,603,197,237,765,412,865,620,487,360,209,474,733,318,662,205,732,791,777,429,386,671,677,153,699,898,403,382,402,207,638,774,691,272,176,932,318,255,445,449,192,628,495,444,430,592,748,559,516,849,173,148,297,394,995,907,454,936,635,211
]
}
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="./jspm_packages/system.js"></script>
<script src="./config.js"></script>
<script>
System.import('./lib/main.js');
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My demo app</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.css" rel="stylesheet" />
<link href="./assets/css/main.css" rel="stylesheet" />
</head>
<body>
<div class="app">
<div class="app__header">
<h1>My shop dashboard</h1>
</div>
<div class="app__body">
<div class="primary">
<div class="primary__content">
<div class="module">
<div class="module__header module__header--alert">
<h2>User behavior</h2>
</div>
<div class="module__body">
<div class="chart">
<div class="chart__chart-container">
<div class="js-chart"></div>
</div>
<div class="chart__metrics">
<div class="js-chart-metrics"></div>
</div>
</div>
</div>
<div class="module__footer">
<div class="message message--alert">Alert: Errors in your code are causing customers to abandon their shopping carts!</div>
</div>
</div>
<div class="module">
<div class="module__header">
<h2>Recent customers</h2>
</div>
<div class="module__body">
<div class="table">
<div class="table__body">
<table>
<tr>
<th>Full name</th>
<th>City</th>
<th>Country</th>
<th>Last purchase</th>
</tr>
<tr>
<td>Lysandra Gill</td>
<td>São José</td>
<td>Marshall Islands</td>
<td>Oct 3, 2015</td>
</tr>
<tr>
<td>Jakeem Berg</td>
<td>Murray Bridge</td>
<td>Pitcairn Islands</td>
<td>Mar 17, 2016</td>
</tr>
<tr>
<td>Xyla Crawford</td>
<td>Gary</td>
<td>Christmas Island</td>
<td>Apr 28, 2016</td>
</tr>
<tr>
<td>Kennedy Griffin</td>
<td>Wilskerke</td>
<td>Guatemala</td>
<td>Feb 2, 2016</td>
</tr>
<tr>
<td>Brynn Villarreal</td>
<td>Cochrane</td>
<td>Grenada</td>
<td>Jul 14, 2015</td>
</tr>
<tr>
<td>Edan Trujillo</td>
<td>Ravensburg</td>
<td>Norfolk Island</td>
<td>Dec 11, 2015</td>
</tr>
</table>
</div>
<div class="table__footer">
<p>These customers reported errors while shopping</p>
</div>
</div>
</div>
<div class="module__footer">
<p>This is a module footer</p>
</div>
</div>
</div>
<div class="primary__sidebar">
<div class="module">
<div class="module__header">
<h3>Metrics</h3>
</div>
<div class="module__body">
<div class="metric">
<div class="metric__figure metric__figure--green">240,725</div>
<div class="metric__title">Customers</div>
</div>
<div class="metric">
<div class="metric__figure metric__figure--orange">5%</div>
<div class="metric__title">Customers who report errors</div>
</div>
<div class="metric">
<div class="metric__figure metric__figure--red">25,435</div>
<div class="metric__title">Lost sales due to errors</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="app__footer">
<p>&copy; 2016 Dynamomegacorp Inc.</p>
</div>
</div>
</body>
</html>
Raw
main.css
/*Resets*/
*,
*:before,
*:after {
box-sizing: inherit;
}
h1, h2, h3, h4, h5, h6{
margin: 0;
}
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
table {
border-collapse: collapse;
max-width: 100%;
}
th {
padding: 0.5em;
border: 1px solid #ddd;
background-color: #ccc;
text-align: left;
}
td {
padding: 0.5em;
border: 1px solid #ddd;
background-color: #fff;
}
p {
margin-top: 0;
}
img {
max-width: 100%;
height: auto;
}
/* App CSS */
.app {
font-family: Arial, Helvetica, sans-serif;
max-width: 62.5em;
margin: 0 auto;
}
.app__header {
background-color: cornflowerblue;
padding: 0.75em;
color: #fff;
}
.app__footer {
background-color: #666;
padding: 0.75em;
color: #fff;
}
/* Module */
.module {
background-color: #eee;
border: 1px solid #ddd;
font-size: 1rem;
margin-bottom: 1.5em;
}
.module__body {
padding: 0.75em;
}
.module__header {
padding: 0.75em;
border-bottom: 1px solid #ddd;
}
.module__footer {
padding: 0.75em;
border-top: 1px solid #ddd;
}
.primary {
display: flex;
flex-flow: column wrap;
flex: 0 auto;
}
.primary__content {
padding: 0.75em;
}
.primary__sidebar {
padding: 0.75em;
}
.table__header {
padding: 0.75em 0;
}
.table__body {
overflow-x: scroll;
}
.table__footer {
padding: 0.75em 0;
font-style: italic;
font-size: 0.75em;
}
.metric {
text-align: center;
padding: 0.75em;
background-color: #fff;
border: 1px solid #ddd;
margin-bottom: 0.75em;
}
.metric__figure {
font-size: 4em;
font-weight: 700;
}
.metric__figure--green {
color: forestgreen;
}
.metric__figure--orange {
color: darkorange;
}
.metric__figure--red {
color: red;
}
.metric__title {
font-size: 0.8em;
}
/* Block */
.chart {
border: 1px solid grey;
background-color: #fff;
padding: 0.75em;
display: flex;
flex: 0 auto;
flex-flow: column wrap;
}
.message {
font-style: italic;
border-left: 0.25em solid;
padding: 0.25em 0.25em 0.25em 0.5em;
}
.message--success {
color: forestgreen;
border-color: forestgreen;
}
.message--alert {
color: red;
border-color: red;
}
/* With default base font of 16px, 48em = 768px */
@media only screen and (min-width:48em) {
.table__body {
overflow-x: visible;
}
.primary {
flex-flow: row;
}
.chart {
flex-flow: row;
}
}
Raw
main.js
import {charts} from './charts';
charts();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment