Skip to content

Instantly share code, notes, and snippets.

@smowtion
Created December 10, 2013 10:43
Show Gist options
  • Select an option

  • Save smowtion/7888734 to your computer and use it in GitHub Desktop.

Select an option

Save smowtion/7888734 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id='visualization' ></div>
</body>
</html>
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart5);
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'time');
data.addColumn('number', 'value');
data.addColumn('number', 'points');
data.addColumn({type: 'string', role:'annotation'});
data.addColumn({type: 'string', role:'annotationText'});
data.addRows([
['12:00', 1, null, null, null],
['13:00', 5, null, null, null],
['14:00', 8, 8, 'A', 'This is Point A'],
['15:00', 12, null, null, null],
['16:00', 11, 11, 'B', 'This is Point B'],
['17:00', 15, null, null, null]
]);
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {
series: {
0: {
// set any applicable options on the first series
},
1: {
// set the options on the second series
lineWidth: 0,
pointSize: 5,
visibleInLegend: false
}
}
});
}
function drawChart5() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number', 'Links');
data.addRows(29);
data.setValue(1, 0, 'Oct 16, 2011');
//data.setValue(1, 1, 0);
//data.setValue(2, 0, 'Oct 20, 2011');
//data.setValue(2, 1, 0);
//data.setValue(3, 0, 'Nov 12, 2011');
//data.setValue(3, 1, 0);
//data.setValue(4, 0, 'Nov 19, 2011');
//data.setValue(4, 1, 0);
data.setValue(5, 0, 'May 16, 2012');
//data.setValue(5, 1, 0);
//data.setValue(6, 0, 'Jun 28, 2012');
//data.setValue(6, 1, 0);
data.setValue(7, 0, 'Aug 25, 2012');
//data.setValue(7, 1, 0);
//data.setValue(8, 0, 'Oct 24, 2012');
//data.setValue(8, 1, 0);
//data.setValue(9, 0, 'Jan 4, 2013');
//data.setValue(9, 1, 0);
data.setValue(10, 0, 'Mar 2, 2013');
//data.setValue(10, 1, 0);
//data.setValue(11, 0, 'Mar 14, 2013');
//data.setValue(11, 1, 0);
//data.setValue(12, 0, 'Mar 30, 2013');
data.setValue(12, 1, 1502119);
data.setValue(13, 0, 'Apr 13, 2013');
data.setValue(13, 1, 1561209);
data.setValue(14, 0, 'Apr 14, 2013');
data.setValue(14, 1, 1561209);
data.setValue(15, 0, 'Apr 22, 2013');
data.setValue(15, 1, 1565393);
data.setValue(16, 0, 'May 8, 2013');
data.setValue(16, 1, 1573747);
data.setValue(17, 0, 'May 12, 2013');
data.setValue(17, 1, 1573747);
data.setValue(18, 0, 'May 28, 2013');
data.setValue(18, 1, 1573747);
data.setValue(19, 0, 'Jun 13, 2013');
data.setValue(19, 1, 1547980);
data.setValue(20, 0, 'Jul 6, 2013');
data.setValue(20, 1, 1615059);
data.setValue(21, 0, 'Sep 2, 2013');
data.setValue(21, 1, 1673092);
data.setValue(22, 0, 'Sep 30, 2013');
data.setValue(22, 1, 1673092);
data.setValue(23, 0, 'Oct 26, 2013');
data.setValue(23, 1, 1725497);
data.setValue(24, 0, 'Nov 14, 2013');
data.setValue(24, 1, 1743740);
data.setValue(25, 0, 'Nov 15, 2013');
data.setValue(25, 1, 1743740);
data.setValue(26, 0, 'Nov 25, 2013');
data.setValue(26, 1, 1739153);
data.setValue(27, 0, 'Dec 7, 2013');
data.setValue(27, 1, 1736957);
google_result = new google.visualization.AreaChart(document.getElementById('visualization'));
var options = {
title: 'Chart',
legend: {position: 'none'},
pointSize : 5,
series: [{color: 'blue', pointSize: 4}],
//tooltip: {trigger: 'none'},
vAxis: {
format: '$'
}
};
google_result.draw(data, options );
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment