<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="LineGraph.aspx.vb" Inherits="EnsinoBasico.LineGraph" %>

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load("visualization", "1", { packages: ["corechart"], language:'pt-PT'});
        google.setOnLoadCallback(drawChart);

        function drawChart() {

            var data = new google.visualization.DataTable();
			var options = {};
			
			if( '<%= TemMultiSerie%>' === 'True' ){
			
				data = google.visualization.arrayToDataTable(<%= TheData%>);
			
				options = { 	
						title: '<%= Titulo%>',
						fontName: 'Trebuchet MS, Arial',
						fontSize: 10,
						series: {
							1: {curveType: 'function'}							
						},
						chartArea: {
							left: 30,
							width: '92%', 
							height: '82%'
						},
						explorer: {
							axis: 'horizontal',
							keepInBounds: true,
							maxZoomIn: 0.1,
							maxZoomOut: 1.5,
							actions: ['dragToZoom', 'rightClickToReset'],
						},
						legend: {
							position: 'bottom',
							alignment: 'start'
						},
						hAxis:{							
							format: 'yy/MM/dd',
							textPosition: 'out',
							viewWindowMode: 'pretty'						
						},
						vAxis:{							
							textPosition: 'out',
							viewWindowMode: 'pretty',
							minValue: 0,
							viewWindow: {
								min:0
							}
						},						
						focusTarget: 'category'							
					};
				
				var formatter = new google.visualization.DateFormat({pattern: 'dd/MM/yyyy'});
				formatter.format(data, 0);
				
			} else
			{
				data.addColumn('date', 'X');
				data.addColumn('number', 'N.º acessos');
											
				data.addRows(<%= TheData%>);	
				
				options = { 
							fontName: 'Trebuchet MS, Arial',
							fontSize: 10,
							series: {
								1: {curveType: 'function'}
							},
							chartArea: {
								left: 30,
								width: '96%', 
								height: '82%'
							},
							explorer: {
								axis: 'horizontal',
								keepInBounds: true,
								maxZoomIn: 0.1,
								maxZoomOut: 1.5,
								actions: ['dragToZoom', 'rightClickToReset'],
							},
							legend: {
								position: 'none'
							},
							hAxis:{
								format: 'yy/MM/dd',
								textPosition: 'out',
								viewWindowMode: 'pretty',
								legend: {position: 'in'},
								titlePosition: 'in',
								gridlines:{
									count: -1,
									units: {
										months: {format: ['yyyy-MMM']}                            
									}
								},
								minorGridlines: {
									units: {
										days: {format: ['dd']}
									}
								}
							},
							vAxis:{
								textPosition: 'out',
								viewWindowMode: 'pretty',
								minValue: 0
							}
						};						
			}
				
            var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
            chart.draw(data, options);
			
        }

        // Para re-dimensionar o gráfico quando se muda o tamanho do browser
        if (document.addEventListener) {
            window.addEventListener('resize', drawChart);
        }
        else if (document.attachEvent) {
            window.attachEvent('onresize', drawChart);
        }
        else {
            window.resize = drawChart;
        }
    </script>
    <style type="text/css">
        html {
            height: 100%;
        }
        body {
            min-height: 100%;
            margin: 0;
            font-family: Trebuchet MS, Arial;
        }
        #chart_div {
            width: 100%;
            height: <%= Altura%>;
        }
        .ToolTipButton 
        {
            position: relative;
            display: block;
            float: right;
            height: 20px;
            width: 20px;
            z-index: 10;
            margin: 2px;
            border: 1px solid;
            border-radius: 15px;
            background-color: #3842FF;
            color: White;
            text-align: center;
            cursor: default;
        }
        #ToolTip
        {
            position: fixed;
            display: block;
            right: 30px;
            width: auto;
            z-index: -1;
            padding: 10px;
            margin-top: 5px;
            opacity: 0.9;            
            font-size: 8.25pt;
            font-family: inherit;            
            background-color: #FFE6A8;            
        }        
        .ToolTipButton:hover + #ToolTip
        {
            z-index: 10;
        }
    </style>
</head>
<body>
    <div class="ToolTipButton">?</div>
    <div id="ToolTip">Selecionar uma zona do gráfico, com o botão esquerdo do rato premido, para ter uma vista mais pormenorizada desse intervalo.
        <br />Para repor a vista inicial clicar no botão direito do rato.
    </div>
    <div id="chart_div">
    </div>
</body>
</html>
