Skip to content

Instantly share code, notes, and snippets.

@smowtion
Created October 3, 2014 04:40
Show Gist options
  • Select an option

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

Select an option

Save smowtion/cda92cde69bab6494f57 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-git2.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDlN48smo55Cl48b71XpXuFD7OhJ5pktls&sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.12/src/infobox.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="google_countrymap" class="text-center" style="width:100%;">
<img alt="loading..." src="http://s.statstool.com/templates/common_assets/img/preloader.gif" />
</div>
<script id="jsbin-javascript">
function drawGoogleMaps() {
var data = new google.visualization.DataTable();
data.addRows(6);
data.addColumn('string', 'Country');
data.addColumn('number', 'Daily Visitors(%)');
data.setValue(0, 0, 'United States');
data.setValue(0, 1, 22.2);
data.setValue(1, 0, 'India'); data.setValue(1, 1, 8);
data.setValue(2, 0, 'Brazil');
data.setValue(2, 1, 4.1);
data.setValue(3, 0, 'United Kingdom');
data.setValue(3, 1, 3.2);
data.setValue(4, 0, 'Germany');
data.setValue(4, 1, 3.2);
data.setValue(5, 0, 'vn');
data.setValue(5, 1, 6.2);
var options = {
dataMode: 'regions',
width: '100%',
colorAxis: {colors: ['#e7711c', '#4374e0']} // orange to blue
};
var chart = new google.visualization.GeoMap(document.getElementById('google_countrymap'));
chart.draw(data, options);
}
if(google!=null){
// Load the Visualization API library and the piechart library.
google.load('visualization', '1.0', { 'packages':['corechart','geomap'] });
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawGoogleMaps);
if($( window ).width()< 400){
var window_width= $( window ).width()- 10;
var old_src = $("#alexaGraphic").attr('src');
var new_src = old_src.replace("w=400","w="+window_width);
$("#alexaGraphic").attr('src',new_src);
}
//set resize
$(window).resize(function(){
initialize();// google maps
drawGoogleMaps();
});
};
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-git2.js"><\/script>
<script type="text/javascript" src="https://www.google.com/jsapi"><\/script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDlN48smo55Cl48b71XpXuFD7OhJ5pktls&sensor=false"><\/script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.12/src/infobox.js"><\/script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="google_countrymap" class="text-center" style="width:100%;">
<img alt="loading..." src="http://s.statstool.com/templates/common_assets/img/preloader.gif" />
</div>
</body>
</html></script>
<script id="jsbin-source-javascript" type="text/javascript">function drawGoogleMaps() {
var data = new google.visualization.DataTable();
data.addRows(6);
data.addColumn('string', 'Country');
data.addColumn('number', 'Daily Visitors(%)');
data.setValue(0, 0, 'United States');
data.setValue(0, 1, 22.2);
data.setValue(1, 0, 'India'); data.setValue(1, 1, 8);
data.setValue(2, 0, 'Brazil');
data.setValue(2, 1, 4.1);
data.setValue(3, 0, 'United Kingdom');
data.setValue(3, 1, 3.2);
data.setValue(4, 0, 'Germany');
data.setValue(4, 1, 3.2);
data.setValue(5, 0, 'vn');
data.setValue(5, 1, 6.2);
var options = {
dataMode: 'regions',
width: '100%',
colorAxis: {colors: ['#e7711c', '#4374e0']} // orange to blue
};
var chart = new google.visualization.GeoMap(document.getElementById('google_countrymap'));
chart.draw(data, options);
}
if(google!=null){
// Load the Visualization API library and the piechart library.
google.load('visualization', '1.0', { 'packages':['corechart','geomap'] });
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawGoogleMaps);
if($( window ).width()< 400){
var window_width= $( window ).width()- 10;
var old_src = $("#alexaGraphic").attr('src');
var new_src = old_src.replace("w=400","w="+window_width);
$("#alexaGraphic").attr('src',new_src);
}
//set resize
$(window).resize(function(){
initialize();// google maps
drawGoogleMaps();
});
};
</script></body>
</html>
function drawGoogleMaps() {
var data = new google.visualization.DataTable();
data.addRows(6);
data.addColumn('string', 'Country');
data.addColumn('number', 'Daily Visitors(%)');
data.setValue(0, 0, 'United States');
data.setValue(0, 1, 22.2);
data.setValue(1, 0, 'India'); data.setValue(1, 1, 8);
data.setValue(2, 0, 'Brazil');
data.setValue(2, 1, 4.1);
data.setValue(3, 0, 'United Kingdom');
data.setValue(3, 1, 3.2);
data.setValue(4, 0, 'Germany');
data.setValue(4, 1, 3.2);
data.setValue(5, 0, 'vn');
data.setValue(5, 1, 6.2);
var options = {
dataMode: 'regions',
width: '100%',
colorAxis: {colors: ['#e7711c', '#4374e0']} // orange to blue
};
var chart = new google.visualization.GeoMap(document.getElementById('google_countrymap'));
chart.draw(data, options);
}
if(google!=null){
// Load the Visualization API library and the piechart library.
google.load('visualization', '1.0', { 'packages':['corechart','geomap'] });
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawGoogleMaps);
if($( window ).width()< 400){
var window_width= $( window ).width()- 10;
var old_src = $("#alexaGraphic").attr('src');
var new_src = old_src.replace("w=400","w="+window_width);
$("#alexaGraphic").attr('src',new_src);
}
//set resize
$(window).resize(function(){
initialize();// google maps
drawGoogleMaps();
});
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment