FusionCharts - Event Parameters: alertComplete

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.widgets.js"></script>
<!-- alertComplete dataObj -->
<div id="chart-container">FusionCharts will render here</div>
<button id="print">Print</button>
<div>
    <div id="indicatorDiv"><p>Event name: <b> beforePrint </b> </p>
        <p>This event is fired before printing has started after calling print on a chart. The print method is used to print individual charts on a page.</p>
        <p>The following details can be obtained from the evtObj parameter of the event when the chart is about to be printed. (Please click print button)</p>
    </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>

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 salesChart = new FusionCharts({
        type: 'vled',
        renderAt: 'chart-container',
        id: 'myChart',
        width: '200',
        height: '300',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Current Flow on Main Meter",
                    "subcaption": "New York Store",
                    "chartleftmargin": "40",
                    "chartbottommargin": "20",
                    "gaugebgcolor": "#ff0000",
                    "gaugefillcolor": "#1f0601",
                    "lowerlimit": "100",
                    "upperlimit": "400",
                    "numbersuffix": " amp",
                    "bgalpha": "0",
                    "borderalpha": "20",
                    "showborder": "1",
                    "minortmalpha": "0",
                    "animation": "1",
                    "showvalue": "1",
                    "valuespadding": "10",
                    "valuefontbold": "1",
                    "ledgap": "0"
            },
                "colorrange": {
                "color": [{
                    "minvalue": "100",
                        "maxvalue": "400",
                        "code": "#ff0000"
                }]
            },
                "value": "250"
        },
            "events": {
            "rendered": function (evt, data) {
                var btn = document.getElementById('print');
                btn.addEventListener('click', function () {
                    evt.sender.print();
                });
            },
                "beforeprint": function (evtObj) {
                var header = document.getElementById('header');
                header.style.display = 'block';

                var tempDiv = document.createElement('div');
                var attrsTable = document.getElementById('attrs-table');
                var titleDiv, valueDiv;
                // Iterating through all the properties in argObj and...