FusionCharts API-Methods: zoomOut
Created using FusionCharts Suite XT - www.fusioncharts.com
HTML
<script src="https://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="https://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
<script src="https://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<!-- This sample shows the usage of the zoomOut() method -->
<div id="indicatorDiv">
<div class="text-center">
<div id="data1" class="mb-20"></div>
<div id="chart-container">FusionCharts will render here</div>
</div>
</div>
CSS
body {
padding: 5px;
margin: 0 auto;
}
strong{
font-weight: bold;
}
.text-center {
text-align: center;
}
p {
margin: 10px auto;
}
.mb-20 {
margin-bottom: 20px;
}
#indicatorDiv {
width: 500px;
font-family:'Arial', 'Helvetica';
font-size: 13px;
}
#zoom_out {
height: 25px;
font-size: 13px;
}
JavaScript
FusionCharts.ready(function () {
var visitChart = new FusionCharts({
type: 'zoomline',
renderAt: 'chart-container',
width: '450',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Unique Website Visitors",
"subcaption": "Last year",
"yaxisname": "Unique Visitors",
"xaxisname": "Date",
"yaxisminValue": "800",
"yaxismaxValue": "1400",
"forceAxisLimits": "1",
"pixelsPerPoint": "0",
"lineThickness": "1",
"compactdatamode": "1",
"labelHeight": "30",
"captionFontSize": "13",
"subCaptionFontSize": "12",
"showValue": "1", // NOT WORKING
"theme": "fint"
},
"categories": [{
"category": ["Jan 0","Jan 02","Jan 03","Jan 04","Jan 05"]
}],
"dataset": [{
"seriesname": "harrysfoodmart.com",
"data": [
{value:"978"},
{value:"976"},
{value:"955"},
{value:"981"},
{value:"999"}
]
}, {
"seriesname": "harrysfashion.com",
"data": [
{value:"1053"},
{value:"1057"},
{value:"1084"},
{value:"1082"},
{value:"1098"}
]
}]
}
});
visitChart.render();
});