FusionCharts Venn Diagram using Scatter Chart
HTML
<script src="http://static.fusioncharts.com/code/xt/5416/FusionCharts.js"></script>
<center>
<p>Venn Diagram using JavaScript Scatter Chart</p>
<p id="venn">Loading chart. Please wait...</p>
</center>
CSS
body {
font-family: Verdana, Arial;
font-size: 12px;
line-height: 18px
}
p {
margin-top: 12px;
margin-bottom: 18px;
}
JavaScript
FusionCharts.render({
type: 'scatter',
renderAt: 'venn',
width: '500',
height: '400',
dataFormat: 'JSON',
dataSource: {
"chart": {
"caption": "Distributed Service Access",
"showyaxisvalues": "0",
"showlabels": "0",
"numdivlines": "0",
"numvdivlines": "0",
"yaxismaxvalue": "100",
"xaxismaxvalue": "100",
"showvlimits": "0",
"setadaptivexmin": "0",
"anchorsides": "2",
"anchorborderthickness": "2",
"anchoralpha": "30",
"anchorborderalpha": "100",
"anchorbgalpha": "100",
"showvalues": "1",
"useroundedges": "1",
"legendposition": "right",
"animation": "0"
},
"dataset": [
{
"seriesname": "Server 1",
"color": "ff0000",
"anchorbgcolor": "ff0000",
"data": [
{
"y": "66",
"x": "40",
"anchorradius": "70"}
]},
{
"seriesname": "Server 2",
"color": "0000ff",
"anchorbgcolor": "0000ff",
"data": [
{
"y": "66",
"x": "60",
"anchorradius": "70"}
]},
{
"seriesname": "Server 3",
"color": "00ff00",
"anchorbgcolor": "00ff00",
"data": [
{
"y": "44",
"x": "50",
"anchorradius": "70"}
]}
]
}
});