<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="MiniDashGraphBlack.aspx.vb"
    Inherits="i9.Dashboard.MiniDashGraphBlack" %>

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart', 'controls']});
      google.charts.setOnLoadCallback(drawStuff);

        function drawStuff() {
            var programmaticSlider = new google.visualization.ControlWrapper({
                'controlType': 'NumberRangeFilter',
                'containerId': 'programmatic_control_div',
                'options': {
                    'textStyle': { 'fontSize': '6', 'color': 'white' },
                    'filterColumnLabel': 'N.º FD',
                    'ui': {
                        'label': 'Faltas disciplinares',
                        'labelStacking': 'vertical',
                        }
                }
            });

            var programmaticChart = new google.visualization.ChartWrapper({
                'chartType': 'PieChart',
                'containerId': 'programmatic_chart_div',
                'options': {
                    'pieSliceText': 'label',
                    'backgroundColor': { 'fill': '#000' },
                    'legend': 'none',
                    'chartArea': { 'left': 10, 'top': 10, 'right': 10, 'bottom': 10 }
                },
                'view': {'columns': [0, 2]}
            });

            var programmaticChartTable = new google.visualization.ChartWrapper({
                'chartType': 'Table',
                'containerId': 'programmatic_table_div',
                'options': {
                    'width': '100%',
                    'height': '300'
                }
            });

            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Aluno');
            data.addColumn('string', 'Processo');
            data.addColumn('number', 'N.º FD');
            data.addColumn('string', 'Disciplinas das faltas');
            data.addColumn('boolean', 'Risco proced. disciplinar');
            
            data.addRows(<%=TheData %>);

            console.log(data);

            var dashboard = new google.visualization.Dashboard(
                document.getElementById('programmatic_dashboard_div'));

            dashboard.bind(programmaticSlider, [programmaticChart, programmaticChartTable]);
            dashboard.draw(data);
        }

    </script>
</head>
<body>
    <div id="programmatic_dashboard_div" style="background-color: Black;">
        <div id="programmatic_control_div" style="width: 300px; background-color: Black;
            font-family: Tahoma; color: White;">
        </div>
        <div id="programmatic_chart_div" style="float: left; width: 250px; height: 250px;
            background-color: Black;">
        </div>
        <div id="programmatic_table_div" style="float: right; background-color: Black; width: 600px;">
        </div>
    </div>
</body>
</html>
