<!-- Temp -->
var temp = [20.6,21.6,22.6,23,23.7,24.2,24.3,24.5,24.8,24.2,23.7,23.2,21.8];
var temptime = ['12.30','13.00','13.30','14.00','14.30','15.00','15.30','16.00','16.30','17.00','17.30','18.00','18.30'];
<!-- Rain -->
var rain = [0,0,0,0,0,0,0,0,0,0,0,0,0];
var raintime = ['12.30','13.00','13.30','14.00','14.30','15.00','15.30','16.00','16.30','17.00','17.30','18.00','18.30'];
<!-- Wind -->
var wind = [2,2,2,2,1,3,2,1,2,3,4,5,3];
var windtime = ['16.30','16.40','16.50','17.00','17.10','17.20','17.30','17.40','17.50','18.00','18.10','18.20','18.30'];
<!-- Solar -->
var solar = [18,97,336,269,171,332,605,726,877,285,563,274,114];
var solartime = ['06.30','07.30','08.30','09.30','10.30','11.30','12.30','13.30','14.30','15.30','16.30','17.30','18.30'];
<!-- Baro -->
var baro = [1014,1014.1,1013.9,1014,1014.2,1014.2,1014.1,1014.1,1013.7,1013.3,1013,1012.5,1012.5];
var barotime = ['06.30','07.30','08.30','09.30','10.30','11.30','12.30','13.30','14.30','15.30','16.30','17.30','18.30'];
<!-- Wind Dir -->
     	  
$(function() {
      	   $('.temp').sparkline(temptime, {
    		        type: 'line',
    		   lineColor: '#545454',
    		   fillColor: '#545454',
    		   spotColor: '#545454',
    		minSpotColor: '#545454',
    		maxSpotColor: '#545454',
                   lineWidth: 2,
		  spotRadius: 3,
			numberFormatter: function(y) {return (('000000'+(y.toFixed(2))).slice (-5));},
		      height: 18,
                       width: 150,
			tooltipClassname: 'spark',
			   tooltipPrefix: 'Time: ',
			   tooltipFormat:'<span style="color: {{color}}"></span> {{prefix}}{{y}}{{suffix}}',
		       tooltipChartTitle: 'Temperature Today'
      });
      	$('.temp').sparkline(temp, {
		  composite: true,
	               type: 'line',
                  lineColor: '#FFFFFF',
                  fillColor: '#545454',
               minSpotColor: '#0091F7',
               maxSpotColor: '#F62752',
                  spotColor: "#04F204",
                  lineWidth: 2,
         highlightSpotColor: '#FF9000',
         highlightLineColor: '#FFFFFF',
                 spotRadius: 4,
		     tooltipClassname: 'spark',
			tooltipFormat:'<span style="color: {{color}}"></span>{{prefix}}{{y}}{{suffix}}',
			tooltipPrefix: 'Temp: ',
                        tooltipSuffix: " &deg;C",
	             height: 18,
                      width: 150,
      });
   });
   $(function() {
   	    $('.solar').sparkline(solartime, {
    		        type: 'line',
    		   lineColor: '#545454',
    		   fillColor: '#545454',
    		   spotColor: '#545454',
                 spotColor: '#545454',
    		minSpotColor: '#545454',
    		maxSpotColor: '#545454',
                   lineWidth: 2,
		  spotRadius: 3,
			numberFormatter: function(y) {return (('0000'+(y.toFixed(2))).slice (-5));},
		      height: 18,
                       width: 150,
			tooltipClassname: 'spark',
			tooltipChartTitle: 'Solar Today',
			tooltipFormat:'<span style="color: {{color}}"></span> {{prefix}}{{y}}{{suffix}}',
			tooltipPrefix: 'Time: '
      });
      		$('.solar').sparkline(solar, {
	  		composite: true,
	               type: 'line',
                  lineColor: '#FFFFFF',
                  fillColor: '#545454',
               minSpotColor: '#0091F7',
               maxSpotColor: '#F62752',
                  spotColor: "#04F204",
                  lineWidth: 2,
         highlightSpotColor: '#FF9000',
         highlightLineColor: '#FFFFFF',
                 spotRadius: 4,
			tooltipClassname: 'spark',
			tooltipFormat:'<span style="color: {{color}}"></span>{{prefix}}{{y}}{{suffix}}',
			tooltipPrefix: 'Solar: ',
              tooltipSuffix: " Wm&#8315;&sup2;",
	             height: 18,
                      width: 150,
      });
   });
	$(function() {
	  	 $('.wind').sparkline(windtime, {
    		        type: 'line',
    		   lineColor: '#545454',
    		   fillColor: '#545454',
    		   spotColor: '#545454',
    	        minSpotColor: '#545454',
    	        maxSpotColor: '#545454',
                   lineWidth: 2,
		  spotRadius: 3,
			numberFormatter: function(y) {return (('0000'+(y.toFixed(2))).slice (-5));},
	              height: 18,
                       width: 150,
		      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: '#FFFFFF',
                   fillColor: '#545454',
                   spotColor: '#3366FC',
                minSpotColor: '#0091F7',
                maxSpotColor: '#F62752',
                   spotColor: "#04F204",
                   lineWidth: 2,
          highlightSpotColor: '#FF9000',
          highlightLineColor: '#FFFFFF',
                  spotRadius: 4,
			tooltipClassname: 'spark',
			tooltipFormat:'<span style="color: {{color}}"> </span>{{prefix}}{{y}}{{suffix}}',
			tooltipPrefix: 'Wind: ',
               tooltipSuffix: " mph",
	              height: 18,
                       width: 150,
      });
   }); 
  $(function() {
      	   $('.rain').sparkline(raintime, {
    		        type: 'line',
    		   lineColor: '#545454',
    		   fillColor: '#545454',
    		   spotColor: '#545454',
    	        minSpotColor: '#545454',
    	        maxSpotColor: '#545454',
                   lineWidth: 2,
		  spotRadius: 3,
			numberFormatter: function(y) {return (('0000'+(y.toFixed(2))).slice (-5));},
	              height: 18,
                       width: 150,
		       tooltipClassname: 'spark',
			  tooltipPrefix: 'Time: ',
			  tooltipFormat:'<span style="color: {{color}}"></span> {{prefix}}{{y}}{{suffix}}',
		      tooltipChartTitle: 'Rainfall Today'
      });
      $('.rain').sparkline(rain, {
	  	  composite: true,
	               type: 'line',
                  lineColor: '#FFFFFF',
                  fillColor: '#545454',
                  spotColor: '#3366FC',
               minSpotColor: '#0091F7',
               maxSpotColor: '#F62752',
                  spotColor: "#04F204",
                  lineWidth: 2,
         highlightSpotColor: '#FF9000',
         highlightLineColor: '#FFFFFF',
                 spotRadius: 4,
			tooltipClassname: 'spark',
			tooltipFormat:'<span style="color: {{color}}"></span>{{prefix}}{{y}}{{suffix}}',
			tooltipPrefix: 'Rain: ',
              tooltipSuffix: " mm",
	             height: 18,
                      width: 150,		    
      });
   });
     $(function() {
	        $('.baro').sparkline(barotime, {
    		        type: 'line',
    		   lineColor: '#545454',
    		   fillColor: '#545454',
    		   spotColor: '#545454',
    	        minSpotColor: '#545454',
    	        maxSpotColor: '#545454',
                   lineWidth: 2,
		  spotRadius: 3,
			numberFormatter: function(y) {return (('0000'+(y.toFixed(2))).slice (-5));},
	              height: 18,
                       width: 150,
		       tooltipClassname: 'spark',
		      tooltipChartTitle: 'Barometer Today',
			  tooltipFormat:'<span style="color: {{color}}"></span> {{prefix}}{{y}}{{suffix}}',
			  tooltipPrefix: 'Time: '
      });
     	    $('.baro').sparkline(baro, {
			composite: true,
                  lineColor: '#FFFFFF',
                  fillColor: '#545454',
                  spotColor: '#3366FC',
               minSpotColor: '#0091F7',
               maxSpotColor: '#F62752',
                  spotColor: "#04F204",
                  lineWidth: 2,
         highlightSpotColor: '#FF9000',
         highlightLineColor: '#FFFFFF',
                 spotRadius: 4,
		   numberDigitGroupCount: 6,
			tooltipClassname: 'spark',
			   tooltipFormat:'<span style="color: {{color}}"></span>{{prefix}}{{y}}{{suffix}}',
			   tooltipPrefix: 'Baro: ',
              tooltipSuffix: " hPa",
	             height: 18,
                      width: 150,
      });
   });