<%
    def getChart
        chartData = {
                'chart': {
                    'caption': 'Server CPU Utilization',
                    'subcaption': 'food.hsm.com',
                    'lowerLimit': '0',
                    'upperLimit': '100',
                    'numberSuffix': '%',
                    'valueAbovePointer': '0',
                    'editmode': '1'
                },
                'colorRange': {
                    'color': [{
                        'minValue': '0',
                        'maxValue': '35',
                        'label': 'Low',
                        'code': '#1aaf5d'
                    }, {
                        'minValue': '35',
                        'maxValue': '70',
                        'label': 'Moderate',
                        'code': '#f2c500'
                    }, {
                        'minValue': '70',
                        'maxValue': '100',
                        'label': 'High',
                        'code': '#c02d00'
                    }]
                },
                'pointers': {
                    'pointer': [{
                        'value': '72.5'
                    }]
                }
        }

        # Chart rendering 
        chart = Fusioncharts::Chart.new({
                width: "700",
                height: "400",
                type: "hlineargauge",
                renderAt: "chartContainer",
                dataSource: chartData
            })

        chart.addEvent("realtimeUpdateComplete", "onUpdate");
        return chart
    end
%>

<script>
    function onUpdate(eventObj) {
        document.getElementById("dataUpdate").innerHTML = "Previous value: " + eventObj.data.prevData + "&nbsp;<br/>Updated value: " + eventObj.data.data.split('=')[1];
    }
</script>

<h3>Example of data update event</h3>
<div id="chartContainer"></div>
<%= getChart.render() %>
<br/>
        <div>
            <p id ="dataUpdate">Updated data will appear here</p>
        </div>
<br/>
<br/>
<a href="index">Go Back</a>
