FusionCharts - Setting the distance between consecutive dataplots in Zoom Line Chart
Created using FusionCharts Suite XT - www.fusioncharts.com
by Ayan Bhadury
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/themes/fusioncharts.theme.fint.js"></script>
<div id="chart-container">FusionCharts will render here</div>
JavaScript
FusionCharts.ready(function () {
var visitChart = new FusionCharts({
type: 'zoomline',
renderAt: 'chart-container',
width: '600',
height: '400',
dataFormat: 'json',
dataSource: {
"chart" : {
"showvalues" : "0",
"caption" : "% Rooms Sold",
"xaxisname" : "Occupancy Date",
"yaxisname" : "% Rooms Sold",
"syaxisname" : "Revenue",
"chartRightMargin" : 52,
"paletteThemeColor" : "5599BB",
"showBorder" : "1",
"formatNumber" : "0",
"formatnumberscale" : "0",
"dataseparator" : "|",
"compactdatamode": "1",
"xaxisname": "Date"
},
"vTrendlines" : [{
"line" : [{
"startIndex" : "11",
"displayValue" : "System Today",
"color" : "009933",
"dashed" : "1",
"showOnTop" : "1"
}
]
}
],
"categories" : [{
"category" :"Sun 01-May-2016|Mon 02-May-2016|Tue 03-May-2016|Wed 04-May-2016|Thu 05-May-2016|Fri 06-May-2016|Sat 07-May-2016|Sun 08-May-2016|Mon 09-May-2016|Tue 10-May-2016|Wed 11-May-2016|Thu 12-May-2016|Fri 13-May-2016|Sat 14-May-2016|Sun 15-May-2016|Mon 16-May-2016|Tue 17-May-2016|Wed 18-May-2016|Thu 19-May-2016|Fri 20-May-2016|Sat 21-May-2016|Sun 22-May-2016|Mon 23-May-2016|Tue 24-May-2016|Wed 25-May-2016|Thu 26-May-2016|Fri 27-May-2016|Sat 28-May-2016|Sun 29-May-2016|Mon 30-May-2016|Tue 31-May-2016"
}
],
"dataset" : [
{
"seriesname" : "Actual",
"englishSeriesName" : "Rooms Sold",
"color" : "#01539c",
"dashed" : "0",
"data" : "68.82|62.58|73.12|100.00|83.23|80.43|100.00|99.14|67.10|100.00|100.86|70.75|71.18|83.87|70.54|93.76|100.43|99.57|82.15|93.33|74.84|56.34|57.42|63.01|73.12|78.49|82.15|65.81|41.51|41.51|60.43"
}, {
"seriesname" : "Transient",
"englishSeriesName" : "Transient",
"color" : "#0084ff",
"dashed" : "0",
"data"...