Clock with Background

by gopinaghr

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>

<div id="clock" style="width: 300px; height: 300px; margin: 0 auto"></div>

CSS

body{
	background: #403F3F;
	border: none;
}
#clock {
    width: 200px;
    height: 200px;
    background-color: #403F3F;
    border: none;
    border-style: none
    
}

JavaScript

$(function () {
	
	/**
	 * Get the current time
	 */
	function getNow () {
	    var now = new Date();
	        
	    return {
	        hours: now.getHours() + now.getMinutes() / 60,
	        minutes: now.getMinutes() * 12 / 60 + now.getSeconds() * 12 / 3600,
	        seconds: now.getSeconds() * 12 / 60
	    };
	};
	
	/**
	 * Pad numbers
	 */
	function pad(number, length) {
		// Create an array of the remaining length +1 and join it with 0's
		return new Array((length || 2) + 1 - String(number).length).join(0) + number;
	}
	
	var now = getNow();
	
	// Create the chart
	var chart = new Highcharts.Chart({
	
	    chart: {
	        renderTo: 'clock',
	        type: 'gauge',
	        plotBorder: false,
	        plotBackgroundColor: '#403F3F',
	        plotBackgroundImage: null,
	        plotBorderWidth: 0,
	        borderWidth: 0,
	        borderRadius: 0,
	        spacingTop: 0,
	        spacingRight: 0,
	        spacingBottom: 0,
	        spacingLeft:0,
	        plotShadow: false,
	        
	    },
	    
	    credits: {
	        enabled: false
	    },
	    
	    title: {
	    	text: ''
	    },
	    
	    pane: {
	    	background: false
	    },
	    
	    yAxis: {
	        labels: {
	        	style: {
	        		color: '#CCffff'
	            		
	        	},
	            distance: -20
	        },
	        min: 0,
	        max: 12,
	        lineWidth: 0,
	        showFirstLabel: false,
	        
	        minorTickInterval: 'auto',
	        minorTickWidth: 1,
	        minorTickLength: 5,
	        minorTickPosition: 'inside',
	        minorGridLineWidth: 0,
	        minorTickColor: '#c8c8c8',
	
	        tickInterval: 1,
	        tickWidth: 2,
	        tickPosition: 'inside',
	        tickLength: 10,
	        tickColor: '#c9c9c9',
	        title: {
	            text: 'Weerstation<br/>Lemmer.nl',
	            style: {
	                color: '#808080',
	                fontWeight: 'normal',
	                fontSize: '11px',
	                lineHeight: '10px'              ...