102 lines
2.2 KiB
PHP
102 lines
2.2 KiB
PHP
<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> |