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

<!DOCTYPE html>


<html style="width:100%; height:100%;">
<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 src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>​
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
        //google.load("visualization", "1.1", { packages: ["corechart", "geochart"] });
        google.load("visualization", "1", { packages: ["corechart", "bar"] });
        google.setOnLoadCallback(drawChart);
            
        function TextSizePixels(text, fontFamily, fontSize) {
            var mSpan = document.createElement("span");
            mSpan.innerText = text;
            mSpan.style.display = 'none';
            mSpan.style.fontFamily = fontFamily;
            mSpan.style.fontSize = fontSize;

            $('body')[0].appendChild(mSpan);

            var size = $(mSpan).width();

            $('body')[0].removeChild(mSpan);

            return size;
        }

        window.onresize = drawChart;
        
        function drawChart() {
            var data = google.visualization.arrayToDataTable(<%= TheData%>);
        
            var size = TextSizePixels('<%= bigStr%>', 'Arial', '10px');

            // margem
            size += 45;
            console.log(size);

            var bodyWidth = $('body').width() - size - 50;

            var options = {
                'title': '<%= Titutlo%>',
                targetAxisIndex: 1,
                chartArea: { left: size, height: '70%', width: bodyWidth },
                legend: { textStyle: { fontName: 'Arial', fontSize: 10 } },
                isStacked: false
            };

            var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
            //var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
            chart.draw(data, options);
            
            document.getElementById('print').onclick = function () {
                //window.open(chart.getImageURI(), "_blank")
                downloadLink = document.createElement('a');
                downloadLink.href = chart.getImageURI();
                downloadLink.download = 'grafico.png';
                downloadLink.click();
            };
        };
    </script>
</head>
<body style="width:100%; height:100%;">
    <!--Div that will hold the pie chart-->
    <div id="chart_div" style="<%=style%>"></div>
    <button id="print">Exportar</button>
    <%=LinkApi%>
</body>
</html>
