Commit e6eb5fa6 authored by JonathanMM's avatar JonathanMM

Fusion des graphiques en un seul dans les stations

parent 9b35f286
......@@ -34,6 +34,26 @@ switch($_GET['action'])
echo json_encode(getBikeResume($codeStation, "-1month", 360));
exit();
break;
case 'getFreeDockInstantane':
echo json_encode(getFreeDockInstantane($codeStation));
exit();
break;
case 'getFreeDockResumeTroisHeures':
echo json_encode(getFreeDockResume($codeStation, "-3hours", 5));
exit();
break;
case 'getFreeDockResumeUnJour':
echo json_encode(getFreeDockResume($codeStation, "-1day", 15));
exit();
break;
case 'getFreeDockResumeSeptJours':
echo json_encode(getFreeDockResume($codeStation, "-7days", 60));
exit();
break;
case 'getFreeDockResumeUnMois':
echo json_encode(getFreeDockResume($codeStation, "-1month", 360));
exit();
break;
}
function getBikeInstantane($codeStation)
......@@ -69,7 +89,7 @@ function getDataBikeInstantane($codeStation)
$hier = new DateTime("-1hour");
$filtreDate = $hier->format('Y-m-d H:i:s');
$requete = $pdo->query('SELECT c.date, s.nbBike, s.nbEBike, s.nbFreeEDock, s.nbEDock
$requete = $pdo->query('SELECT c.date, s.nbBike, s.nbEBike, s.nbEDock
FROM status s
INNER JOIN statusConso c ON c.id = s.idConso
WHERE s.code = '.$codeStation.' AND c.date >= "'.$filtreDate.'"
......@@ -79,13 +99,11 @@ function getDataBikeInstantane($codeStation)
$dates = [];
$nbBikeData = [];
$nbEbikeData = [];
$nbFreeEdockData = [];
foreach($statusStation as $statut)
{
$dates[] = (new DateTime($statut['date']))->format("d/m H\hi");
$nbBikeData[] = $statut['nbBike'];
$nbEbikeData[] = $statut['nbEBike'];
$nbFreeEdockData[] = $statut['nbFreeEDock'];
}
return array(
......@@ -246,4 +264,144 @@ function getDataBikeResume($codeStation, $filtre, $periode)
)
);
}
function getFreeDockInstantane($codeStation)
{
$data = getDataFreeDockInstantane($codeStation);
$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 getDataFreeDockInstantane($codeStation)
{
global $pdo;
//Filtre 1 heure
$hier = new DateTime("-1hour");
$filtreDate = $hier->format('Y-m-d H:i:s');
$requete = $pdo->query('SELECT c.date, s.nbFreeEDock, s.nbEDock
FROM status s
INNER JOIN statusConso c ON c.id = s.idConso
WHERE s.code = '.$codeStation.' AND c.date >= "'.$filtreDate.'"
ORDER BY c.date ASC');
$statusStation = $requete->fetchAll();
$dates = [];
$nbFreeEdockData = [];
foreach($statusStation as $statut)
{
$dates[] = (new DateTime($statut['date']))->format("d/m H\hi");
$nbFreeEdockData[] = $statut['nbFreeEDock'];
}
return array(
'labels' => $dates,
'datasets' => array(
array(
'label' => 'Nombre de bornes libres',
'backgroundColor' => 'rgba(173,0,130,0.5)',
'data' => $nbFreeEdockData
)
)
);
}
function getFreeDockResume($codeStation, $filtreDate, $periode)
{
$data = getDataFreeDockResume($codeStation, $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 getDataFreeDockResume($codeStation, $filtre, $periode)
{
global $pdo;
//Filtre date
$date = new DateTime($filtre);
$filtreDate = $date->format('Y-m-d H:i:s');
$requete = $pdo->query('SELECT `date`, nbFreeEDockMin, nbFreeEDockMax, nbFreeEDockMoyenne
FROM resumeStatus
WHERE code = '.$codeStation.' AND `date` >= "'.$filtreDate.'" AND duree = '.$periode.'
ORDER BY date ASC');
$resumeStatusStation = $requete->fetchAll();
$datesResume = [];
$nbFreeEDockMinData = [];
$nbFreeEDockMaxData = [];
$nbFreeEDockMoyenneData = [];
foreach($resumeStatusStation as $statut)
{
$datesResume[] = (new DateTime($statut['date']))->format("d/m H\hi");
$nbFreeEDockMinData[] = $statut['nbFreeEDockMin'];
$nbFreeEDockMaxData[] = $statut['nbFreeEDockMax'];
$nbFreeEDockMoyenneData[] = $statut['nbFreeEDockMoyenne'];
}
return array(
'labels' => $datesResume,
'datasets' => array(
array(
'label' => 'Nombre de bornes libres (Moyenne)',
'borderColor' => 'rgba(173,0,130,0.7)',
'fill' => false,
'data' => $nbFreeEDockMoyenneData
),
array(
'label' => 'Nombre de bornes libres (Min)',
'borderColor' => 'rgba(173,0,130,0)',
'backgroundColor' => 'rgba(173,0,130,0.3)',
'fill' => "+1",
'borderDash' => [5, 5],
'data' => $nbFreeEDockMinData
),
array(
'label' => 'Nombre de bornes libres (Max)',
'borderColor' => 'rgba(173,0,130,0)',
'backgroundColor' => 'rgba(173,0,130,0.3)',
'fill' => false,
'borderDash' => [5, 5],
'data' => $nbFreeEDockMaxData
)
)
);
}
?>
\ No newline at end of file
......@@ -18,29 +18,31 @@ function getData(url)
);
}
function changerDateGraphe()
function changerGraphe()
{
var choix = $("#dureeGraphiqueSelect").val();
switch (choix) {
var choixType = $("#typeGraphiqueSelect").val();
var choixPeriode = $("#dureeGraphiqueSelect").val();
var choix = 'get' + choixType;
switch (choixPeriode) {
case "instantanee":
$("#displayDetailsArea").hide();
displayGraph("getBikeInstantane");
displayGraph(choix+"Instantane");
break;
case "troisHeures":
$("#displayDetailsArea").show();
displayGraph("getBikeResumeTroisHeures");
displayGraph(choix+"ResumeTroisHeures");
break;
case "unJour":
$("#displayDetailsArea").show();
displayGraph("getBikeResumeUnJour");
displayGraph(choix+"ResumeUnJour");
break;
case "septJours":
$("#displayDetailsArea").show();
displayGraph("getBikeResumeSeptJours");
displayGraph(choix+"ResumeSeptJours");
break;
case "unMois":
$("#displayDetailsArea").show();
displayGraph("getBikeResumeUnMois");
displayGraph(choix+"ResumeUnMois");
break;
}
}
......@@ -57,21 +59,38 @@ function getDisplayData()
{
var dataDisplay = graphData;
var displayDetails = $("#displayDetails").prop('checked');
if(!displayDetails && graphDataSets.length > 2)
var displayInstantanne = $("#dureeGraphiqueSelect").val() == 'instantanee';
var displayBike = $("#typeGraphiqueSelect").val() == 'Bike';
if(displayInstantanne || !displayDetails)
{
dataDisplay.data.datasets = [graphDataSets[0], graphDataSets[5]];
//On ajuste les couleurs des vélos mécaniques
dataDisplay.data.datasets[0].backgroundColor = 'rgba(104,221,46,0.5)';
dataDisplay.data.datasets[0].fill = true;
delete dataDisplay.data.datasets[0].borderColor;
//Et électriques
dataDisplay.data.datasets[1].backgroundColor = 'rgba(76, 213, 233,0.5)';
dataDisplay.data.datasets[1].fill = true;
delete dataDisplay.data.datasets[1].borderColor;
dataDisplay.options.scales.yAxes[0].stacked = true;
if(displayBike) //Vélos
{
if(displayInstantanne)
dataDisplay.data.datasets = graphDataSets;
else
dataDisplay.data.datasets = [graphDataSets[0], graphDataSets[5]];
//On ajuste les couleurs des vélos mécaniques
dataDisplay.data.datasets[0].backgroundColor = 'rgba(104,221,46,0.5)';
dataDisplay.data.datasets[0].fill = true;
delete dataDisplay.data.datasets[0].borderColor;
//Et électriques
dataDisplay.data.datasets[1].backgroundColor = 'rgba(76, 213, 233,0.5)';
dataDisplay.data.datasets[1].fill = true;
delete dataDisplay.data.datasets[1].borderColor;
dataDisplay.options.scales.yAxes[0].stacked = true;
}
else //Bornes
{
dataDisplay.data.datasets = [graphDataSets[0]];
//On ajuste les couleurs
dataDisplay.data.datasets[0].backgroundColor = 'rgba(173,0,130,0.5)';
dataDisplay.data.datasets[0].fill = true;
dataDisplay.options.scales.yAxes[0].stacked = true;
delete dataDisplay.data.datasets[0].borderColor;
}
} else {
dataDisplay.data.datasets = graphDataSets;
if(graphDataSets.length > 2)
if(displayBike) // Vélos
{
//On ajuste les couleurs des vélos mécaniques
dataDisplay.data.datasets[0].borderColor = 'rgba(104,221,46,0.7)';
......@@ -82,6 +101,12 @@ function getDisplayData()
dataDisplay.data.datasets[5].fill = false;
delete dataDisplay.data.datasets[5].backgroundColor;
dataDisplay.options.scales.yAxes[0].stacked = false;
} else { //Bornes
//On ajuste les couleurs
dataDisplay.data.datasets[0].borderColor = 'rgba(173,0,130,0.5)';
dataDisplay.data.datasets[0].fill = false;
delete dataDisplay.data.datasets[0].backgroundColor;
dataDisplay.options.scales.yAxes[0].stacked = false;
}
}
return dataDisplay;
......@@ -107,7 +132,8 @@ function displayDetails()
}
$(document).ready( function () {
$("#dureeGraphiqueSelect").change(changerDateGraphe);
$("#dureeGraphiqueSelect").change(changerGraphe);
$("#typeGraphiqueSelect").change(changerGraphe);
$("#displayDetails").change(displayDetails);
changerDateGraphe();
changerGraphe();
});
\ No newline at end of file
......@@ -69,9 +69,10 @@ $statusStation = $requete->fetchAll();
<li>Date d'ouverture : <?php echo $station['dateOuverture']; ?></li>
<li>Adresse la plus proche (selon <a href="https://adresse.data.gouv.fr/">BAN</a>) : <?php echo $station['adresse']; ?></li>
</ul>
<h2>Graphiques temps réel</h2>
<h2>Graphique</h2>
<select id="typeGraphiqueSelect">
<option value="bike">Vélos disponibles</option>
<option value="Bike">Vélos disponibles</option>
<option value="FreeDock">Bornes libres</option>
</select>
<select id="dureeGraphiqueSelect">
<option value="instantanee">Une heure - Instantanée</option>
......@@ -82,7 +83,6 @@ $statusStation = $requete->fetchAll();
</select>
<span id="displayDetailsArea"><input type="checkbox" id="displayDetails" /><label for="displayDetails">Afficher les détails</label></span>
<canvas id="chartBikes" width="1000" height="400"></canvas>
<canvas id="chartBornesLibres" 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></i>
<h2>Stats</h2>
<table id="stats">
......@@ -97,8 +97,6 @@ $statusStation = $requete->fetchAll();
<tbody>
<?php
//On définie les points pour les graphs
$dates = [];
$nbFreeEdockData = [];
foreach($statusStation as $statut)
{
echo '<tr>';
......@@ -107,9 +105,6 @@ $statusStation = $requete->fetchAll();
echo '<td>'.$statut['nbEBike'].'</td>';
echo '<td>'.$statut['nbFreeEDock'].'/'.$statut['nbEDock'].'</td>';
echo '</tr>';
$dates[] = $statut['date'];
$nbFreeEdockData[] = $statut['nbFreeEDock'];
}
?>
</tbody>
......@@ -117,36 +112,9 @@ $statusStation = $requete->fetchAll();
<script type="text/javascript">
<?php
echo 'var codeStation = '.$code.';'."\n";
echo 'var datesData = ["'.implode('","', $dates).'"];'."\n";
echo 'var nbFreeEdockData = ['.implode(',', $nbFreeEdockData).'];'."\n";
?>
</script>
<script type="application/javascript">
var options = {
responsive: false,
scales: {
yAxes: [{
stacked: true
}]
}
};
var chartBornesLibres = document.getElementById("chartBornesLibres").getContext('2d');
var data = {
labels: datesData,
datasets: [
{
backgroundColor : "rgba(173,0,130,0.5)",
data : nbFreeEdockData,
label: 'Nombre de bornes libres'
}
]
};
new Chart(chartBornesLibres, {
type: 'line',
data: data,
options: options
});
$(document).ready( function () {
$('#stats').DataTable({
language: {
......
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