Impress with real venn diagrams:
First get your data:
add an extra column with a row count:
Hide it:
add an narrative view:
<img src="" id="venn_chart@9"/> <!-- creates an unique img tag -->
<script type="text/javascript">
var chartURL = "http://chart.apis.google.com/chart?cht=v&chs=200x200&chd=t:@2,@3,@4,@5,@6,@7,@8&chtt=@1&chdl=a|b|c&chdlp=b" ;
/* cht = chart type
chs = chart size
chd = chart data
chtt = chart title
chdl = chart legend
chdlp= chart legend position
more info http://code.google.com/intl/nl/apis/chart/ */
/* get the chart */
document.getElementById('venn_chart@9').src = chartURL;
</script>
Put all together:
How to get chart:
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:
