{{ header }}
&lt;div id=&quot;information-contact&quot; class=&quot;container&quot;&gt;
  &lt;ul class=&quot;breadcrumb&quot;&gt;
    {% for breadcrumb in breadcrumbs %}
    &lt;li&gt;&lt;a href=&quot;{{ breadcrumb.href }}&quot;&gt;{{ breadcrumb.text }}&lt;/a&gt;&lt;/li&gt;
    {% endfor %}
  &lt;/ul&gt;
  &lt;div class=&quot;row&quot;&gt;
    &lt;div id=&quot;content&quot; class=&quot;{{ class }}&quot;&gt;{{ content_top }}
      &lt;h1&gt;{{ heading_title }}&lt;/h1&gt;
      &lt;div class=&quot;shop-content row&quot;&gt;
        &lt;!DOCTYPE html&gt;

&lt;html&gt;

  &lt;head&gt;
	&lt;link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; href=&quot;TASK3.css&quot; media=&quot;all&quot; /&gt;
	&lt;script src=&quot;https://code.highcharts.com/highcharts.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://code.highcharts.com/modules/data.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://code.highcharts.com/modules/drilldown.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://code.highcharts.com/modules/exporting.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://code.highcharts.com/modules/export-data.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://code.highcharts.com/modules/accessibility.js&quot;&gt;&lt;/script&gt;	
  &lt;/head&gt;
  
  &lt;body&gt;
	&lt;h1&gt;&lt;/h1&gt;

	&lt;div &gt;
	    &lt;figure class=&quot;highcharts-figure&quot;&gt;
    &lt;div id=&quot;container&quot;&gt;
      &lt;/div&gt;
    &lt;p class=&quot;highcharts-description&quot;&gt;
Le prix moyen du prix est affiché, pour avoir les détails pour chaque produit il faut cliquer sur le nom de ce dernnier.
    &lt;/p&gt;
&lt;/figure&gt;
	&lt;script type=&quot;text/javascript&quot;&gt; 
// Create the chart
Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Prix moyen des produits'
    },
    subtitle: {
        text: 'Cliquer sur la colonne pour voir les détails. Source: &lt;a href=&quot;http://numherit.com&quot; target=&quot;_blank&quot;&gt;numherit.com&lt;/a&gt;'
    },
    accessibility: {
        announceNewData: {
            enabled: true
        }
    },
    xAxis: {
        type: 'category'
    },
    yAxis: {
        title: {
            text: 'Prix moyen'
        }

    },
    legend: {
        enabled: false
    },
    plotOptions: {
        series: {
            borderWidth: 0,
            dataLabels: {
                enabled: true,
                format: '{point.y:.1f}'
            }
        }
    },

    tooltip: {
        headerFormat: '&lt;span style=&quot;font-size:11px&quot;&gt;{series.name}&lt;/span&gt;&lt;br&gt;',
        pointFormat: '&lt;span style=&quot;color:{point.color}&quot;&gt;{point.name}&lt;/span&gt;: &lt;b&gt;{point.y:.2f} &lt;/b&gt;&lt;br/&gt;'
    },

    series: [
        {
            name: &quot;Prix moyen&quot;,
            colorByPoint: true,
            data: [
      {{products_graphe}}
            ]
        }
    ],
    drilldown: {
        series: [ {{products_drilldown}}
        ]
    }
});       
	&lt;/script&gt;
	&lt;/div&gt;

    &lt;!-- C'est ici que vous mettrez votre contenu  --&gt;
  &lt;/body&gt;

&lt;/html&gt;
    &lt;/div&gt;
   
  &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
{{ footer }}