<!-- Temp -->
var temp = [4.5,4.1,4.2,4.4,4.4,4.5,4.4,4,3.9,4,3.8,4.2,4.5];
var temptime = ['04.56','05.30','06.00','06.30','07.00','07.30','08.00','08.30','08.59','09.26','09.56','10.26','10.55'];
<!-- Rain -->
var rain = [1,1.7,1.7,1.7,1.7,1.7,1.7,2,2.2,3.3,3.3,3.3,3.3];
var raintime = ['04.56','05.30','06.00','06.30','07.00','07.30','08.00','08.30','08.59','09.26','09.56','10.26','10.55'];
<!-- Wind -->
var wind = [25,17,16,18,18,19,20,17,17,19,18,16,16];
var windtime = ['08.59','09.06','09.16','09.26','09.36','09.46','09.56','10.06','10.16','10.26','10.36','10.46','10.55'];
<!-- Solar -->
var solar = [0,0,0,0,0,0,0,0,5,20,32,105,192];
var solartime = ['22.56','23.56','00.56','01.56','02.56','03.56','04.56','06.00','07.00','08.00','08.59','09.56','10.55'];
<!-- Baro -->
var baro = [1006.2,1005.9,1005.6,1005.2,1005.2,1005.2,1005.6,1006.2,1006.5,1007.1,1007.4,1007.9,1007.9];
var barotime = ['22.56','23.56','00.56','01.56','02.56','03.56','04.56','06.00','07.00','08.00','08.59','09.56','10.55'];
<!-- Wind Dir -->
    $(function() {
	$('.windd').sparkline([340,20], {
    type: 'pie',
    sliceColors: ['#5B7102','#ffffff'],
    offset: 257,
	chartRangeMin: 0,
	chartRangeMax: 360,
    borderWidth: 1,
    borderColor: '#ffffff',
	tooltipClassname: 'spark',
	tooltipPrefix:'Bearing: 337',
	tooltipSuffix: '&deg;',
	tooltipFormat:'{{prefix}}{{y}}{{suffix}}',
	tooltipChartTitle: 'Avg. Wind Dir.' + '<br>' + ' Last 3 hours'
			});
      });
     	  
$(function() {
      	   $('.temp').sparkline(temptime, {
    		type: 'line',
    		lineColor: '#5B7102',
    		fillColor: '#5B7102',
    		spotColor: '#5B7102',
    		minSpotColor: '#5B7102',
    		maxSpotColor: '#5B7102',
			numberFormatter: function(y) {return (('0000'+(y.toFixed(2))).slice (-5));},
            width: 60,
			height:16,
			tooltipClassname: 'spark',
			tooltipPrefix: 'Time: ',
			tooltipFormat:'{{prefix}}{{y}}{{suffix}}',
			tooltipChartTitle: 'Temperature Today.'
      });
      	$('.temp').sparkline(temp, {
			composite: true,
	        type: 'line',
    		lineColor: '#ffffff',
    		fillColor: '#5B7102',
    		spotColor: '#ffffff',
    		minSpotColor: '#55a9fd',
    		maxSpotColor: '#f23434',
			tooltipClassname: 'spark',
			tooltipFormat:'{{prefix}}{{y}}{{suffix}}',
			tooltipPrefix: 'Temp: ',
            tooltipSuffix: " &#176;C",
            width: 60,
			height:16      });
   });
	$(function() {
	  	 $('.wind').sparkline(windtime, {
    		type: 'line',
    		lineColor: '#5B7102',
    		fillColor: '#5B7102',
    		spotColor: '#5B7102',
    		minSpotColor: '#5B7102',
    		maxSpotColor: '#5B7102',
			numberFormatter: function(y) {return (('0000'+(y.toFixed(2))).slice (-5));},
            width: 60,
			height:16,
			tooltipClassname: 'spark',
		    tooltipChartTitle: 'Wind Speed Today.',
			tooltipFormat:'{{prefix}}{{y}}{{suffix}}',
			tooltipPrefix: 'Time: '
      });
      $('.wind').sparkline(wind, {
	  		composite: true,
	        type: 'line',
    		lineColor: '#ffffff',
    		fillColor: '#5B7102',
    		spotColor: '#ffffff',
    		minSpotColor: '#55a9fd',
    		maxSpotColor: '#f23434',
			tooltipClassname: 'spark',
			tooltipFormat:'{{prefix}}{{y}}{{suffix}}',
			tooltipPrefix: 'Wind: ',
            tooltipSuffix: " kts",
            width: 60,
			height:16
      });
   }); 
  $(function() {
      	   $('.rain').sparkline(raintime, {
    		type: 'line',
    		lineColor: '#5B7102',
    		fillColor: '#5B7102',
    		spotColor: '#5B7102',
    		minSpotColor: '#5B7102',
    		maxSpotColor: '#5B7102',
			numberFormatter: function(y) {return (('0000'+(y.toFixed(2))).slice (-5));},
            width: 60,
			height:16,
			tooltipClassname: 'spark',
			tooltipPrefix: 'Time: ',
			tooltipFormat:'{{prefix}}{{y}}{{suffix}}',
			tooltipChartTitle: 'Rainfall Today.'
      });
      $('.rain').sparkline(rain, {
	  		composite: true,
	        type: 'line',
    		lineColor: '#ffffff',
    		fillColor: '#5B7102',
    		spotColor: '#ffffff',
    		minSpotColor: '#55a9fd',
    		maxSpotColor: '#f23434',
			tooltipClassname: 'spark',
			tooltipFormat:'{{prefix}}{{y}}{{suffix}}',
			tooltipPrefix: 'Rain: ',
            tooltipSuffix: " mm",
            width: 60,
			height:16		    
      });
   });
   $(function() {
   			$('.solar').sparkline(solartime, {
    		type: 'line',
    		lineColor: '#5B7102',
    		fillColor: '#5B7102',
    		spotColor: '#5B7102',
    		minSpotColor: '#5B7102',
    		maxSpotColor: '#5B7102',
			numberFormatter: function(y) {return (('0000'+(y.toFixed(2))).slice (-5));},
            width: 60,
			height:16,
			tooltipClassname: 'spark',
			tooltipChartTitle: 'Solar Today.',
			tooltipFormat:'{{prefix}}{{y}}{{suffix}}',
			tooltipPrefix: 'Time: '
      });
      		$('.solar').sparkline(solar, {
	  		composite: true,
	        type: 'line',
    		lineColor: '#ffffff',
    		fillColor: '#5B7102',
    		spotColor: '#ffffff',
    		minSpotColor: '#55a9fd',
    		maxSpotColor: '#f23434',
			tooltipClassname: 'spark',
			tooltipFormat:'<span style="color: {{color}}"></span>{{prefix}}{{y}}{{suffix}}',
			tooltipPrefix: 'Sun: ',
            tooltipSuffix: " w/m&sup2;",
            width: 60,
			height:16      });
   });
     $(function() {
	        $('.baro').sparkline(barotime, {
    		type: 'line',
    		lineColor: '#5B7102',
    		fillColor: '#5B7102',
    		spotColor: '#5B7102',
    		minSpotColor: '#5B7102',
    		maxSpotColor: '#5B7102',
			numberFormatter: function(y) {return (('0000'+(y.toFixed(2))).slice (-5));},
            width: 60,
			height:16,
			tooltipClassname: 'spark',
			tooltipChartTitle: 'Barometer Today.',
			tooltipFormat:'{{prefix}}{{y}}{{suffix}}',
			tooltipPrefix: 'Time: '
      });
     	    $('.baro').sparkline(baro, {
			composite: true,
	        type: 'line',
    		lineColor: '#ffffff',
    		fillColor: '#5B7102',
    		spotColor: '#ffffff',
    		minSpotColor: '#55a9fd',
    		maxSpotColor: '#f23434',
			numberDigitGroupCount: 6,
			tooltipClassname: 'spark',
			tooltipFormat:'{{prefix}}{{y}}{{suffix}}',
			tooltipPrefix: 'Baro: ',
            tooltipSuffix: " mb",
            width: 60,
			height:16      });
   });