Showing a text message or dialog on FusionCharts

HTML

<script src="http://static.fusioncharts.com/code/red/19835/FusionCharts.js"></script>
<script src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script>
<script src="http://canvg.googlecode.com/svn/trunk/StackBlur.js"></script>
<script src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script>
<h1>Show Text Message on FusionCharts</h1>

<div class="sxs" id="chartcard">
    <div id="chart-container" class="chart"></div>
</div>
<p>
    <button disabled="disabled" id="simplemessage">Simple Message</button>
    <button disabled="disabled" id="modalmessage">Modal Message</button>
    <button disabled="disabled" id="cancelablemodalmessage">Cancelable Modal Message</button>
    <button disabled="disabled" id="hidemessage">Hide Message</button>
</p>

CSS

@import url(http://fonts.googleapis.com/css?family=Finger+Paint);

body {
    font-family: Verdana;
    font-size: 12px;
    line-height: 18px;
}

h1, h2 {
    font-family: 'Finger Paint', cursive;
}

a {
    text-decoration: none;
}

li {
    margin-bottom: 8px;
}

.sxs {
    display: inline-block;
    padding: 0 10px;
    margin: 10px;
    box-shadow:1px 1px 3px #aaa;
    width: 500px;
    height: 400px;
    border-radius: 3px;
    background: #ffffff;
}

JavaScript

FusionCharts && FusionCharts.addEventListener("ready", function () {
    var win = window,
        doc = win.document,
        FusionCharts = this,
        
        // We create a new FusionCharts and render it at a specified container element.
        chart = new FusionCharts({
            renderAt: "chart-container",
            width: 500,
            height: 350,
            type: "doughnut3d",
            dataSource: {
                "chart": {
                    "caption": "Industrial Growth Rate",
                    "subcaption": "(Country)",
                    "decimals": "0",
                    "startingangle": "70"
                },
                "data": [
                    { "label": "France", "value": "17" },
                    { "label": "India", "value": "12" },
                    { "label": "Brazil", "value": "18" },
                    { "label": "USA", "value": "8", "issliced": "1" },
                    { "label": "Australia", "value": "10", "issliced": "1" },
                    { "label": "Japan", "value": "16", "issliced": "1" }, 
                    { "label": "England", "value": "11" },
                    { "label": "Nigeria", "value": "12" },
                    { "label": "Italy", "value": "8" },
                    { "label": "China", "value": "10" },
                    { "label": "Canada", "value": "19" },
                    { "label": "Germany", "value": "15" }
                ]
            }
        }).render();

    chart.addEventListener("rendered", function (e) {
        var simpleMessageButton = document.getElementById("simplemessage"),
            modalMessageButton = document.getElementById("modalmessage"),
            cancelableMessageButton = document.getElementById("cancelablemodalmessage"),
            hideMessageButton = document.getElementById("hidemessage");
        
        simpleMessageButton.removeAttribute("disabled");
        modalMessageButton.removeAttribute("disabled");
       ...