FusionCharts -Zoom Scatter Chart
HTML
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.zoomscatter.js"></script>
<!-- Scatter chart example
-->
<div id="chart-container">FusionCharts will render here</div>
JavaScript
FusionCharts.ready(function() {
var myChart = new FusionCharts({
type: 'zoomscatter',
renderAt: 'chart-container',
width: '100%',
height: '375',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Comparative Advertisements of top 3 media",
"subcaption": "Based on orders",
"baseFont": "Comic Sans",
"captionFontSize": "14",
"xAxisName": "Number of advertisements(per month)",
"xaxismaxvalue": "500",
"yAxisName": "Number of orders(per month)",
"yaxismaxvalue": "10000",
"xaxisminvalue": "0",
"showBorder": "0",
"showAlternateHGridColor": "1",
"showAlternateVGridColor": "1",
"paletteColors": "7EFFAB,FFEE02,FF646F",
"bgcolor": "#ffffff",
"canvasBgColor": "#ffffff",
"legendBorderAlpha": "0",
"legendshadow": "0",
"showAxisLines": "1",
"yAxisNameFontBold": "0",
"xAxisNameFontBold": "0",
"plotTooltext": "$seriesName: <br> Number of Advertisement - $xvalue <br> Number of orders - $yvalue"
},
"categories": [{
"category": [{
"x": "50",
"label": "50"
}, {
"x": "100",
"label": "100"
}, {
"x": "150",
"label": "150"
}, {
"x": "200",
"label": "200"
}, {
"x": "250",
"label": "250"
}, {
"x": "300",
"label": "300"
}, {
"x": "350",
"label": "350"
}, {
"x": "400",
"label": "400"
}, {
"x": "450",
"label": "450"
}, {
"x": "500",
"label": "500"
}]
}],
"dataset": [{
"seriesname": "Newspaper",
"showregressionline": "0",
"anchorradius": "3",
"anchorbgcolor": "7EFFAB",
...