<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="GaugeGraph.aspx.vb" Inherits="InovarPAA.GaugeGraph" %>

<!DOCTYPE html>

<html>
<head>
    <style>
        #print {
            float: right;
            font-family: Verdana;
            color: #0B62A4;
            font-size: 10px;
            right: 10px;
            bottom: 0;
            position: fixed;
            cursor: pointer;
        }

        a {
            font-family: Verdana;
            float: right;
            font-size: 10px;
            position: fixed;
            right: 80px;
            bottom: 2px;
        }
    </style>

    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load("visualization", "1", { packages: ["gauge"] });
        google.setOnLoadCallback(drawChart);
        
        function drawChart() {

            var data = google.visualization.arrayToDataTable(<%= TheEmptyData%>);

            var options = {
                width: '100%', height: '100%',
                redFrom: 90, redTo: 100,
                yellowFrom: 75, yellowTo: 90,
                minorTicks: 5,
                animation:{
                    duration: 5000,
                    easing: 'out'},
            };

            var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
            chart.draw(data, options);

            //needed to make the annimation run
            var filledData = google.visualization.arrayToDataTable(<%= TheData%>);
            chart.draw(filledData, options);
        }
    </script>
</head>

<body>
    <div id="chart_div" style="<%=style%>"></div>
    <%--<button id="print">Exportar</button>--%>
</body>
</html>
