<?php
// Connexion to the data base
$db = mysql_connect('localhost', 'root', 'Orange2424') or die('Erreur de connexion '.mysql_error());
mysql_select_db('OrangeTunisie',$db) or die('Erreur de sélection '.mysql_error());
$query = mysql_query("SELECT * from Prefix_Count_History");
$name_chart = "Prefix_Count_History";
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Line Chart on a DateTime Axis Example - HTML5 jQuery Chart Plugin by jqChart
</title>
<link rel="stylesheet" type="text/css" href="../css/jquery.jqChart.css" />
<link rel="stylesheet" type="text/css" href="../css/jquery.jqRangeSlider.css" />
<link rel="stylesheet" type="text/css" href="../themes/smoothness/jquery-ui-1.8.21.css" />
<script src="../js/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="../js/jquery.jqChart.min.js" type="text/javascript"></script>
<script src="../js/jquery.jqRangeSlider.min.js" type="text/javascript"></script>
<!--[if IE]><script lang="javascript" type="text/javascript" src="../js/excanvas.js"></script><![endif]-->
<script lang="javascript" type="text/javascript">
$(document).ready(function () {
var background = {
type: 'linearGradient',
x0: 0,
y0: 0,
x1: 0,
y1: 1,
colorStops: [{ offset: 0, color: '#d2e6c9' },
{ offset: 1, color: 'white '}]
};
$('#jqChart').jqChart({
title: { text: 'IPv4 / IPv6 prefixes' },
border: { strokeStyle: '#6ba851' },
background: background,
tooltips: { type: 'shared' },
animation: { duration: 1 },
shadows: {
enabled : true,
shadowColor: 'gray',
shadowBlur: 10,
shadowOffsetX: 10,
shadowOffsetY: 10
},
selectionRect: {
fillStyle: 'rgba(125,125,125,0.2)',
strokeStyle: 'gray',
lineWidth: 1
},
mouseInteractionMode: 'zooming', // zooming, panning
axes: [{
type: 'linear',
location: 'left',
zoomEnabled: true,
title: { text: 'Number of prefixes', fillStyle : 'green' },
<?php
$visibility=mysql_query("SELECT min(IPv4), max(IPv4) from Prefix_Count_History");
while ($donnee = mysql_fetch_array($visibility))
{
$min = intval($donnee[0]);
$max = intval($donnee[1]);
$result1.= "visibleMinimum: ".$min.",";
$result2.= "visibleMaximum: ".$max."";
}
echo $result1;
echo $result2;
?>
},
{
type: 'dateTime',
location: 'bottom',
zoomEnabled: true,
title: { text: 'Date', fillStyle : 'green' }
}
],
series: [
{
type: 'line',
title: 'IPv4',
data: [ <?php
while ($donnees = mysql_fetch_array($query))
{
$date = addslashes($donnees['Date']);
$time = addslashes($donnees['Time']);
$D = date_create(''.$date.'');
$stamp= date_format($D, 'Y-m-d');
$ipv4=intval($donnees['IPv4']);
$data .= "['".$stamp."', ".$ipv4."],";
}
echo $data;
?>]
},
{
type: 'spline',
title: 'IPv6',
data: [<?php
mysql_data_seek($query, 0);
while ($donnees = mysql_fetch_array($query))
{
$date = addslashes($donnees['Date']);
$time = addslashes($donnees['Time']);
$D = date_create(''.$date.'');
$stamp= date_format($D, 'Y-m-d');
$ipv6=intval($donnees['IPv6']);
$data2 .= "['".$stamp."', ".$ipv6."],";
}
echo $data2;
?>]
}
]
});
});
</script>
</head>
<body>
<div>
<div id="jqChart" style="width: 1100px; height: 300px;">
</div>
</div>
</body>
</html>