<?php
############################################################################
#
#   Module:     wxnoaatemps.php
#   Purpose:    Display a graph of temperature data from dailynoaareport files.
#   Author:     Murry Conarroe <murry@murry.com>
#              
############################################################################
# This program is free software; you can redistribute it and/or
# modify it under the terms of the GNU General Public License
# as published by the Free Software Foundation; either version 2
# of the License, or (at your option) any later version.
#
# This program is distributed in the hope that it will be useful,
# but WITHOUT ANY WARRANTY; without even the implied warranty of
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
# GNU General Public License for more details.
#
# You should have received a copy of the GNU General Public License
# along with this program; if not, write to the Free Software
# Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111-1307, USA
############################################################################
#   This document uses Tab 4 Settings
############################################################################
#   History
# 2010-08-21 1.0 Inital Release
# 2010-08-21 1.01 Changed Position of Legend
# 2010-08-21 1.2 Fix when lowest temp below zero and no data for every day of the year (including leap day)
# 2010-12-14 1.21 Added function to display error message if jpgraph files not found
############################################################################ 
//include_once("Settings.php");
//include_once("common.php");
#################   User Settings   ###############################
$loc = "../";            # Set to location of NOAA report files
$jploc = "../jpgraph/" ; # Set to location of jpgraph files
$first_year_of_data = "2012";  # First year of NOAA data that is available
$temp_type = 'C' ;  # Set to F or C for Farenheit or Celcius
$month_names = array('Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec');
$do_cache = false; # Set to true to cache data for up to 24 hours.
$cache_location = "./cache/"; # Set to location of cache file. Chmod to 666 or 777 so that it is writeable; 
$SITE['viewscr'] = 'sce';  // Password for View Source Function 
#################   End of User Settings   ###############################

error_reporting(E_ALL & ~E_NOTICE);
check_sourceview_mc();
require ("wxnoaacsvdata.php");

$temp_increments = 5 + (5*('F' == strtoupper($temp_type))); 

$max_temp_scale = 5 + (ceil(max($yeardata[0])/$temp_increments))*$temp_increments;
$min_temp_scale = (floor(min(array_filter($yeardata[11]))/$temp_increments))*$temp_increments;
$ytickPositions = $ytickLabels = array();
$t = $min_temp_scale;

for ($i = 0; $t <= $max_temp_scale; $i++){
    $ytickPositions[$i] = $t;
    $t = $t+($temp_increments*2);
} 

 if ('F' == strtoupper($temp_type)){
    $temp_unit = "°F";
 }    
else
    $temp_unit = "°C";
if ($graph_interval == 1) {   
    $tickPositions = array(0,31,60,91,121,152,182,213,244,274,305,335);
    $record_high_data = $yeardata[0];
    $record_low_data = $yeardata[1];
    $average_high_data = $yeardata[2];    
    $average_low_data = $yeardata[3]; 
    $average_mean_data = $yeardata[4];    
} else {
    $tickPositions = array(0,1,2,3,4,5,6,7,8,9,10,11);   
    $record_high_data = $yeardata[10];
    $record_low_data = $yeardata[11];
    $average_high_data = $yeardata[12];    
    $average_low_data = $yeardata[13]; 
    $average_mean_data = $yeardata[14];
}

$tickLabels = $month_names;

################# Functions ####################################

function create_image1(&$value,$value1)
{
    //Set the image width and height
    $width = 400;
    $height = 100;

    //Create the image resource
    $image = ImageCreate($width, $height);

    //We are making three colors, white, black and gray
    $white = ImageColorAllocate($image, 255, 255, 255);
    $black = ImageColorAllocate($image, 0, 0, 0);
    $grey = ImageColorAllocate($image, 204, 204, 204);

    //Make the background black
    ImageFill($image, 0, 0, $grey);

    //Add randomly generated string in white to the image
    ImageString($image, 5, 40, 20, $value, $black);
    ImageString($image, 5, 40, 60, $value1, $black);

    //Tell the browser what kind of file is come in
//    header("Content-Type: image/jpeg");

    //Output the newly created image in jpeg format
//    ImageJpeg($image);

    //Free up resources
    ImageDestroy($image);
}  

function check_sourceview_mc () {
    global $SITE;
    
    if ( isset($_GET['view']) && $_GET['view'] == $SITE['viewscr'] ) {
        $filenameReal = __FILE__;
        $download_size = filesize($filenameReal);
        header('Pragma: public');
        header('Cache-Control: private');
        header('Cache-Control: no-cache, must-revalidate');
        header("Content-type: text/plain");
        header("Accept-Ranges: bytes");
        header("Content-Length: $download_size");
        header('Connection: close');
        readfile($filenameReal);
        exit;
    }
} 

############################################################################
# End of Page
############################################################################
?>     


<script type="text/javascript"> 

eval(<?php echo  "'var mes =  ".json_encode($month_names)."'" ?>);
eval(<?php echo  "'var rechdata =  ".json_encode($record_high_data)."'" ?>);
eval(<?php echo  "'var recldata =  ".json_encode($record_low_data)."'" ?>);
eval(<?php echo  "'var avghdata =  ".json_encode($average_high_data)."'" ?>);
eval(<?php echo  "'var avgldata =  ".json_encode($average_low_data)."'" ?>);
eval(<?php echo  "'var avgmdata =  ".json_encode($average_mean_data)."'" ?>);

