Skip to content

Instantly share code, notes, and snippets.

@cameres

cameres/data.json

Created February 27, 2017 21:47
Show Gist options
  • Save cameres/9ca8534590cef06fc7681d2d966414ad to your computer and use it in GitHub Desktop.
Save cameres/9ca8534590cef06fc7681d2d966414ad to your computer and use it in GitHub Desktop.
Download ZIP
Raw
data.json
[
{
"date": "2016-01-01",
"line_1": 55.7460227373914,
"line_3": 65.55089867445142,
"line_2": 116.05179943545978
},
{
"date": "2016-01-02",
"line_1": 71.7460227373914,
"line_3": 81.55089867445142,
"line_2": 132.05179943545977
},
{
"date": "2016-01-03",
"line_1": 82.7460227373914,
"line_3": 92.55089867445142,
"line_2": 143.05179943545977
},
{
"date": "2016-01-04",
"line_1": 85.7460227373914,
"line_3": 95.55089867445142,
"line_2": 146.05179943545977
},
{
"date": "2016-01-05",
"line_1": 79.7460227373914,
"line_3": 89.55089867445142,
"line_2": 140.05179943545977
},
{
"date": "2016-01-06",
"line_1": 95.7460227373914,
"line_3": 105.55089867445142,
"line_2": 156.05179943545977
},
{
"date": "2016-01-07",
"line_1": 92.7460227373914,
"line_3": 102.55089867445142,
"line_2": 153.05179943545977
},
{
"date": "2016-01-08",
"line_1": 99.7460227373914,
"line_3": 109.55089867445142,
"line_2": 160.05179943545977
},
{
"date": "2016-01-09",
"line_1": 88.7460227373914,
"line_3": 98.55089867445142,
"line_2": 149.05179943545977
},
{
"date": "2016-01-10",
"line_1": 68.7460227373914,
"line_3": 78.55089867445142,
"line_2": 129.05179943545977
},
{
"date": "2016-01-11",
"line_1": 54.7460227373914,
"line_3": 64.55089867445142,
"line_2": 115.05179943545977
},
{
"date": "2016-01-12",
"line_1": 33.7460227373914,
"line_3": 43.55089867445142,
"line_2": 94.05179943545977
},
{
"date": "2016-01-13",
"line_1": 55.7460227373914,
"line_3": 65.55089867445142,
"line_2": 116.05179943545977
},
{
"date": "2016-01-14",
"line_1": 59.7460227373914,
"line_3": 69.55089867445142,
"line_2": 120.05179943545977
},
{
"date": "2016-01-15",
"line_1": 54.7460227373914,
"line_3": 64.55089867445142,
"line_2": 115.05179943545977
},
{
"date": "2016-01-16",
"line_1": 47.7460227373914,
"line_3": 57.55089867445142,
"line_2": 108.05179943545977
},
{
"date": "2016-01-17",
"line_1": 64.7460227373914,
"line_3": 74.55089867445142,
"line_2": 125.05179943545977
},
{
"date": "2016-01-18",
"line_1": 58.7460227373914,
"line_3": 68.55089867445142,
"line_2": 119.05179943545977
},
{
"date": "2016-01-19",
"line_1": 34.7460227373914,
"line_3": 44.55089867445142,
"line_2": 95.05179943545977
},
{
"date": "2016-01-20",
"line_1": 45.7460227373914,
"line_3": 55.55089867445142,
"line_2": 106.05179943545977
},
{
"date": "2016-01-21",
"line_1": 33.7460227373914,
"line_3": 43.55089867445142,
"line_2": 94.05179943545977
},
{
"date": "2016-01-22",
"line_1": 13.7460227373914,
"line_3": 23.550898674451417,
"line_2": 74.05179943545977
},
{
"date": "2016-01-23",
"line_1": 0.7460227373913995,
"line_3": 10.550898674451417,
"line_2": 61.05179943545977
},
{
"date": "2016-01-24",
"line_1": 15.7460227373914,
"line_3": 25.550898674451417,
"line_2": 76.05179943545977
},
{
"date": "2016-01-25",
"line_1": 14.7460227373914,
"line_3": 24.550898674451417,
"line_2": 75.05179943545977
},
{
"date": "2016-01-26",
"line_1": 31.7460227373914,
"line_3": 41.55089867445142,
"line_2": 92.05179943545977
},
{
"date": "2016-01-27",
"line_1": 46.7460227373914,
"line_3": 56.55089867445142,
"line_2": 107.05179943545977
},
{
"date": "2016-01-28",
"line_1": 60.7460227373914,
"line_3": 70.55089867445142,
"line_2": 121.05179943545977
},
{
"date": "2016-01-29",
"line_1": 56.7460227373914,
"line_3": 66.55089867445142,
"line_2": 117.05179943545977
},
{
"date": "2016-01-30",
"line_1": 69.7460227373914,
"line_3": 79.55089867445142,
"line_2": 130.05179943545977
}
]
Raw
index.html
<html lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name='viewport' content='width=device-width, initial-scale=1'>
<title>mg-sandbox</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/metrics-graphics/2.11.0/metricsgraphics.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/metrics-graphics/2.11.0/metricsgraphics.js"></script>
</head>
<body>
<div class="container">
<div class='col-lg-2'></div>
<div class='col-lg-8 text-center' id='fake_users2'></div>
<div class='col-lg-2'></div>
</div>
<script src="index.js"></script>
</body>
</html>
Raw
index.js
d3.json('data.json', function(data) {
data = MG.convert.date(data, 'date');
MG.data_graphic({
title: "Multi-Line Chart",
description: "This line chart contains multiple lines.",
data: data,
width: 600,
height: 200,
right: 40,
target: '#fake_users2',
y_accessor: ['line_1','line_2','line_3'],
legend: ['line_1','line_2','line_3'],
legend_target: '.legend',
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment