<!-- Temp -->
var temp = [7,8,8,9,10,11,12,12,12,12,13,12,10];
var temptime = ['08.56','09.26','09.56','10.26','10.56','11.26','11.56','12.26','12.56','13.26','13.56','14.26','14.55'];
<!-- Rain -->
var rain = [0,0,0,0,0,0,0,0,0,0,0,0,1];
var raintime = ['08.56','09.26','09.56','10.26','10.56','11.26','11.56','12.26','12.56','13.26','13.56','14.26','14.55'];
<!-- Wind -->
var wind = [3,6,7,8,7,8,7,7,6,6,7,6,5];
var windtime = ['12.56','13.06','13.16','13.26','13.36','13.46','13.56','14.06','14.16','14.26','14.36','14.46','14.55'];
<!-- Gust -->
var gust = [13,18,19,19,19,16,18,16,14,14,13,14,10];
var gusttime = ['12.56','13.06','13.16','13.26','13.36','13.46','13.56','14.06','14.16','14.26','14.36','14.46','14.55'];
<!-- Winddir -->
var winddir = [177,221,216,213,248,238,227,212,217,233,246,275,300];
var winddirtime = ['12.56','13.06','13.16','13.26','13.36','13.46','13.56','14.06','14.16','14.26','14.36','14.46','14.55'];
<!-- Baro -->
var baro = [1017,1017,1017,1017,1017,1016,1016,1016,1016,1016,1016,1017,1017];
var barotime = ['12.56','13.06','13.16','13.26','13.36','13.46','13.56','14.06','14.16','14.26','14.36','14.46','14.55'];
<!-- Chill -->
var chill = [6,7,7,9,10,11,12,12,12,12,13,12,10];
var chilltime = ['08.56','09.26','09.56','10.26','10.56','11.26','11.56','12.26','12.56','13.26','13.56','14.26','14.55'];
<!-- Rain -->
var rain = [0,0,0,0,0,0,0,0,0,0,0,0,1];
var raintime = ['08.56','09.26','09.56','10.26','10.56','11.26','11.56','12.26','12.56','13.26','13.56','14.26','14.55'];
<!-- Dew -->
var dew = [6,7,0,8,9,9,10,9,9,8,10,9,8];
var dewtime = ['08.56','09.26','09.56','10.26','10.56','11.26','11.56','12.26','12.56','13.26','13.56','14.26','14.55'];
<!-- Heat -->
var heat = [7,8,8,9,10,11,12,12,12,12,13,12,10];
var heattime = ['08.56','09.26','09.56','10.26','10.56','11.26','11.56','12.26','12.56','13.26','13.56','14.26','14.55'];
<!-- Hum -->
var hum = [97,97,97,96,94,92,89,82,84,79,78,77,86];
var humtime = ['08.56','09.26','09.56','10.26','10.56','11.26','11.56','12.26','12.56','13.26','13.56','14.26','14.55'];
<!-- Wind Dir -->
    $(function() {
	$('.windd').sparkline([340,20], {
    type: 'pie',
    sliceColors: ['#F0F8FF','#3173B1'],
    offset: 139,
	chartRangeMin: 0,
	chartRangeMax: 360,
    borderWidth: 1,
    borderColor: '#3173B1',
	tooltipClassname: 'spark',
	tooltipPrefix:'Bearing: 219',
	tooltipSuffix: '&deg;',
	tooltipFormat:'<span style="color: {{color}}"></span>{{prefix}}{{y}}{{suffix}}',
	tooltipChartTitle: 'Avg. Wind Dir.' + '<br>' + ' Last 3 hours'
			});
      });
     	  

     	   
  $(function() {
      	   $('.temp').sparkline(temptime, {
    		type: 'line',
    		lineColor: '#F0F8FF',
    		fillColor: '#F0F8FF',
    		spotColor: '#F0F8FF',
    		minSpotColor: '#F0F8FF',
    		maxSpotColor: '#F0F8FF',
			numberFormatter: function(y) {return (('0000'+(y.toFixed(2))).slice (-5));},
            width: 60,
			tooltipClassname: 'spark',
			tooltipPrefix: 'Time: ',
			tooltipFormat:'<span style="color: {{color}}"></span> {{prefix}}{{y}}{{suffix}}',
			tooltipChartTitle: 'Temperature Today.'
      });
      	$('.temp').sparkline(temp, {
			composite: true,
	        type: 'line',
    		lineColor: '#3173B1',
    		fillColor: '#F0F8FF',
    		spotColor: '#00007f',
    		minSpotColor: '#007fff',
    		maxSpotColor: '#ff0000',
			tooltipClassname: 'spark',
			tooltipFormat:'<span style="color: {{color}}"></span>{{prefix}}{{y}}{{suffix}}',
			tooltipPrefix: 'temp: ',
            tooltipSuffix: " &#176;C",
            width: 60
            
      });
   });	  
    	   
    	     
     	   
     	   
  $(function() {
      	   $('.heat').sparkline(heattime, {
    		type: 'line',
    		lineColor: '#F0F8FF',
    		fillColor: '#F0F8FF',
    		spotColor: '#F0F8FF',
    		minSpotColor: '#F0F8FF',
    		maxSpotColor: '#F0F8FF',
			numberFormatter: function(y) {return (('0000'+(y.toFixed(2))).slice (-5));},
            width: 60,
			tooltipClassname: 'spark',
			tooltipPrefix: 'Time: ',
			tooltipFormat:'<span style="color: {{color}}"></span> {{prefix}}{{y}}{{suffix}}',
			tooltipChartTitle: 'Heat Index Today.'
      });
      	$('.heat').sparkline(heat, {
			composite: true,
	        type: 'line',
    		lineColor: '#3173B1',
    		fillColor: '#F0F8FF',
    		spotColor: '#00007f',
    		minSpotColor: '#007fff',
    		maxSpotColor: '#ff0000',
			tooltipClassname: 'spark',
			tooltipFormat:'<span style="color: {{color}}"></span>{{prefix}}{{y}}{{suffix}}',
			tooltipPrefix: 'heat: ',
            tooltipSuffix: " &#176;C",
            width: 60
            
            			});
      });
    	  
  $(function() {
      	   $('.hum').sparkline(humtime, {
    		type: 'line',
    		lineColor: '#F0F8FF',
    		fillColor: '#F0F8FF',
    		spotColor: '#F0F8FF',
    		minSpotColor: '#F0F8FF',
    		maxSpotColor: '#F0F8FF',
			numberFormatter: function(y) {return (('0000'+(y.toFixed(2))).slice (-5));},
            width: 60,
			tooltipClassname: 'spark',
			tooltipPrefix: 'Time: ',
			tooltipFormat:'<span style="color: {{color}}"></span> {{prefix}}{{y}}{{suffix}}',
			tooltipChartTitle: 'Humidity Today.'
      });
      	$('.hum').sparkline(hum, {
			composite: true,
	        type: 'line',
    		lineColor: '#3173B1',
    		fillColor: '#F0F8FF',
    		spotColor: '#00007f',
    		minSpotColor: '#007fff',
    		maxSpotColor: '#ff0000',
			tooltipClassname: 'spark',
			tooltipFormat:'<span style="color: {{color}}"></span>{{prefix}}{{y}}{{suffix}}',
			tooltipPrefix: 'hum: ',
            tooltipSuffix: '%',
            width: 60
            
            });
      });
     	  
     	  
$(function() {
      	   $('.dew').sparkline(dewtime, {
    		type: 'line',
    		lineColor: '#F0F8FF',
    		fillColor: '#F0F8FF',
    		spotColor: '#F0F8FF',
    		minSpotColor: '#F0F8FF',
    		maxSpotColor: '#F0F8FF',
			numberFormatter: function(y) {return (('0000'+(y.toFixed(2))).slice (-5));},
            width: 60,
			tooltipClassname: 'spark',
			tooltipPrefix: 'Time: ',
			tooltipFormat:'<span style="color: {{color}}"></span> {{prefix}}{{y}}{{suffix}}',
			tooltipChartTitle: 'Dew Point Today.'
      });
      	$('.dew').sparkline(dew, {
			composite: true,
	        type: 'line',
    		lineColor: '#3173B1',
    		fillColor: '#F0F8FF',
    		spotColor: '#00007f',
    		minSpotColor: '#007fff',
    		maxSpotColor: '#ff0000',
			tooltipClassname: 'spark',
			tooltipFormat:'<span style="color: {{color}}"></span>{{prefix}}{{y}}{{suffix}}',
			tooltipPrefix: 'dew: ',
            tooltipSuffix: " &#176;C",
            width: 60
            
      });
   });
    

     $(function() {
      	   $('.chill').sparkline(chilltime, {
    		type: 'line',
    		lineColor: '#F0F8FF',
    		fillColor: '#F0F8FF',
    		spotColor: '#F0F8FF',
    		minSpotColor: '#F0F8FF',
    		maxSpotColor: '#F0F8FF',
			numberFormatter: function(y) {return (('0000'+(y.toFixed(2))).slice (-5));},
            width: 60,
			tooltipClassname: 'spark',
			tooltipPrefix: 'Time: ',
			tooltipFormat:'<span style="color: {{color}}"></span> {{prefix}}{{y}}{{suffix}}',
			tooltipChartTitle: 'Wind Chill Today.'
      });
      	$('.chill').sparkline(chill, {
			composite: true,
	        type: 'line',
    		lineColor: '#3173B1',
    		fillColor: '#F0F8FF',
    		spotColor: '#00007f',
    		minSpotColor: '#007fff',
    		maxSpotColor: '#ff0000',
			tooltipClassname: 'spark',
			tooltipFormat:'<span style="color: {{color}}"></span>{{prefix}}{{y}}{{suffix}}',
			tooltipPrefix: 'Chill: ',
            tooltipSuffix: " &#176;C",
            width: 60
      });
   });
	$(function() {
	  	 $('.wind').sparkline(windtime, {
    		type: 'line',
    		lineColor: '#F0F8FF',
    		fillColor: '#F0F8FF',
    		spotColor: '#F0F8FF',
    		minSpotColor: '#F0F8FF',
    		maxSpotColor: '#F0F8FF',
			numberFormatter: function(y) {return (('0000'+(y.toFixed(2))).slice (-5));},
            width: 60,
			tooltipClassname: 'spark',
		    tooltipChartTitle: 'Wind Speed Today.',
			tooltipFormat:'<span style="color: {{color}}"></span> {{prefix}}{{y}}{{suffix}}',
			tooltipPrefix: 'Time: '
      });
      $('.wind').sparkline(wind, {
	  		composite: true,
	        type: 'line',
    		lineColor: '#3173B1',
    		fillColor: '#F0F8FF',
    		spotColor: '#00007f',
    		minSpotColor: '#007fff',
    		maxSpotColor: '#ff0000',
			tooltipClassname: 'spark',
			tooltipFormat:'<span style="color: {{color}}"> </span>{{prefix}}{{y}}{{suffix}}',
			tooltipPrefix: 'Wind: ',
            tooltipSuffix: " km/h",
            width: 60,
            
              
                        });
   });
	$(function() {
	  	 $('.gust').sparkline(gusttime, {
    		type: 'line',
    		lineColor: '#F0F8FF',
    		fillColor: '#F0F8FF',
    		spotColor: '#F0F8FF',
    		minSpotColor: '#F0F8FF',
    		maxSpotColor: '#F0F8FF',
			numberFormatter: function(y) {return (('0000'+(y.toFixed(2))).slice (-5));},
            width: 60,
			tooltipClassname: 'spark',
		    tooltipChartTitle: 'Gust Speed Today.',
			tooltipFormat:'<span style="color: {{color}}"></span> {{prefix}}{{y}}{{suffix}}',
			tooltipPrefix: 'Time: '
      });
      $('.gust').sparkline(gust, {
	  		composite: true,
	        type: 'line',
    		lineColor: '#3173B1',
    		fillColor: '#F0F8FF',
    		spotColor: '#00007f',
    		minSpotColor: '#007fff',
    		maxSpotColor: '#ff0000',
			tooltipClassname: 'spark',
			tooltipFormat:'<span style="color: {{color}}"> </span>{{prefix}}{{y}}{{suffix}}',
			tooltipPrefix: 'Gust: ',
            tooltipSuffix: " km/h",
            width: 60,
            
                  });
   });
	$(function() {
	  	 $('.winddir').sparkline(winddirtime, {
    		type: 'line',
    		lineColor: '#F0F8FF',
    		fillColor: '#F0F8FF',
    		spotColor: '#F0F8FF',
    		minSpotColor: '#F0F8FF',
    		maxSpotColor: '#F0F8FF',
			numberFormatter: function(y) {return (('0000'+(y.toFixed(2))).slice (-5));},
            width: 60,
			tooltipClassname: 'spark',
		    tooltipChartTitle: 'Wind Direction Today.',
			tooltipFormat:'<span style="color: {{color}}"></span> {{prefix}}{{y}}{{suffix}}',
			tooltipPrefix: 'Time: '
      });
      $('.winddir').sparkline(winddir, {
	  		composite: true,
	        type: 'line',
    		lineColor: '#3173B1',
    		fillColor: '#F0F8FF',
    		spotColor: '#00007f',
    		minSpotColor: '#007fff',
    		maxSpotColor: '#ff0000',
			tooltipClassname: 'spark',
			tooltipFormat:'<span style="color: {{color}}"> </span>{{prefix}}{{y}}{{suffix}}',
			tooltipPrefix: 'Wind: ',
            tooltipSuffix: " WNW",
            width: 60,

      });
   }); 
  $(function() {
      	   $('.rain').sparkline(raintime, {
    		type: 'line',
    		lineColor: '#F0F8FF',
    		fillColor: '#F0F8FF',
    		spotColor: '#F0F8FF',
    		minSpotColor: '#F0F8FF',
    		maxSpotColor: '#F0F8FF',
			numberFormatter: function(y) {return (('0000'+(y.toFixed(2))).slice (-5));},
            width: 60,
			tooltipClassname: 'spark',
			tooltipPrefix: 'Time: ',
			tooltipFormat:'<span style="color: {{color}}"></span> {{prefix}}{{y}}{{suffix}}',
			tooltipChartTitle: 'Rainfall Today.'
      });
      $('.rain').sparkline(rain, {
	  		composite: true,
	        type: 'line',
    		lineColor: '#3173B1',
    		fillColor: '#F0F8FF',
    		spotColor: '#00007f',
    		minSpotColor: '#007fff',
    		maxSpotColor: '#ff0000',
			tooltipClassname: 'spark',
			tooltipFormat:'<span style="color: {{color}}"></span>{{prefix}}{{y}}{{suffix}}',
			tooltipPrefix: 'Rain: ',
            tooltipSuffix: " mm",
            width: 60
		    
      });
   });

     $(function() {
	        $('.baro').sparkline(barotime, {
    		type: 'line',
    		lineColor: '#F0F8FF',
    		fillColor: '#F0F8FF',
    		spotColor: '#F0F8FF',
    		minSpotColor: '#F0F8FF',
    		maxSpotColor: '#F0F8FF',
			numberFormatter: function(y) {return (('0000'+(y.toFixed(2))).slice (-5));},
            width: 60,
			tooltipClassname: 'spark',
			tooltipChartTitle: 'Barometer Today.',
			tooltipFormat:'<span style="color: {{color}}"></span> {{prefix}}{{y}}{{suffix}}',
			tooltipPrefix: 'Time: '
      });
     	    $('.baro').sparkline(baro, {
			composite: true,
	        type: 'line',
    		lineColor: '#3173B1',
    		fillColor: '#F0F8FF',
    		spotColor: '#00007f',
    		minSpotColor: '#007fff',
    		maxSpotColor: '#ff0000',
			numberDigitGroupCount: 6,
			tooltipClassname: 'spark',
			tooltipFormat:'<span style="color: {{color}}"></span>{{prefix}}{{y}}{{suffix}}',
			tooltipPrefix: 'Baro: ',
            tooltipSuffix: " hPa",
            width: 60

      });
       });