128 lines
5.2 KiB
HTML
128 lines
5.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>RequireJS Google Ajax API plugin</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<style>
|
|
.info{background-color:#cfc; border:2px solid #ada; padding:10px 20px; margin:2em 0}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="wrapper">
|
|
<h1>RequireJS + Google Ajax API plugin</h1>
|
|
<div class="info">
|
|
<p>
|
|
This plugin depends on the Async plugin and loads files using the <code>google.load</code> method from the <a href="http://code.google.com/apis/loader/">Google Loader</a>.
|
|
</p>
|
|
<p>
|
|
Notice that it can only load the libraries listed on the <a href="http://code.google.com/apis/loader/#AvailableAPIs">Available APIs section</a>.
|
|
</p>
|
|
</div>
|
|
<h2>Google Charts - corechart</h2>
|
|
<div id="chart_div"></div>
|
|
<h2>Google Charts - geochart</h2>
|
|
<div id="map_canvas" style="width:500px"></div>
|
|
<h2>Google Search API</h2>
|
|
<div id="branding"></div>
|
|
<div id="search_results"> </div>
|
|
</div>
|
|
<script src="../lib/require.js"></script>
|
|
<script>
|
|
require({
|
|
waitSeconds : 15, //make sure it is enough to load all scripts
|
|
paths : {
|
|
//alias to plugins
|
|
async : '../src/async',
|
|
goog : '../src/goog',
|
|
propertyParser : '../src/propertyParser'
|
|
}
|
|
});
|
|
|
|
|
|
//To load google libraries you should follow the format "goog!moduleName,version,packages:[packages],language:en,anotherOption:value"
|
|
require(['goog!visualization,1,packages:[corechart,geochart]', 'goog!search,1'], function(){
|
|
|
|
// visualization + corechart + geochart + search are loaded
|
|
|
|
|
|
// code copied from google charts docs:
|
|
// http://code.google.com/apis/chart/interactive/docs/gallery/piechart.html
|
|
var data = new google.visualization.DataTable();
|
|
data.addColumn('string', 'Task');
|
|
data.addColumn('number', 'Hours per Day');
|
|
data.addRows(5);
|
|
data.setValue(0, 0, 'Work');
|
|
data.setValue(0, 1, 11);
|
|
data.setValue(1, 0, 'Eat');
|
|
data.setValue(1, 1, 2);
|
|
data.setValue(2, 0, 'Commute');
|
|
data.setValue(2, 1, 2);
|
|
data.setValue(3, 0, 'Watch TV');
|
|
data.setValue(3, 1, 2);
|
|
data.setValue(4, 0, 'Sleep');
|
|
data.setValue(4, 1, 7);
|
|
|
|
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
|
|
chart.draw(data, {width: 450, height: 300, title: 'My Daily Activities'});
|
|
|
|
|
|
// code copied from google charts docs:
|
|
// http://code.google.com/apis/chart/interactive/docs/gallery/geochart.html
|
|
var data = new google.visualization.DataTable();
|
|
data.addRows(6);
|
|
data.addColumn('string', 'Country');
|
|
data.addColumn('number', 'Popularity');
|
|
data.setValue(0, 0, 'Germany');
|
|
data.setValue(0, 1, 200);
|
|
data.setValue(1, 0, 'United States');
|
|
data.setValue(1, 1, 300);
|
|
data.setValue(2, 0, 'Brazil');
|
|
data.setValue(2, 1, 400);
|
|
data.setValue(3, 0, 'Canada');
|
|
data.setValue(3, 1, 500);
|
|
data.setValue(4, 0, 'France');
|
|
data.setValue(4, 1, 600);
|
|
data.setValue(5, 0, 'RU');
|
|
data.setValue(5, 1, 700);
|
|
|
|
var options = {};
|
|
|
|
var container = document.getElementById('map_canvas');
|
|
var geochart = new google.visualization.GeoChart(container);
|
|
geochart.draw(data, options);
|
|
|
|
|
|
|
|
//code copied from http://code.google.com/apis/ajax/playground/?exp=libraries#the_hello_world_of_news_search
|
|
//and slightly modified
|
|
|
|
var newsSearch = new google.search.WebSearch(),
|
|
resultHolder = document.getElementById('search_results');
|
|
|
|
function searchComplete() {
|
|
resultHolder.innerHTML = '';
|
|
if (newsSearch.results && newsSearch.results.length > 0) {
|
|
for (var i = 0; i < newsSearch.results.length; i++) {
|
|
var p = document.createElement('p');
|
|
var a = document.createElement('a');
|
|
a.href = newsSearch.results[i].url;
|
|
a.innerHTML = newsSearch.results[i].title;
|
|
p.appendChild(a);
|
|
resultHolder.appendChild(p);
|
|
}
|
|
}
|
|
}
|
|
|
|
newsSearch.setSearchCompleteCallback(this, searchComplete, null);
|
|
newsSearch.execute('RequireJS plugins');
|
|
|
|
// Include the required Google branding
|
|
google.search.Search.getBranding('branding');
|
|
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|