Bonjour à tous,

Avec Openlayers (javascript) je veux afficher une carte puis quand je clique sur une parcelle, des infos s'affichent dans une div et un graphique s'affiche dans une autre div. Le tout simultanément.
Voici le code
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!doctype html>
<html lang="en">
  <head>
 
    <link rel="stylesheet" href="http://openlayers.org/en/v3.18.2/css/ol.css" type="text/css">
    <script src="http://openlayers.org/en/v3.18.2/build/ol.js" type="text/javascript"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
 
 
  </head>
 
  <body >
 
    <div style="width:50%; height:100px" id="map"></div>
     <div id="attributsdiv"  style="float:left; border-radius: 15px; height:150px; width:35%; )" title="Attributs"></div>
    <div id="Temp" style="height: 100px"></div>
 
      <script defer="defer" type="text/javascript">
      var displayFeatureInfo = function(pixel) {
        var features = [];
        map.forEachFeatureAtPixel(pixel, function(feature, layer) {
          features.push(feature);
        });
       
        var container = document.getElementById('attributsdiv');
        if (features.length > 0) {
          var info = [];
          for (var i = 0, ii = features.length; i < ii; ++i) {
            info.push("identifiant : ");
            info.push(features[i].get('id'));
            
          }
          container.innerHTML = info.join(' ') || '(unknown)';
        } else {
          container.innerHTML = '&nbsp;';
        }
      };
                //géométrie 
        var styles = {
         
          'Polygon': new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: 'green',
              width: 3
            }),
            fill: new ol.style.Fill({
              color: 'rgba(255, 255, 00, 0.1)'
            })
          }),
          
        };
                //
        var styleFunction = function(feature) {
          return styles[feature.getGeometry().getType()];
        };
                
        var geojson_OGRGeoJSON = {"type": "FeatureCollection",
                        "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:EPSG::3857" } },
 
                        "features": [
                        { "type": "Feature", "properties": {  "id": 10001},  "geometry": { "type": "Polygon", "coo77650248631835 ], [ 71160.116463575439411, 5403315.206466018222272 ], [ 72126.149296538918861, 5403141.750761945731938 ], [ 71118.4, 5403068.5 ], [ 72101.3, 5403064.5], [ 71043.0, 5403060.9 ], [ 71954.8, 5403067.8 ], [ 71802.6, 5403096.4 ], [ 70775.9, 5403103.1 ], [ 71817.7, 5403197.2 ], [ 71841.1, 5403248.1 ], [ 70847.6, 5403281.8 ], [ 71843.1, 5404343.9 ], [ 71828.6, 5403403.9], [ 70822.7, 5403449.9 ], [ 70796.9, 5403601.8 ], [ 70793.9, 5403627.6 ], [ 71799.8, 5404670.4] ] ] } },
                        ]
                        }
        var vectorSource = new ol.source.Vector({                                       
                features: (new ol.format.GeoJSON()).readFeatures(geojson_OGRGeoJSON)
                                  });
        
        var monGeojsonLayer = new ol.layer.Vector({
            source: vectorSource,
            style: styleFunction
          });
        var map = new ol.Map({
            target: 'map',
            layers: [
              new ol.layer.Tile({
                source: new ol.source.OSM()
              }),monGeojsonLayer
            ],
            view: new ol.View({
              center: ol.proj.fromLonLat([1.2, 44.55]),
              zoom: 6
            })
          }); 
 
        <!--graph-->
         var graph = document.getElementById('Temp');
          $(document).ready(function () {
        $('#graph').highcharts({
 
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },
 
            series: [{
                data: [10.9, 12.5, 9.4, 9.2, 14.0, 16.0, 15.6, 18.5, 21.4, 14.1, 9.6, 5.4]
            }]
        });
 
    }); 
               
                <!--variables reagissant au clic souris-->
      function Click(evt) {
        var pixel = evt.pixel;
        displayFeatureInfo(pixel);
        var graph;
        
      map.on('click');  
 
    </script>
 
 
  </body>
</html>

1° ma div pour le graph ne s'affiche pas: qu'ai-je oublié et où?
2° mon graph traduit les infos données d'un csv. Je voudrais savoir s'il peut afficher en dynamique certaines des infos de la table attributaire de la parcelle.
Par exemple dans la première div il y a des infos générales et dans la div2 les colonnes avec les températures s'affichent sous forme de graph.
L'idée serait qu'à chaque clic sur une parcelle les infos changent.

Pourriez-vous m'aider?
Merci
GUL75