or how to get from:
to this:
in 5 minutes.
It uses the same technique we used with the googlemaps. Create a new narrative view.
In the prefix part put:
<!--Get an empty map-->
<img src="http://chart.apis.google.com/chart?cht=t&chm=europe&chs=440x220" id="GD_mapImg"/>
<!--chm ==> geographical area (africa, asia, europe, middle_east, south_america, usa, world)-->
<!--chs ==> canvas size max 440X220-->
<!--more info http://code.google.com/intl/nl/apis/chart/ --><script type="text/javascript">
// setting up parameters
var chartURL = "http://chart.apis.google.com/chart?cht=t&chtm=europe&chs=440x220&chds=1,6";
var chartBGColor = "&chf=bg,s,EAEAEA";//specify the gradient: <default color>, <start of gradient>,.., <end of gradient>
var chartPalette = "&chco=AEF5EB,EFE6CE,DFAE6B,1F6913,D94801,A63603,7F2704";var chartDataLabels = new Array();
var chartData = new Array();
In the Narrative part put:
// Use the push command to fill the array:
chartDataLabels.push('@1');
chartData.push(@3);
In the postfix part put:
// putting it all together
chartURL = chartURL + chartBGColor + chartPalette + "&chld=" + chartDataLabels.toString().replace(/,/g,'') + "&chd=t:" + chartData.toString();;
// now get the image from Google Chart
document.getElementById('GD_mapImg').src = chartURL;
</script>
Remember to check the HTML box:
There are maps for africa, asia, europe, middle_east, south_america, usa and the world. For more info see: http://code.google.com/intl/nl/apis/chart/
Till Next Time
This article is also published on http://knowledge.ciber.nl
