Graphique de périodes

1. calculer périodes 2. créer un tableau avec toutes les dates de début et fin classées par ordre chronologique 3. comparer ce tableau à chaque période (compter le nombre de recoupements et de jours par recoupements) 4. afficher un tableau et un graphique des recoupements 5. proposer les dates qui sont les plus présentes.

by toubia95

HTML

<div class="graph">
    <span class="sgmt sgmt1 half"></span>
    <span class="sgmt sgmt2 full"></span>
    <span class="sgmt sgmt3 empty"></span>
    <span class="sgmt sgmt4 empty"></span>
    <span class="sgmt sgmt5 empty"></span>
</div>
<div class="graph">
    <span class="sgmt sgmt1 empty"></span>
    <span class="sgmt sgmt2 full"></span>
    <span class="sgmt sgmt3 half"></span>
    <span class="sgmt sgmt4 full"></span>
    <span class="sgmt sgmt5 empty"></span>
</div>
<div class="graph">
    <span class="sgmt sgmt1 empty"></span>
    <span class="sgmt sgmt2 empty"></span>
    <span class="sgmt sgmt3 empty"></span>
    <span class="sgmt sgmt4 full"></span>
    <span class="sgmt sgmt5 half"></span>
</div>
<div class="graph-2">
    <span class="sgmt-2 sgmt1 half2"></span>
    <span class="sgmt-2 sgmt2 full2"></span>
    <span class="sgmt-2 sgmt3 half2"></span>
    <span class="sgmt-2 sgmt4 full2"></span>
    <span class="sgmt-2 sgmt5 half2"></span>
</div>

CSS

.graph {
    height: 1em;
    background: rgba(0,0,0,0.02);
    margin-bottom: 0.5em;
}
.sgmt {
    float:left;
    height: 1em;
    display: inline-block;
}
.graph-2 {
    height: 1.5em;
    background: rgba(0,0,0,0.02);
    margin-bottom: 0.5em;
}
.sgmt-2 {
    float:left;
    height: 1.5em;
    display: inline-block;
}
.sgmt1 {
    width:13%;
    margin-left: 30%;
}
.sgmt2 {
    width:8%;
}
.sgmt3 {
    width:13%;
}
.sgmt4 {
    width:3%;
}
.sgmt5 {
    width:6.55555555%;
}
.empty {background:rgba(0,125,255,0);}
.half {background:rgba(0,125,255,0.1);}
.full {background:rgba(0,125,255,0.7);}
.half2 {background:rgba(0,125,255,0.2);}
.full2 {background:rgba(0,125,255,1);}