![](/sites/g/files/dvc3096/files/styles/crop_freeform/public/image/2018/02/BEV_Techno_Map_init_900_1.gif?h=731e6f41&itok=9EbOxXxN "BEV techno map init")   



   ![](/sites/g/files/dvc3096/files/styles/crop_freeform/public/image/2018/02/BEV_TechnoMap_boucle.gif?h=920929c4&itok=fTSaU7ZA "BEV technomap boucle")   



 Pour voir à taille réelle : clique droit > ouvrir dans un nouvel onglet



 

 

 



 
.graphique-ENR {
    width: 100%;    
}        
        
.graphique {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: Arial, Helvetica, sans-serif;
    overflow: hidden;
}

.titre {
    margin: 25px;
    font-size: 1.25em;
    font-weight: bold;
    color: #2ecc71;
}

.graph_block{
    width: 100%;
    height: 500px;
    border: 1px solid black;

    display: flex;
    justify-content: center;
    align-items: center;

    position: relative;
    padding-bottom: 100px;
}

.start {
    margin-top: 50px;
    width: 250px;
    height: 50px;
    background: none;

    border-radius: 10px;
    border-color: #2c3e50;

    color: #2c3e50;
    cursor: pointer;
}

.start:hover {
    background: #2c3e50;
    color: white;
    border: 5px solid rgba(255, 255, 255, 0.25);
}

.mw_scale {
    width: 100%;
    height: 400px;
    position: absolute;
    top: 20px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;


}

.mw {
    margin-left: calc(15% - 20px);
    position: relative;
}

.mw:after {
    content: '';
    position: absolute;
    width: 100vw;
    height: 1px;
    background: #f1c40f;
    bottom: 0; left: 0;
}


.time_scale {
    width: 75%;
    height: 500px;
    position: absolute;

    display: flex;
    justify-content: center;
    align-items: flex-end;
}



.month {
    width: 5%;
    margin-bottom: 15px;
    transform: rotate(-45deg);
    text-align: center;
    font-size: 90%;
    margin-right: 2px;
    margin-left: 2px;
}

.barre1 {
    width: 100%;
    height: 5px;
    background: #2c3e50;

    position: absolute;
    bottom: 175px;
}

.barre2 {
    width: 5px;
    height: 500px;
    background: #2c3e50;

    position: absolute;
    left: 15%;
}

.valeurs {
    width: 75%;
    height: 400px;
    color: #000aff;
    position: absolute;
    top: 20px;

    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.val {
    width: 5%;
    height: 0px;
    margin-right: 2px;
    margin-left: 2px;
}

.valeurs-1 .val{
    background: #f1c40f;
}

.valeurs-2 .val{
    background: #3498db;
}

.valeurs-3 .val{
    background: #2ecc71;
}

.mw-text {
   position: absolute;
    left: calc(10% - 60px); top: 50%;
    transform: rotate(-90deg);
    font-size: 1.25em;
    font-weight: bold;
}

.time-text {
    position: absolute;
    bottom: -60px;
    font-size: 1.25em;
    font-weight: bold;
}



.legende {
    width: 200px;
    height: 121px;
    border: solid #f1c40f 1px;
    background: rgba(255, 255, 255, 0.5);
    position: absolute;
    right: 0;  top: 0;
}

.legende-infos {
    width: 25px;
    height: 25px;
    margin: 10px;
}

.legende-infos:after {
    content: attr(data-titre);
    position: absolute;
    margin-left: 30px;
    line-height: 25px;
}

.couleurJaune {
    background: #f1c40f;
}

.couleurBleu {

    background: #3498db;
}

.couleurVert {
    background: #2ecc71;
}


.ENR-val {
    height: 58%;
    width: 5px;
    position: absolute;
    left: calc(85% + 15px);
    display: flex;
    justify-content: center;
    align-items: center;
}

.ENR-val:after {
    content: attr(data-enr);
    width: 85px;
    position: absolute;
    top: calc(50% - 10px);
    left: 10px;
    font-size: 1.25em;
    font-weight: bold;
    color: #e74c3c;
    text-align: center;
}

.enr-indicator {
    height: 0%;
    width: 5px;
    background: #c0392b;
}
.graph_block, .graph_block * {
    -webkit-box-sizing: initial;
    box-sizing: initial;
    overflow-wrap: initial;
    word-wrap: initial;
}
    Principe de la demande énergétique couverte par Blagnac Energies Vertes au cours de l'année

Mwh heure

9

8

7

6

5

4

3

2

1

0

 

Période de l'année

Juillet

Août

Septembre

Octobre

Novembre

Décembre

Janvier

Fevrier

Mars

Avril

Mai

Juin

 



 

























 

























 

























 





Répartition







 

 

 Lancer animation 

 

 
 
$(function(){
    
    $('#start').click(function(){
        $('.val').css('height','0%');
        $('.val').each(function(){
            var height_cible = $(this).attr('data-height')+'%';
            $(this).animate({
                height: height_cible
            }, 1000);
        });
        
        $('.enr-indicator').css('height','0%');
        $('.enr-indicator').animate({
                height: "100%"
            }, 1000);
        
        var data_infos=[]
        var data_pourcentage=[]
        $('.legende-infos').each(function(){
            let infos = $(this).attr('data-infos');

            data_infos.push(infos);
            data_pourcentage.push(($(this).attr('data-pourcentage')));
            
            $(this).attr('data-titre', infos);
            
        });
        
        var percent1 = 0;
        var interval1 = setInterval(function(){
            let infos = "";
            if (percent1 == data_pourcentage[0]) {
                clearInterval(interval1);
            }else {
                percent1 = percent1+1;
                infos = data_infos[0]+' '+percent1+'%';
                $('.couleurJaune').attr('data-titre', infos);
            }
        },90.90);
            
        
        var percent2 = 0;
        var interval2 = setInterval(function(){
            let infos = "";
            if (percent2 == data_pourcentage[1]) {
                clearInterval(interval2);
            }else {
                percent2 = percent2+1;
                infos = data_infos[1]+' '+percent2+'%';
                $('.couleurBleu').attr('data-titre', infos);
            }
        },16.4);
        
        
        var percent3 = 0;
        var interval3 = setInterval(function(){
            let infos = "";
            if (percent3 == data_pourcentage[2]) {
                clearInterval(interval3);
            }else {
                percent3 = percent3+1;
                infos = data_infos[2]+' '+percent3+'%';
                $('.couleurVert').attr('data-titre', infos);
            }
        },35.7);

        var percent4 = 0;
        var interval4 = setInterval(function(){
            let infos = "";
            if (percent4 == 70) {
                clearInterval(interval4);
            }else {
                percent4 = percent4+1;
                infos =' Tx EnR : ' + '≥ ' + percent4 + '%';
                $('.ENR-val').attr('data-enr', infos);
            }
        },13.5);   
        
        
    });  
    
    
    
    
});