</script>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<META NAME="SUBJECT" CONTENT="Grafico Vantage Pro Davis">
<META NAME="DESCRIPTION" CONTENT="grafico dinamico automático">
<META NAME="KEYWORDS" CONTENT=" meteo, lluvia, climograma, temperatura, temperature, station, climogram, Davis, Pro, Davis Vantage Pro,presion, UV, sol,">
<META NAME="REVISIT-AFTER" CONTENT="5 DAYS">
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=9" >
<META NAME="LANGUAGE" CONTENT="es-ES">
<meta http-equiv="content-type" content="text/plain; charset=ISO-8859-1">
<title>Meteo San Sebastian Arriola / Climograma</title>

	  
	  <!-- 1. Add these JavaScript inclusions in the head of your page -->
<script type="text/javascript" src="../graficos-highcharts/jquery.min.js"></script>		   
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/themes/sand-signika.js"></script>
	  <!-- They can change skies.js by the following: dark-blue.js / dark-green.js / dark-unica.js /  gray.js / grid-light.js / grid.js / sand-signika.js 
    and choose the option that they like-->

	  <!-- 2. Add the JavaScript to initialize the chart on document ready -->
	  <script type="text/javascript">  
	function comArr(unitsArray) { 
		var outarr = [];
		for (var i = 0; i < dTime.length; i++) {
		 outarr[i] = [dTime[i], unitsArray[i]];
		}
	  return outarr;
	} 
	
$(function () {
	var chart;		  
		 $(document).ready(function() { 
var highchartsOptions = Highcharts.setOptions(Highcharts.theme);		 
		 Highcharts.setOptions({
		lang: {
            months: ["Enero "," Febrero "," Marzo "," Abril "," Mayo "," Junio "," Julio "," Agosto "," Septiembre "," Octubre "," Noviembre "," Dicembre"],
            weekdays: ["Dom "," Lun "," Mar "," Mie "," Jue "," Vie "," Sab"],
			shortMonths: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul','Ago', 'Sept', 'Oct', 'Nov', 'Dec'],
            decimalPoint: ',',
            resetZoom: 'Reset zoom',
            resetZoomTitle: 'Reset zoom à 1:1',
            downloadPNG: "Descargar en formato PNG imagen",
            downloadJPEG: "Descargar en formato JPEG imagen",
            downloadPDF: "Descargar en formato PDF documento",
            downloadSVG: "Descargar en formato SVG vector imagen",
            exportButtonTitle: "Exportar imagen o documento",
            printChart: "Imprimir el gráfico",
            loading: "Cargando..."
		}
	  });
        chart = new Highcharts.Chart({
            chart: {
              renderTo: 'container',
				          zoomType: 'x',
                  marginTop: 48,
				          marginBottom: 70,
				          alignTicks: false,
            },
//                    Título
			title: {
				text: 'Average monthly temperature since March 2012',
				x: -0 //center
			},
//                     Subtítulo
            subtitle: {
                text: ' Data obtained with Weatherdisplay. Automatic update',
                 align: 'center',
                 x: 5,
                 y:30
            },
            
// Créditos (nota a pié de página))            
			credits: {
      
      position: {
                align: 'right',
                x: -10,
                verticalAlign: 'bottom',
	              y: -30
                },
      
			text: 'Source: Meteo San Sebastián.   © Météo Villarzel',
			href: ''
         			},
		  legend: {
            align: 'center',
            enabled: false,
            backgroundColor: '#FCFFC5'
        },		
			xAxis: {
	        categories: (mes),
	        tickmarkPlacement: 'on',
	        lineWidth: 0,
			

	    },
			yAxis: [{ // 1er yAxis (numero 0)
			gridLineWidth: 1,
//      				max: 25,
//              min: -5,
			startOnTick: true,
				labels: {
					formatter: function() {
						return this.value +'';
					},
					style: {
						color: '#FF0000'
					}
				},
				title: {
					text: '',
					style: {
						color: '#FF0000'
					}
				},
			}, ],
      
// tooltip     
      
		tooltip: { formatter: function() { 
                var s = '<b><span style="color:#000000;font-size:small; font-weight:800">'+ this.x+'</span></b>';             
                $.each(this.points, function(i, point) {
                var unit = {
					'Record Highs': ' °C',
					'Average Highs': ' °C',
					'Mean Temp.': ' °C',
					'Average Lows': ' °C',
					'Record Lows': ' °C'



					}[this.point.series.name];                
                    s = s + '<br>' + '<span style="color:'+ point.series.color +'">' + point.series.name + '</span> : '	 +Highcharts.numberFormat(point.y,1,","," ")
					   + unit;
		});
		return s;
		},
		shared: true
	    },
			

//                      Series     

		plotOptions: {
				series: {
					marker: {
					enabled: false
					},animation: {
					duration: 4000
					}
				}
			},
			series: [
      
       
				{

				name: 'Record Highs',
				color: 'red',
				pointPadding: -0.1,
        pointWidth: 30,
				yAxis: 0,
				type: 'line',
				data: (rechdata),
				},
        
        
        {
				name: 'Average Highs',
				zIndex: 1,
				yAxis: 0,
				color: 'orange',
				lineWidth: 3,
				type: 'line',
				data: (avghdata),				
				},
				
				{
				name: 'Mean Temp.',
				zIndex: 1,
				yAxis: 0,
				color: 'green',
				lineWidth: 3,
				type: 'line',
				data: (avgmdata),				
				},
        {
				name: 'Average Lows',
				zIndex: 1,
				yAxis: 0,
				color: 'blue',
				lineWidth: 3,
				type: 'line',
				data: (avgldata),				
				},
        
{
				name: 'Record Lows',
				zIndex: 1,
				yAxis: 0,
				color: 'aqua',
				lineWidth: 3,
				type: 'line',
				data: (recldata),				
				}

			  ]
        
        
		});
	  });
	});
	
   </script>
   </head>
   <body>

	  <div id="container" style="width: 660px; height: 400px; margin: 0 auto"></div>


   </body>
</html