FusionCharts - Vertical Zero Plane in charts with numeric x-axis
Showing only specific data values of a chart
by FusionCharts
HTML
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<div id="chartContainer">FusionCharts will render here</div>
JavaScript
FusionCharts.ready(function() {
var myChart = new FusionCharts({
"type": "ZoomScatter",
"renderAt": "chartContainer",
"width": "600",
"height": "400",
"dataFormat": "json",
"dataSource": {
"chart": {
"theme": "fusion",
"caption": "Customer Happiness by Response time",
"Charttopmargin": "20",
"yaxisname": "Customer Happiness",
"xaxisname": "Time to respond (in minutes)",
"showAlternateHGridColor": "0",
"yaxismaxvalue": "9",
"showlegend": "0",
"bgcolor": "#40526A",
"bgAlpha": "100",
"canvasbgAlpha": "0",
"baseFontColor": "#F7F3E7",
"divlineAlpha": "100",
"divLineDashed": "0",
"ToolTipBgColor": "#F37C7E",
"rotateYAxisName": "1",
"canvasBorderColor": "#ffffff",
"canvasBorderThickness": ".5",
"canvasBorderAlpha": "100",
"plotTooltext": "<div id='valueDiv'>Response time : <b>$xDataValue</b>, Satisfaction : <b>$yDataValue</b></div>"
},
"dataset": [{
"drawline": "0",
"color": "#6baa01",
"anchorradius": "4",
"anchorbgcolor": "#40526A",
"anchorBorderThickness": "3",
"anchorbordercolor": "#F37C7E",
"data": [{
"id": "tkt01",
"x": "5",
"y": "7.8"
}, {
"id": "tkt02",
"x": "7",
"y": "8.45"
}, {
"id": "tkt03",
"x": "8",
"y": "8.02"
}, {
"id": "tkt04",
"x": "10",
"y": "8.1"
}, {
"id": "tkt05",
"x": "5",
"y": "8.3"
}, {
"id": "tkt06",
"x": "5",
"y": "7"
}, {
"id": "tkt07",
"x": "2",
"y": "7.9"
}, {
"id": "tkt08",
"x": "7",
"y": "9"
}, {
"id": "tkt09",
"x": "6",
"y": "8.5"
}, {
...