For this demo, I'll display an Intensity Map with Visitors Locations per Country.
You can see a working example of the AJAX display visitors locations w/ Google Visualization API demo.
1) The Intensity Map
Create an HTML Region.
The source is:
<div id="intensitymap_div" class="google-visualization-intensitymap-container" style="width:440px; height:264px;" />
2) JavaScript Code
<script src="http://www.google.com/jsapi"></script>
<script>
// Load jQuery
google.load("jquery", "1.2.6", {uncompressed:false});
// Load Google Visualization API
google.load('visualization', '1', {packages: ['table', 'intensitymap']});
</script>
<script>
function drawIntensityMap() {
$.ajax({
type: "POST",
url: "wwv_flow.show",
data: {p_flow_id:$('#pFlowId').attr("value"),
p_flow_step_id:$('#pFlowStepId').attr("value"),
p_instance:$('#pInstance').attr("value"),
p_request:"APPLICATION_PROCESS=GET_VISITORS_PER_COUNTRY"
},
dataType: "json",
success: function(data, textStatus){
if ((nb_country = data.length) > 0) {
var map_data = new google.visualization.DataTable();
map_data.addColumn('string', 'Country');
map_data.addColumn('number', 'Visitors');
map_data.addRows(nb_country);
for (i = 0; i < nb_country; i++) {
map_data.setCell(i, 0, data[i].country);
map_data.setCell(i, 1, Number(data[i].visitors));
}
var imap = new google.visualization.IntensityMap($x('intensitymap_div'));
imap.draw(map_data, {});
}
}
});
}
$().ready(function() {
drawIntensityMap();
});
</script>
3) APEX Application Process
DECLARE
l_retval VARCHAR2(32767);
l_rows VARCHAR2(32767);
BEGIN
FOR i IN (SELECT cc.code
,cv.visitors
FROM jq_country_visitors cv
,jq_iso_3166_country_codes cc
WHERE cv.country = cc.country)
LOOP
l_rows := l_rows||'{''country'':'''||i.code||''',''visitors'':'''||i.visitors||'''},';
END LOOP;
l_retval := '['||rtrim(l_rows,',')||']';
htp.prn(l_retval);
END;
A more interesting "Web 2.0" demo could display visitors locations in real time using Google Client Location.
1 comment:
Thanks for this.
I have successfully amended it to display a line chart.
Post a Comment