Commit bc06b8d4 authored by JonathanMM's avatar JonathanMM

Affichage des graphiques en premiere page

parent fca56c1f
......@@ -58,6 +58,46 @@ switch($_GET['action'])
echo json_encode(compterVote($codeStation, $_GET['statut']));
exit();
break;
case 'getConsoInstantane':
echo json_encode(getConsoInstantane());
exit();
break;
case 'getConsoResumeTroisHeures':
echo json_encode(getConsoResume("-3hours", 5));
exit();
break;
case 'getConsoResumeUnJour':
echo json_encode(getConsoResume("-1day", 15));
exit();
break;
case 'getConsoResumeSeptJours':
echo json_encode(getConsoResume("-7days", 60));
exit();
break;
case 'getConsoResumeUnMois':
echo json_encode(getConsoResume("-1month", 360));
exit();
break;
case 'getConsoBikeInstantane':
echo json_encode(getConsoBikeInstantane());
exit();
break;
case 'getConsoBikeResumeTroisHeures':
echo json_encode(getConsoBikeResume("-3hours", 5));
exit();
break;
case 'getConsoBikeResumeUnJour':
echo json_encode(getConsoBikeResume("-1day", 15));
exit();
break;
case 'getConsoBikeResumeSeptJours':
echo json_encode(getConsoBikeResume("-7days", 60));
exit();
break;
case 'getConsoBikeResumeUnMois':
echo json_encode(getConsoBikeResume("-1month", 360));
exit();
break;
}
function getBikeInstantane($codeStation)
......@@ -424,4 +464,255 @@ function compterVote($codeStation, $statut)
$pdo->exec('INSERT INTO signalement (code, estFonctionnel) VALUES ('.$codeStation.', '.$vote.')');
return true;
}
function getConsoInstantane()
{
$data = getDataConsoInstantane();
$dataReturn = array(
'labels' => $data['labels'],
'datasets' => $data['datasets']
);
$options =
array(
'responsive' => false,
'scales' => array(
'yAxes' => array(
array('stacked' => true)
)
)
);
return array(
'type' => 'line',
'data' => $dataReturn,
'options' => $options
);
}
function getDataConsoInstantane()
{
global $pdo;
//Filtre 1 heure
$hier = new DateTime("-1hour");
$filtreDate = $hier->format('Y-m-d H:i:s');
$requete = $pdo->query('SELECT * FROM `statusConso` Where date >= "'.$filtreDate.'" Order by id asc');
$allConso = $requete->fetchAll();
$dates = [];
$nbStationsData = [];
foreach($allConso as $i => $c)
{
if($c['nbStation'] > 0)
{
$dates[] = (new DateTime($c['date']))->format("d/m H\hi");
$nbStationsData[] = $c['nbStation'];
}
}
return array(
'labels' => $dates,
'datasets' => array(
array(
'label' => 'Nombre de stations',
'backgroundColor' => 'rgba(173,0,130,0.5)',
'data' => $nbStationsData
)
)
);
}
function getConsoBikeInstantane()
{
$data = getDataConsoBikeInstantane();
$dataReturn = array(
'labels' => $data['labels'],
'datasets' => $data['datasets']
);
$options =
array(
'responsive' => false,
'scales' => array(
'yAxes' => array(
array('stacked' => true)
)
)
);
return array(
'type' => 'line',
'data' => $dataReturn,
'options' => $options
);
}
function getDataConsoBikeInstantane()
{
global $pdo;
//Filtre 1 heure
$hier = new DateTime("-1hour");
$filtreDate = $hier->format('Y-m-d H:i:s');
$requete = $pdo->query('SELECT * FROM `statusConso` Where date >= "'.$filtreDate.'" Order by id asc');
$allConso = $requete->fetchAll();
$dates = [];
$nbBikeData = [];
$nbEbikeData = [];
foreach($allConso as $i => $c)
{
if($c['nbStation'] > 0)
{
$dates[] = (new DateTime($c['date']))->format("d/m H\hi");
$nbBikeData[] = $c['nbBike'];
$nbEbikeData[] = $c['nbEbike'];
}
}
return array(
'labels' => $dates,
'datasets' => array(
array(
'label' => 'Vélos mécaniques',
'backgroundColor' => 'rgba(104,221,46,0.5)',
'data' => $nbBikeData
),
array(
'label' => 'Vélos électriques',
'backgroundColor' => 'rgba(76, 213, 233, 0.5)',
'data' => $nbEbikeData
)
)
);
}
function getConsoResume($filtreDate, $periode)
{
$data = getDataConsoResume($filtreDate, $periode);
$dataReturn = array(
'labels' => $data['labels'],
'datasets' => $data['datasets']
);
$options =
array(
'responsive' => false,
'scales' => array(
'yAxes' => array(
array('stacked' => false)
)
)
);
return array(
'type' => 'line',
'data' => $dataReturn,
'options' => $options
);
}
function getDataConsoResume($filtre, $periode)
{
global $pdo;
//Filtre date
$date = new DateTime($filtre);
$filtreDate = $date->format('Y-m-d H:i:s');
$requete = $pdo->query('SELECT *
FROM resumeConso
WHERE `date` >= "'.$filtreDate.'" AND duree = '.$periode.'
ORDER BY date ASC');
$resumeStatusStation = $requete->fetchAll();
$datesResume = [];
$nbStationsData = [];
foreach($resumeStatusStation as $statut)
{
$datesResume[] = (new DateTime($statut['date']))->format("d/m H\hi");
$nbStationsData[] = $statut['nbStation'];
}
return array(
'labels' => $datesResume,
'datasets' => array(
array(
'label' => 'Nombre de stations',
'backgroundColor' => 'rgba(173,0,130,0.5)',
'data' => $nbStationsData
)
)
);
}
function getConsoBikeResume($filtreDate, $periode)
{
$data = getDataConsoBikeResume($filtreDate, $periode);
$dataReturn = array(
'labels' => $data['labels'],
'datasets' => $data['datasets']
);
$options =
array(
'responsive' => false,
'scales' => array(
'yAxes' => array(
array('stacked' => false)
)
)
);
return array(
'type' => 'line',
'data' => $dataReturn,
'options' => $options
);
}
function getDataConsoBikeResume($filtre, $periode)
{
global $pdo;
//Filtre date
$date = new DateTime($filtre);
$filtreDate = $date->format('Y-m-d H:i:s');
$requete = $pdo->query('SELECT *
FROM resumeConso
WHERE `date` >= "'.$filtreDate.'" AND duree = '.$periode.'
ORDER BY date ASC');
$resumeStatusStation = $requete->fetchAll();
$datesResume = [];
$nbBikeData = [];
$nbEbikeData = [];
foreach($resumeStatusStation as $i => $c)
{
if($c['nbStation'] > 0)
{
$dates[] = (new DateTime($c['date']))->format("d/m H\hi");
$nbBikeData[] = $c['nbBikeMoyenne'];
$nbEbikeData[] = $c['nbEBikeMoyenne'];
}
}
return array(
'labels' => $datesResume,
'datasets' => array(
array(
'label' => 'Vélos mécaniques',
'backgroundColor' => 'rgba(104,221,46,0.5)',
'data' => $nbBikeData
),
array(
'label' => 'Vélos électriques',
'backgroundColor' => 'rgba(76, 213, 233, 0.5)',
'data' => $nbEbikeData
)
)
);
}
?>
\ No newline at end of file
......@@ -28,6 +28,8 @@ else
<link rel="stylesheet" type="text/css" href="datatables.min.css"/>
<script type="text/javascript" src="datatables.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<style type="text/css">
table, tr, td, th
{
......@@ -49,7 +51,17 @@ else
<li>Nombre de bornes libres : <?php echo $conso['nbFreeEDock']; ?></li>
<li>Nombre de bornes total : <?php echo $conso['nbEDock']; ?></li>
</ul>
<i>Dernière mise à jour : <?php echo $conso['date']; ?></i>
<i>Dernière mise à jour : <?php echo $conso['date']; ?></i><br />
<select id="typeGraphiqueSelect" style="display: none">
<option value="_double">Conso</option>
</select>
<select id="dureeGraphiqueSelect">
<option value="instantanee">Une heure - Instantanée</option>
<option value="troisHeures">Trois heures - Période de 5 minutes</option>
<option value="unJour">Un jour - Période de 15 minutes</option>
<option value="septJours" selected>Une semaine - Période d'une heure</option>
<option value="unMois">Un mois - Période de six heures</option>
</select>
<canvas id="chartNbStations" width="1000" height="400"></canvas>
<canvas id="chartBikes" width="1000" height="400"></canvas>
<i>Ce site n'est pas un site officiel de vélib métropole. Les données utilisées proviennent de <a href="http://www.velib-metropole.fr">www.velib-metropole.fr</a> et appartienne à leur propriétaire. - <a href="https://framagit.org/JonathanMM/velibstats">Site du projet</a> -
......@@ -91,82 +103,9 @@ else
</tbody>
</table>
<script type="text/javascript">
<?php
//On définit les points
$requete = $pdo->query('SELECT * FROM `statusConso` Where date >= "'.$filtreDate.'" Order by id asc');
$allConso = $requete->fetchAll();
$dates = [];
$nbStationsData = [];
$nbBikeData = [];
$nbEbikeData = [];
$nbFreeEdockData = [];
foreach($allConso as $i => $c)
{
if($c['nbStation'] > 0)
{
$dates[] = $c['date'];
$nbStationsData[] = $c['nbStation'];
$nbBikeData[] = $c['nbBike'];
$nbEbikeData[] = $c['nbEbike'];
$nbFreeEdockData[] = $c['nbFreeEDock'];
}
}
echo 'var datesData = ["'.implode('","', $dates).'"];';
echo 'var nbStationsData = ['.implode(',', $nbStationsData).'];';
echo 'var nbBikeData = ['.implode(',', $nbBikeData).'];';
echo 'var nbEbikeData = ['.implode(',', $nbEbikeData).'];';
echo 'var nbFreeEdockData = ['.implode(',', $nbFreeEdockData).'];';
?>
var codeStation = -1;
</script>
<script type="application/javascript">
var chartNbStations = document.getElementById("chartNbStations").getContext('2d');
var data = {
labels: datesData,
datasets: [
{
backgroundColor : "rgba(173,0,130,0.5)",
data : nbStationsData,
label: 'Nombre de stations'
}
]
};
var options = {
responsive: false,
scales: {
yAxes: [{
stacked: true
}]
}
};
new Chart(chartNbStations, {
type: 'line',
data: data,
options: options
});
var chartBikes = document.getElementById("chartBikes").getContext('2d');
var dataBike = {
labels: datesData,
datasets: [
{
backgroundColor : "rgba(104,221,46,0.5)",
data : nbBikeData,
label: 'Vélos mécaniques'
},
{
backgroundColor : "rgba(76, 213, 233, 0.5)",
data : nbEbikeData,
label: 'Vélos électriques'
}
]
};
new Chart(chartBikes, {
type: 'line',
data: dataBike,
options: options
});
$(document).ready( function () {
var dt = $('#stations').DataTable();
......
......@@ -21,46 +21,59 @@ function getData(url)
function changerGraphe()
{
var choixType = $("#typeGraphiqueSelect").val();
if(choixType == '_double')
listeType = ['Conso', 'ConsoBike'];
else
listeType = [choixType];
var choixPeriode = $("#dureeGraphiqueSelect").val();
var choix = 'get' + choixType;
switch (choixPeriode) {
case "instantanee":
$("#displayDetailsArea").hide();
displayGraph(choix+"Instantane");
break;
case "troisHeures":
$("#displayDetailsArea").show();
displayGraph(choix+"ResumeTroisHeures");
break;
case "unJour":
$("#displayDetailsArea").show();
displayGraph(choix+"ResumeUnJour");
break;
case "septJours":
$("#displayDetailsArea").show();
displayGraph(choix+"ResumeSeptJours");
break;
case "unMois":
$("#displayDetailsArea").show();
displayGraph(choix+"ResumeUnMois");
break;
for(i in listeType)
{
var choixType = listeType[i];
var choix = 'get' + choixType;
switch (choixPeriode) {
case "instantanee":
$("#displayDetailsArea").hide();
displayGraph(choix+"Instantane", choixType);
break;
case "troisHeures":
$("#displayDetailsArea").show();
displayGraph(choix+"ResumeTroisHeures", choixType);
break;
case "unJour":
$("#displayDetailsArea").show();
displayGraph(choix+"ResumeUnJour", choixType);
break;
case "septJours":
$("#displayDetailsArea").show();
displayGraph(choix+"ResumeSeptJours", choixType);
break;
case "unMois":
$("#displayDetailsArea").show();
displayGraph(choix+"ResumeUnMois", choixType);
break;
}
}
}
var graphInstance = null;
var graphInstance = {};
var graphData = null;
var graphDataSets = null;
function displayGraph(actionUrl)
function displayGraph(actionUrl, choixType)
{
getData('api.php?action='+actionUrl+'&codeStation='+codeStation).then(updateGraph);
getData('api.php?action='+actionUrl+'&codeStation='+codeStation).then(function(data)
{
updateGraph(data, choixType);
});
}
function getDisplayData()
function getDisplayData(displayBike, displayInstantanne)
{
var dataDisplay = graphData;
var displayDetails = $("#displayDetails").prop('checked');
var displayInstantanne = $("#dureeGraphiqueSelect").val() == 'instantanee';
var displayBike = $("#typeGraphiqueSelect").val() == 'Bike';
if(displayInstantanne == undefined)
displayInstantanne = $("#dureeGraphiqueSelect").val() == 'instantanee';
if(displayBike == undefined)
displayBike = $("#typeGraphiqueSelect").val() == 'Bike';
if(displayInstantanne || !displayDetails)
{
if(displayBike) //Vélos
......@@ -112,17 +125,43 @@ function getDisplayData()
return dataDisplay;
}
function updateGraph(data)
function updateGraph(data, choixType)
{
if(graphInstance != null)
graphInstance.destroy();
var chartBikes = $("#chartBikes")[0].getContext('2d');
if(graphInstance != null && choixType != 'ConsoBike')
{
for(i in graphInstance)
{
var instance = graphInstance[i];
instance.destroy();
}
graphInstance = {};
}
var idChart = "#chartBikes";
var isBike;
var isInstantanne;
if(choixType == 'Conso')
{
idChart = '#chartNbStations';
isBike = false;
isInstantanne = $("#dureeGraphiqueSelect").val() == 'instantanee';
} else if(choixType == 'ConsoBike')
{
isBike = true;
isInstantanne = true;
}
else
{
isBike = $("#typeGraphiqueSelect").val() == 'Bike';
isInstantanne = $("#dureeGraphiqueSelect").val() == 'instantanee';
}
var chartBikes = $(idChart)[0].getContext('2d');
if(data != undefined)
{
graphData = data;
graphDataSets = data.data.datasets;
}
graphInstance = new Chart(chartBikes, getDisplayData());
graphInstance[choixType] = new Chart(chartBikes, getDisplayData(isBike, isInstantanne));
}
function displayDetails()
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment