<html>
<head>
	<meta charset="utf-8" />
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/highcharts.js"></script>
	<script type="text/javascript" src="js/modules/exporting.js"></script>

	<script type="text/javascript">
		$(function () {
			var $reporting = $('#reporting');
			$('#container').highcharts({

				chart: {
				renderTo: 'container',
				zoomType: 'x',
				type: 'spline',
				marginRight: 10,
				marginBottom: 70,
				plotBorderColor: '#550095',
				plotBorderWidth: 1,
				},

				title: {
					text: 'Température moyenne par mois',
					x: -20 // center
				},
				subtitle: {
					text: 'Test TP Graphique HIGHCHARTS 01',
					x: -20
				},
				xAxis: {
					categories: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembe', 'Octobre', 'Novembre', 'Décembre']
				},
				yAxis: {
					title: {
						text: 'Température (°C)'
					},
					plotLines: [{
						value: 5,
						width: 1,
						color: '#0000FF'
					}]
				},
				plotOptions: {
					line: {
						dataLabels: {
							enabled: true
						},
						enableMouseTracking: false
					},
					series: {
						point: {
							events: {
								mouseOver: function() {
									$reporting.html('x' + this.x + ', y: ' + this.y);
								}
							}
						},
						events: {
							mouseOut: function() {
								$reporting.empty();
							}
						}
					}
				}, 
				tooltip: {
					crosshairs: [true],
					valueSuffix: '°C'
				},
				legend: {
					layout: 'vertical',
					align: 'right',
					verticalAlign: 'middle',
					boderWidth: 0
				},
				credits: {
					 position: {
        				align: 'right',
				        verticalAlign: 'bottom',
				        x: 0,
				        y: -5
				    },
					text: '© B TEXIER',
					href: 'http://www.texiervideos.fr'
					},
				series: [{
					name: 'Berlin',
					data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
				}, {
					name: 'New York',
					data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
				}]
			});
		});
	</script>

</head>

<body>
	<div id="container" style="width: 550px; height:350px; margin: 0 auto;"></div>
</body>
</html>