FusionCharts - Vertical Zero Plane in charts with numeric x-axis
Showing only specific data values of a chart
HTML
<script src="https://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="https://static.fusioncharts.com/code/latest/fusioncharts.zoomscatter.js"></script>
<div id="chartContainer">FusionCharts will render here</div>
JavaScript
FusionCharts.ready(function() {
var selectivityChart = new FusionCharts({
type: 'zoomscatter',
renderAt: 'chartContainer',
width: 600,
height: 400,
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Comparative Advertisements of top 3 media",
"subcaption": "Based on orders",
"xaxismaxvalue": "500",
"yaxismaxvalue": "10000",
"xaxisminvalue": "0",
"bgcolor": "#ffffff",
"legendshadow": "0",
"basefont": "Comic Sans",
"captionfontsize": "14",
"xaxisname": "Number of advertisements(per month)",
"yaxisname": "Number of orders(per month)",
"showborder": "0",
"showalternatehgridcolor": "1",
"showalternatevgridcolor": "1",
"palettecolors": "7EFFAB,FFEE02,FF646F",
"canvasbgcolor": "#ffffff",
"legendborderalpha": "0",
"showaxislines": "1",
"yaxisnamefontbold": "0",
"xaxisnamefontbold": "0",
"plottooltext": "$seriesName: Number of Advertisement - $xvalue Number of orders - $yvalue"
},
"categories": [
{
"category": [
{
"x": 50,
"label": "50",
"stepSkipped": false,
"appliedSmartLabel": true
},
{
"x": 100,
"label": "100",
"stepSkipped": false,
"appliedSmartLabel": true
},
{
"x": 150,
"label": "150",
"stepSkipped": false,
"appliedSmartLabel": true
},
{
"x": 200,
"label": "200",
"stepSkipped": false,
"appliedSmartLabel": true
},
{
"x": 250,
"label": "250",
...