FusionCharts API-Event: zoomReset

Created using FusionCharts Suite XT - www.fusioncharts.com

by FusionCharts

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.zune.js"></script>
<!-- This sample shows the event parameters, and their values, when zoomReset event is triggered-->
<div id="indicatorDiv">Event name: <strong> zoomReset </strong> 
    
    <p>Triggered every time a zoom line chart is reset to its original values.</p>
    <p>The zoomReset event, when triggered, provides the <strong> eventObj </strong> object parameter (object containing information generic to all events) to the event handler.</p>
    <p>Drag the mouse pointer over the chart to zoom. Click the reset chart button in the top-right corner of the chart to trigger the event. Scroll down to the table rendered below the chart to view information contained in the eventObj object.</p>
    
</div>
<div id="chart-container">FusionCharts will render here</div>
<div>
    <div>
        <div id="header">
            <div class="parameter-name">Parameter Name</div>
            <div class="parameter-value">Parameter Value</div>
        </div>
        <div id="attrs-table"></div>
    </div>
</div>

CSS

body {
    padding: 5px;
    margin: 0 auto;
}
strong {
  font-weight: bold;
}
#header {
    display: none;
}
#indicatorDiv {
    width: 500px;
    font-family:'Arial', 'Helvetica';
    font-size: 14px;
}
p {
    margin-top: 20px;
    margin-bottom: 20px;
}
#attrs-table {
    text-align: center;
    width: 500px;
}
.parameter-name, .parameter-value {
    width: 250px;
    font-weight: bold;
    text-align: center;
    float: left;
}
.title, .value {
    float:left;
    width: 230px;
    height: 20px;
    background: #fff;
    padding: 5px 10px;
}
.title {
    clear: left;
}
.title:nth-child(4n+1), .value:nth-child(4n+2) {
    background: rgb(0, 117, 194);
    color: #fff;
}
.value {
    word-wrap: break-word;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

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",
                    "paletteColors": "#0075c2,#1aaf5d",
                    "captionFontSize": "14",
                    "subcaptionFontSize": "14",
                    "subcaptionFontBold": "0",
                    "showBorder": "0",
                    "bgColor": "#ffffff",
                    "baseFont": "Helvetica Neue,Arial",
                    "showCanvasBorder": "0",
                    "showShadow": "0",
                    "showAlternateHGridColor": "0",
                    "canvasBgColor": "#ffffff",
                    "yaxisname": "Unique Visitors",
                    "xaxisname": "Date",
                    "yaxisminValue": "800",
                    "yaxismaxValue": "1400",
                    "forceAxisLimits": "1",
                    "pixelsPerPoint": "0",
                    "pixelsPerLabel": "30",
                    "lineThickness": "1",
                    "compactdatamode": "1",
                    "dataseparator": "|",
                    "labelHeight": "30",
                    "scrollheight": "10",
                    "flatScrollBars": "1",
                    "scrollShowButtons": "0",
                    "scrollColor": "#cccccc",
                    "legendBgAlpha": "0",
                    "legendBorderAlpha": "0",
                    "legendShadow": "0",
                    "legendItemFontSize": "10",
                    "legendItemFontColor": "#666666"
            },
                "categories": [{
                "category": "Jan 01|Jan 02|Jan 03|Jan 04|Jan 05|Jan 06|Jan 07|Jan 08|Jan 09|Jan 10|Jan 11|Jan 12|Jan 13|Jan 14|Jan 15|Jan 16|Jan 17|Jan 18|Jan 19|Jan 20|Jan 21|Jan 22|Jan...