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

<!DOCTYPE html>

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

    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', { 'packages': ['treemap'] });
        google.charts.setOnLoadCallback(drawChart);
        function drawChart() {
            var data = google.visualization.arrayToDataTable(<%= TheData%>);

            tree = new google.visualization.TreeMap(document.getElementById('chart_div'));

            tree.draw(data, {
                minColor: '#f00',
                midColor: '#ddd',
                maxColor: '#0d0',
                headerHeight: 15,
                fontColor: 'black',
                showScale: true,
                generateTooltip: showStaticTooltip
            });

            function showStaticTooltip(row, size, value) {
                return '<div style="background:#fd9; padding:5px; font-size:12px; border-style:thin">' + data.getValue(row, 0) + '</a></div>';
            }
        }
    </script>
</head>

<body style="background-color: #192B37; overflow: hidden;">
    <div id="chart_div"></div>
</body>
</html>
