FusionCharts - Gallery Example - Realtime Area Chart in Javascript. chartCleared API call

Created using FusionCharts Suite XT - www.fusioncharts.com

by Siva Subramaniam

HTML

<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
<!-- 
    Simple example showing stock price in every 5 sec interval using Real Time Area Chart.
-->
<div id="chart-container">FusionCharts will render here</div>

<div>
    <div id="indicatorDiv">Event name: <b> chartCleared </b> 
        <br>
        <p>This event is raised when the entire canvas is cleared by calling clearChart or by clicking the context menu in real-time charts</p>
        <p>The following details can be obtained from the argObj parameter of the event when the chart is cleared. (Please click clear chart from the button at bottom left to view the table)</p>
    </div>
    <div id="clear-message"></div>
    <div id="table-container">
        <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>
    <button id="clear">Clear Chart</button>

CSS

#header {
    display: none;
}
#indicatorDiv {
    width: 500px;
    font-family:'Arial', 'Helvetica';
    font-size: 14px;
}
p {
    margin-top: 20px;
    margin-bottom: 20px;
}
.parameter-name, .parameter-value {
    width: 250px;
    font-weight: bold;
    text-align: center;
    float: left;
}
#attrs-table {
    text-align: center;
    width: 500px;
}
.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 btn = document.getElementById('clear');
    btn.addEventListener('click', function(e) {
        stockPriceChart.clearChart();
    });
    var stockPriceChart = new FusionCharts({
        id: "stockRealTimeChart",
        type: 'realtimearea',
        renderAt: 'chart-container',
        width: '500',
        height: '300',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Real-time stock price monitor",
                "subCaption": "Harry's SuperMart",
                "xAxisName": "Time",
                "yAxisName": "Stock Price",
                "numberPrefix": "$",
                "refreshinterval": "5",
                "yaxisminvalue": "35",
                "yaxismaxvalue": "36",
                "numdisplaysets": "10",
                "labeldisplay": "rotate",
                "showValues": "0",
                "showRealTimeValue": "0",
                                
                 //Cosmetics
                "paletteColors" : "#0075c2,#1aaf5d",
                "baseFontColor" : "#333333",
                "baseFont" : "Helvetica Neue,Arial",
                "captionFontSize" : "14",
                "subcaptionFontSize" : "14",
                "subcaptionFontBold" : "0",
                "showBorder" : "0",
                "bgColor" : "#ffffff",
                "showShadow" : "0",
                "canvasBgColor" : "#ffffff",
                "canvasBorderAlpha" : "0",
                "divlineAlpha" : "100",
                "divlineColor" : "#999999",
                "divlineThickness" : "1",
                "divLineIsDashed" : "1",
                "divLineDashLen" : "1",
                "divLineGapLen" : "1",
                "usePlotGradientColor" : "0",
                "showplotborder" : "0",

                "showXAxisLine" : "1",
                "xAxisLineThickness" : "1",
                "xAxisLineColor" : "#999999",
                "showAlternateHGridColor" :...