Skip to content

Instantly share code, notes, and snippets.

@nicolas-briemant

nicolas-briemant/index.html

Forked from anonymous/index.html
Last active February 11, 2016 13:57
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 nicolas-briemant/ed1fca46decadcf38cb8 to your computer and use it in GitHub Desktop.
Save nicolas-briemant/ed1fca46decadcf38cb8 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin// source https://jsbin.com/medeqa [Google Charts - Line chart]
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<style id="jsbin-css">
.chart {
width: 620px;
height: 396px;
font-family: sans-serif;
border-color: #006FB3;
border-style: solid;
border-width: 1px 0 1px 0;
background-color: white;
}
.header h1 {
color: #0297C9;
font-size: 16px;
font-weight: normal;
line-height: 48px;
margin: 0 0 0 4px;
}
.header h1 span {
color: #7A7A7A;
font-size: 10px;
margin-left: 12px;
}
.footer p {
color: #7A7A7A;
font-size: 10px;
margin: 0 12px 4px 0;
height: 28px;
line-height: 28px;
float: right;
}
.footer p a {
color: #0297C9;
text-decoration: none;
}
.footer img {
height: 28px;
margin: 0 4px 4px 0;
float: right;
}
/* http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
</style>
</head>
<body>
<div class="chart clearfix">
<div class="header">
<h1>Inflation (CPI)<span>Total annual growth rate, 2010-2014</span></h1>
</div>
<div id="line"></div>
<div class="footer" class="clearfix">
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/0/0d/OECD_logo_new.svg/1280px-OECD_logo_new.svg.png" />
<p>&copy; Source <a href="data.oecd.org">data.oecd.org</a></p>
</div>
</div>
<br />
<div class="chart clearfix">
<div class="header">
<h1>Inflation (CPI)<span>Total annual growth rate, 2010-2014</span></h1>
</div>
<div id="bar"></div>
<div class="footer" class="clearfix">
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/0/0d/OECD_logo_new.svg/1280px-OECD_logo_new.svg.png" />
<p>&copy; Source <a href="data.oecd.org">data.oecd.org</a></p>
</div>
</div>
<script id="jsbin-javascript">
// Load the Visualization API and the corechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('number', 'year');
data.addColumn('number', 'france');
data.addColumn({type: 'string', role:'annotation'});
data.addColumn('number', 'england');
data.addColumn({type: 'string', role:'annotation'});
data.addColumn('number', 'germany');
data.addColumn('number', 'netherlands');
data.addColumn('number', 'wales');
data.addColumn('number', 'australia');
data.addRows(
[
[2000, 1,null,2,null,11,10,3,3],
[2001, 5,null,6,null,15,9,7,5],
[2002, 5,null,3,null,14,9,6,3],
[2003, 7,null,8,null,18,10,9,4],
[2004, 4,null,3,null,15,11,3,4],
[2005, 1,'France avg. 0.25', 2, 'England avg. 0.25',11,9,1,2]
]
);
// Set chart options
var options = {
annotations: {
textStyle: {
fontWeight: 'bold'
}
},
series: {
0: {
color: '#E73741',
lineWidth: 2,
pointSize: 3,
pointShape: 'circle'
},
1: {
color: '#0F8FD9',
lineWidth: 2,
pointSize: 3,
pointShape: 'circle'
},
2: {
pointSize: 15,
pointShape: {
type: 'star',
sides: 4,
rotation: 45,
dent: 0.2
}
},
3: {
pointSize: 10,
pointShape: {
type: 'diamond'
}
}
},
tooltip: {},
width: 620,
height: 314,
chartArea: {
top: 0,
right: 0,
bottom: 40,
left: 0,
'backgroundColor': '#DDE9EF'
},
colors:['#8EA4B1'],
lineWidth: 1,
vAxis: {
maxValue: 25,
minValue: -5,
gridlines: {
color: 'white'
},
textPosition: 'in',
textStyle: {
color: '#575757',
fontSize: 10
},
baseline: 'none'
},
hAxis: {
maxValue: 2006,
minValue: 1999,
gridlines: {
color: 'white',
},
textStyle: {
color: '#575757',
fontSize: 10
}
},
legend: {
position: 'none'
}
};
// Instantiate and draw our chart, passing in some options.
var line = new google.visualization.LineChart(document.getElementById('line'));
line.draw(data, options);
var bar = new google.visualization.ColumnChart(document.getElementById('bar'));
bar.draw(data, options);
}
</script>
<script id="jsbin-source-css" type="text/css">.chart {
width: 620px;
height: 396px;
font-family: sans-serif;
border-color: #006FB3;
border-style: solid;
border-width: 1px 0 1px 0;
background-color: white;
}
.header h1 {
color: #0297C9;
font-size: 16px;
font-weight: normal;
line-height: 48px;
margin: 0 0 0 4px;
}
.header h1 span {
color: #7A7A7A;
font-size: 10px;
margin-left: 12px;
}
.footer p {
color: #7A7A7A;
font-size: 10px;
margin: 0 12px 4px 0;
height: 28px;
line-height: 28px;
float: right;
}
.footer p a {
color: #0297C9;
text-decoration: none;
}
.footer img {
height: 28px;
margin: 0 4px 4px 0;
float: right;
}
/* http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">// Load the Visualization API and the corechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('number', 'year');
data.addColumn('number', 'france');
data.addColumn({type: 'string', role:'annotation'});
data.addColumn('number', 'england');
data.addColumn({type: 'string', role:'annotation'});
data.addColumn('number', 'germany');
data.addColumn('number', 'netherlands');
data.addColumn('number', 'wales');
data.addColumn('number', 'australia');
data.addRows(
[
[2000, 1,null,2,null,11,10,3,3],
[2001, 5,null,6,null,15,9,7,5],
[2002, 5,null,3,null,14,9,6,3],
[2003, 7,null,8,null,18,10,9,4],
[2004, 4,null,3,null,15,11,3,4],
[2005, 1,'France avg. 0.25', 2, 'England avg. 0.25',11,9,1,2]
]
);
// Set chart options
var options = {
annotations: {
textStyle: {
fontWeight: 'bold'
}
},
series: {
0: {
color: '#E73741',
lineWidth: 2,
pointSize: 3,
pointShape: 'circle'
},
1: {
color: '#0F8FD9',
lineWidth: 2,
pointSize: 3,
pointShape: 'circle'
},
2: {
pointSize: 15,
pointShape: {
type: 'star',
sides: 4,
rotation: 45,
dent: 0.2
}
},
3: {
pointSize: 10,
pointShape: {
type: 'diamond'
}
}
},
tooltip: {},
width: 620,
height: 314,
chartArea: {
top: 0,
right: 0,
bottom: 40,
left: 0,
'backgroundColor': '#DDE9EF'
},
colors:['#8EA4B1'],
lineWidth: 1,
vAxis: {
maxValue: 25,
minValue: -5,
gridlines: {
color: 'white'
},
textPosition: 'in',
textStyle: {
color: '#575757',
fontSize: 10
},
baseline: 'none'
},
hAxis: {
maxValue: 2006,
minValue: 1999,
gridlines: {
color: 'white',
},
textStyle: {
color: '#575757',
fontSize: 10
}
},
legend: {
position: 'none'
}
};
// Instantiate and draw our chart, passing in some options.
var line = new google.visualization.LineChart(document.getElementById('line'));
line.draw(data, options);
var bar = new google.visualization.ColumnChart(document.getElementById('bar'));
bar.draw(data, options);
}</script></body>
</html>
Raw
jsbin.medeqa.css
.chart {
width: 620px;
height: 396px;
font-family: sans-serif;
border-color: #006FB3;
border-style: solid;
border-width: 1px 0 1px 0;
background-color: white;
}
.header h1 {
color: #0297C9;
font-size: 16px;
font-weight: normal;
line-height: 48px;
margin: 0 0 0 4px;
}
.header h1 span {
color: #7A7A7A;
font-size: 10px;
margin-left: 12px;
}
.footer p {
color: #7A7A7A;
font-size: 10px;
margin: 0 12px 4px 0;
height: 28px;
line-height: 28px;
float: right;
}
.footer p a {
color: #0297C9;
text-decoration: none;
}
.footer img {
height: 28px;
margin: 0 4px 4px 0;
float: right;
}
/* http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
Raw
jsbin.medeqa.js
// Load the Visualization API and the corechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('number', 'year');
data.addColumn('number', 'france');
data.addColumn({type: 'string', role:'annotation'});
data.addColumn('number', 'england');
data.addColumn({type: 'string', role:'annotation'});
data.addColumn('number', 'germany');
data.addColumn('number', 'netherlands');
data.addColumn('number', 'wales');
data.addColumn('number', 'australia');
data.addRows(
[
[2000, 1,null,2,null,11,10,3,3],
[2001, 5,null,6,null,15,9,7,5],
[2002, 5,null,3,null,14,9,6,3],
[2003, 7,null,8,null,18,10,9,4],
[2004, 4,null,3,null,15,11,3,4],
[2005, 1,'France avg. 0.25', 2, 'England avg. 0.25',11,9,1,2]
]
);
// Set chart options
var options = {
annotations: {
textStyle: {
fontWeight: 'bold'
}
},
series: {
0: {
color: '#E73741',
lineWidth: 2,
pointSize: 3,
pointShape: 'circle'
},
1: {
color: '#0F8FD9',
lineWidth: 2,
pointSize: 3,
pointShape: 'circle'
},
2: {
pointSize: 15,
pointShape: {
type: 'star',
sides: 4,
rotation: 45,
dent: 0.2
}
},
3: {
pointSize: 10,
pointShape: {
type: 'diamond'
}
}
},
tooltip: {},
width: 620,
height: 314,
chartArea: {
top: 0,
right: 0,
bottom: 40,
left: 0,
'backgroundColor': '#DDE9EF'
},
colors:['#8EA4B1'],
lineWidth: 1,
vAxis: {
maxValue: 25,
minValue: -5,
gridlines: {
color: 'white'
},
textPosition: 'in',
textStyle: {
color: '#575757',
fontSize: 10
},
baseline: 'none'
},
hAxis: {
maxValue: 2006,
minValue: 1999,
gridlines: {
color: 'white',
},
textStyle: {
color: '#575757',
fontSize: 10
}
},
legend: {
position: 'none'
}
};
// Instantiate and draw our chart, passing in some options.
var line = new google.visualization.LineChart(document.getElementById('line'));
line.draw(data, options);
var bar = new google.visualization.ColumnChart(document.getElementById('bar'));
bar.draw(data, options);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment