<!-- Temp -->
var temp = [10,10,5,8,8,8,7,6,7,7,6,6,6];
var temptime = ['22.51','23.21','23.51','00.21','00.51','01.21','01.51','02.21','02.51','03.21','03.51','04.21','04.50'];
<!-- Rain -->
var rain = [0,0,0,0,0,0,0,0,0,0,0,0,0];
var raintime = ['22.51','23.21','23.51','00.21','00.51','01.21','01.51','02.21','02.51','03.21','03.51','04.21','04.50'];
<!-- Wind -->
var wind = [3,3,4,3,2,3,1,1,1,1,3,2,2];
var windtime = ['02.51','03.01','03.11','03.21','03.31','03.41','03.51','04.01','04.11','04.21','04.31','04.41','04.50'];
<!-- Solar -->
var solar = [624,461,272,25,0,0,0,0,0,0,0,0,0];
var solartime = ['16.51','17.51','18.51','19.51','20.51','21.51','22.51','23.51','00.51','01.51','02.51','03.51','04.50'];
<!-- Baro -->
var baro = [1020,1020,1020,1020,1020,1020,1020,1020,1020,1020,1020,1020,1020];
var barotime = ['02.51','03.01','03.11','03.21','03.31','03.41','03.51','04.01','04.11','04.21','04.31','04.41','04.50'];
<!-- Wind Dir -->
    $(function() {
	$('.windd').sparkline([340,20], {
    type: 'pie',
    sliceColors: ['#8EA2C6','#ffffff'],
    offset: 257,
	chartRangeMin: 0,
	chartRangeMax: 360,
    borderWidth: 1,
    borderColor: '#ffffff',
	tooltipClassname: 'spark',
	tooltipPrefix:'Bearing: 337',
	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: '#8EA2C6',
    		fillColor: '#8EA2C6',
    		spotColor: '#8EA2C6',
    		minSpotColor: '#8EA2C6',
    		maxSpotColor: '#8EA2C6',
			numberFormatter: function(y) {return (('0000'+(y.toFixed(2))).slice (-5));},
            width: 90,
			height:16,
			tooltipClassname: 'spark',
			tooltipPrefix: 'Heure: ',
			tooltipFormat:'<span style="color: {{color}}"></span> {{prefix}}{{y}}{{suffix}}',
			tooltipChartTitle: 'Temperature .'
      });
      	$('.temp').sparkline(temp, {
			composite: true,
	        type: 'line',
    		lineColor: '#ffffff',
    		fillColor: '#8EA2C6',
    		spotColor: '#00007f',
    		minSpotColor: '#007fff',
    		maxSpotColor: '#ff0000',
			tooltipClassname: 'spark',
			tooltipFormat:'<span style="color: {{color}}"></span>{{prefix}}{{y}}{{suffix}}',
			tooltipPrefix: 'Temp: ',
            tooltipSuffix: " &#176;C",
            width: 90,
			height:16      });
   });
	$(function() {
	  	 $('.wind').sparkline(windtime, {
    		type: 'line',
    		lineColor: '#8EA2C6',
    		fillColor: '#8EA2C6',
    		spotColor: '#8EA2C6',
    		minSpotColor: '#8EA2C6',
    		maxSpotColor: '#8EA2C6',
			numberFormatter: function(y) {return (('0000'+(y.toFixed(2))).slice (-5));},
            width: 90,
			height:16,
			tooltipClassname: 'spark',
		    tooltipChartTitle: 'Vent.',
			tooltipFormat:'<span style="color: {{color}}"></span> {{prefix}}{{y}}{{suffix}}',
			tooltipPrefix: 'Heure: '
      });
      $('.wind').sparkline(wind, {
	  		composite: true,
	        type: 'line',
    		lineColor: '#ffffff',
    		fillColor: '#8EA2C6',
    		spotColor: '#00007f',
    		minSpotColor: '#007fff',
    		maxSpotColor: '#ff0000',
			tooltipClassname: 'spark',
			tooltipFormat:'<span style="color: {{color}}"> </span>{{prefix}}{{y}}{{suffix}}',
			tooltipPrefix: 'Vitesse: ',
            tooltipSuffix: " km/h",
            width: 90,
			height:16
      });
   }); 
  $(function() {
      	   $('.rain').sparkline(raintime, {
    		type: 'line',
    		lineColor: '#8EA2C6',
    		fillColor: '#8EA2C6',
    		spotColor: '#8EA2C6',
    		minSpotColor: '#8EA2C6',
    		maxSpotColor: '#8EA2C6',
			numberFormatter: function(y) {return (('0000'+(y.toFixed(2))).slice (-5));},
            width: 90,
			height:16,
			tooltipClassname: 'spark',
			tooltipPrefix: 'Heure: ',
			tooltipFormat:'<span style="color: {{color}}"></span> {{prefix}}{{y}}{{suffix}}',
			tooltipChartTitle: 'Pluie.'
      });
      $('.rain').sparkline(rain, {
	  		composite: true,
	        type: 'line',
    		lineColor: '#ffffff',
    		fillColor: '#8EA2C6',
    		spotColor: '#00007f',
    		minSpotColor: '#007fff',
    		maxSpotColor: '#ff0000',
			tooltipClassname: 'spark',
			tooltipFormat:'<span style="color: {{color}}"></span>{{prefix}}{{y}}{{suffix}}',
			tooltipPrefix: 'Pluie: ',
            tooltipSuffix: " mm",
            width: 90,
			height:16		    
      });
   });
   $(function() {
   			$('.solar').sparkline(solartime, {
    		type: 'line',
    		lineColor: '#8EA2C6',
    		fillColor: '#8EA2C6',
    		spotColor: '#8EA2C6',
    		minSpotColor: '#8EA2C6',
    		maxSpotColor: '#8EA2C6',
			numberFormatter: function(y) {return (('0000'+(y.toFixed(2))).slice (-5));},
            width: 90,
			height:16,
			tooltipClassname: 'spark',
			tooltipChartTitle: 'Solaire.',
			tooltipFormat:'<span style="color: {{color}}"></span> {{prefix}}{{y}}{{suffix}}',
			tooltipPrefix: 'Heure: '
      });
      		$('.solar').sparkline(solar, {
	  		composite: true,
	        type: 'line',
    		lineColor: '#ffffff',
    		fillColor: '#8EA2C6',
    		spotColor: '#00007f',
    		minSpotColor: '#007fff',
    		maxSpotColor: '#ff0000',
			tooltipClassname: 'spark',
			tooltipFormat:'<span style="color: {{color}}"></span>{{prefix}}{{y}}{{suffix}}',
			tooltipPrefix: 'Solaire: ',
            tooltipSuffix: " w/m&sup2;",
            width: 90,
			height:16      });
   });
     $(function() {
	        $('.baro').sparkline(barotime, {
    		type: 'line',
    		lineColor: '#8EA2C6',
    		fillColor: '#8EA2C6',
    		spotColor: '#8EA2C6',
    		minSpotColor: '#8EA2C6',
    		maxSpotColor: '#8EA2C6',
			numberFormatter: function(y) {return (('0000'+(y.toFixed(2))).slice (-5));},
            width: 90,
			height:16,
			tooltipClassname: 'spark',
			tooltipChartTitle: 'Pression.',
			tooltipFormat:'<span style="color: {{color}}"></span> {{prefix}}{{y}}{{suffix}}',
			tooltipPrefix: 'Heure: '
      });
     	    $('.baro').sparkline(baro, {
			composite: true,
	        type: 'line',
    		lineColor: '#ffffff',
    		fillColor: '#8EA2C6',
    		spotColor: '#00007f',
    		minSpotColor: '#007fff',
    		maxSpotColor: '#ff0000',
			numberDigitGroupCount: 6,
			tooltipClassname: 'spark',
			tooltipFormat:'<span style="color: {{color}}"></span>{{prefix}}{{y}}{{suffix}}',
			tooltipPrefix: 'Pression: ',
            tooltipSuffix: " hPa",
            width: 90,
			height:16      });
   });