Cette carte interactive a été générée grâce à l'app embedMap : https://www.owlapps.net/modules/owlapps_apps/embedmap

<script src = "https://www.owlapps.net/modules/owlapps_apps/embedmap/main.js" language="javascript" defer></script>
    
<div name="Single symbol per line"  data-owlappsmaplyrgroup = "yes">

  <iframe name= "Sencha Ext Js Histogram as a symbol"   style = "border:none;width:100%;height:100%;min-height:400px;" data-owlappsmap = "yes" >
    
    <kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom">  
       
      <Document>
      
        <open> 1 </open>
      
        <name>
        
          Lines and polylines
        
        </name>
        
        <Snippet>
          
          <![CDATA[
            
            Histograms made with <a href="https://www.sencha.com/products/extjs" target="_blank" >Sencha Ext Js</a> library!<br/>
            Set the &lt;repeat> tag to 0% or 100% (in order to have only a single symbol) and set the &lt;offSet> tag to 50% (if you want the symbol in the middle of the line).
            
          ]]>
        
        </Snippet>
        
        <open> 1 </open>
        
        <Style id= "lines" >
     
          <BalloonStyle>
            <text>
            
              
              <![CDATA[
                __geolink__: <br/>
              
                $[parts/displayName]  
              ]]>
            </text>
          </BalloonStyle>
          
          
          <LineStyle>
          
            <richDecos>
            
              <raw>
                  
                <content>
                
                  <![CDATA[
                    <!--  use %26 instead of & as URL query string separator because of Google Chrome web web browser -->
                    <iframe alt="Bar Chart" loading="lazy" style="pointer-events:none;overflow:hidden;height:100px;width:120px;border:none;background-color:black;"  src="/modules/owlapps_apps/embedmap/barchartgen.html?values=$[parts]%26name=$[name]%26nocache=eee9df" />
                  
                  ]]>
                  
                </content>
                
                <anchor>
                
                  <hotSpot x="0.5" y="0.5" xunits="fraction" yunits="fraction" /> 
                
                </anchor>
                
                <repeat>  0% </repeat>
                  
                <offSet> 50%  </offSet>
                
                <rotate> false </rotate>
                
              </raw>
                  
            </richDecos>
           
          </LineStyle>
          
        </Style>
        
        <Placemark>
        
          <styleUrl>
          
            #lines
            
          </styleUrl>
          
          <name>
          
            Line
          
          </name>
        
          <LineString>
              
            <coordinates>
            
              55.2887,-21.04862 55.6897,-21.00247
              
            </coordinates>
          
          </LineString> 
          
          <ExtendedData> 
            <Data name="parts">
              <displayName>
                <![CDATA[
                  <span style="color:#94ae0a" ><b> Part 1 </b>: 33.33%</span><br/>
                  <span style="color:#115fa6" ><b> Part 2 </b>: 33.33%</span><br/>
                  <span style="color:#a61120" ><b> Part 3 </b>: 33.33%</span><br/>
                ]]>
              </displayName>
              <value> 33.33,33.33,33.33 </value>
            </Data>
          </ExtendedData> 
        
        </Placemark>
        
        <Placemark>
        
          <styleUrl>
          
            #lines
            
          </styleUrl>
          
          <name>
          
            Polyline
          
          </name>
        
          <LineString>
              
            <coordinates>
            
              2.33935,48.85777 2.33935,44.85777 -24,33 0,0
              
            </coordinates>
          
          </LineString> 
          
          <ExtendedData> 
            <Data name="parts">
              <displayName>
                <![CDATA[
                  <span style="color:#94ae0a" ><b> Part 1 </b>: 70%</span><br/>
                  <span style="color:#115fa6" ><b> Part 2 </b>: 15%</span><br/>
                  <span style="color:#a61120" ><b> Part 3 </b>: 15%</span><br/>
                ]]>
              </displayName>
              <value>  70,15,15  </value>
            </Data>
          </ExtendedData> 
        
        </Placemark>
        
      </Document>        
      
    </kml>
    
  </iframe> 

</div>

<!DOCTYPE html>
<html>

  <head>
    <meta name="MobileOptimized" content="width" />
    <meta name="HandheldFriendly" content="true" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <meta charset="utf-8">
 
   
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" 
         rel = "stylesheet" />
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/packages/charts/classic/charts.js"></script>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/packages/charts/classic/classic/resources/charts-all.css" 
         rel = "stylesheet" />
      
      <script type = "text/javascript">
         Ext.onReady(function() {
         
            const queryString = window.location.search,
            urlParams = new URLSearchParams(decodeURIComponent(queryString));
            let values = urlParams.get('values').replace(/\s/g,'').split(',');
              
            Ext.create('Ext.chart.CartesianChart', {
               renderTo: document.body,
               width: 120,
               height: 100,
               flipXY: false,
               store: {
                  fields: ['name', 'g1', 'g2', 'g3'],
                  data: [
                     {"name": "", "g1": parseFloat(values[0]) , "g2": parseFloat(values[1]), "g3": parseFloat(values[2])}
                  ]
               },
               axes: [
               {
                  type: 'numeric',
                  position: 'left',
                  grid: false,
                  minimum: 0
               },
               {
                  type: 'category',
                  title: urlParams.get('name').trim(),
                  position: 'bottom',
                  hidden:false
               } 
               ],
               series: [{
                  type: 'bar',
                  xField: 'name',
                  yField: ['g1', 'g2', 'g3'],
                  axis: 'left'
               }]
            });
         });
      </script>
   </head>
   
   <body>
   </body>
</html>