&lt;div class=&quot;row&quot; style=&quot;background:#fff!important;&quot;&gt;
    &lt;div class=&quot;col-sm-9&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 language=&quot;javascript&quot; type=&quot;text/javascript&quot; src=&quot;https://code.highcharts.com/highcharts.js&quot;&gt;&lt;/script&gt;
	&lt;script language=&quot;javascript&quot; type=&quot;text/javascript&quot; src=&quot;https://code.highcharts.com/modules/exporting.js&quot;&gt;&lt;/script&gt;
	
  &lt;/head&gt;
  
  &lt;body&gt;
	&lt;h1&gt;&lt;/h1&gt;
	&lt;div id=&quot;container&quot; style=&quot;min-width: 100%; max-width: 800px; height: 400px; margin: 0 auto&quot;&gt;
	
	&lt;script type=&quot;text/javascript&quot;&gt; 
Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Prix moyen des produits'
    },
    subtitle: {
        text: 'Source: &lt;a href=&quot;http://numherit.com&quot;&gt;Numherit&lt;/a&gt;'
    },
    xAxis: {
        type: 'category',
        labels: {
            rotation: -45,
            style: {
                fontSize: '13px',
                fontFamily: 'Verdana, sans-serif'
            }
        }
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Prix moyen'
        }
    },
    legend: {
        enabled: false
    },
    tooltip: {
        pointFormat: 'Prix moyen: &lt;b&gt;{point.y:.1f} &lt;/b&gt;'
    },
    series: [{
        name: 'Population',
        data: [ {{products_column}}
        ],
        dataLabels: {
            enabled: true,
            rotation: -90,
            color: '#FFFFFF',
            align: 'right',
            format: '{point.y:.1f}', // one decimal
            y: 10, // 10 pixels down from the top
            style: {
                fontSize: '13px',
                fontFamily: 'Verdana, sans-serif'
            }
        }
    }   , {
        type: 'pie',
        name: &quot;tendance de l'année&quot;,
        data: [{{products_graphe}}],
        center: [10, 0],
        size: 100,
        showInLegend: false,
        dataLabels: {
            enabled: false
        }
    }]
});
              
	&lt;/script&gt;
	&lt;/div&gt;

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

&lt;/html&gt;
     &lt;!-- {{blog}} --&gt;
  &lt;/div&gt;
  
    &lt;div class=&quot;col-sm-3&quot;&gt;
      &lt;table  border=&quot;0&quot; cellspacing=&quot;3&quot; cellpading=&quot;0&quot; style=&quot;border-collapse: separate;text-indent: initial;border-spacing: 2px;&quot;&gt;
        &lt;tr style=&quot;background:url(image/bg_titre.png) repeat-y top left;border-color: inherit;&quot;&gt;
          &lt;td width=&quot;38&quot; align=&quot;center&quot; valign=&quot;middle&quot;&gt;&lt;img src=&quot;image/puce.png&quot; width=&quot;37&quot; height=&quot;39&quot;&gt; &lt;/td&gt;
        &lt;td width=&quot;268&quot; align=&quot;left&quot; valign=&quot;middle&quot; style=&quot;color: #EBDF00;&quot;&gt; ESPACES OPÉRATEUR &lt;/td&gt;
        &lt;/tr&gt;
        &lt;!--&lt;tr&gt; &lt;td width=&quot;11%&quot; align=&quot;center&quot; valign=&quot;middle&quot;&gt; &lt;img src=&quot;image/puce2.png&quot; width=&quot;19&quot; height=&quot;19&quot;/&gt; &lt;/td&gt; 
          &lt;td&gt;dreee &lt;/td&gt; &lt;/tr&gt; --&gt;
      &lt;/table&gt;
      &lt;table  border=&quot;0&quot; cellspacing=&quot;3&quot; cellpading=&quot;0&quot; style=&quot;border-collapse: separate;text-indent: initial;border-spacing: 2px;&quot;&gt;
        &lt;tr style=&quot;background:url(image/bg_titre.png) repeat-y top left;border-color: inherit;&quot;&gt;
          &lt;td width=&quot;38&quot; align=&quot;center&quot; valign=&quot;middle&quot;&gt;&lt;img src=&quot;image/puce.png&quot; width=&quot;37&quot; height=&quot;39&quot;&gt; &lt;/td&gt;
        &lt;td width=&quot;268&quot; align=&quot;left&quot; valign=&quot;middle&quot; style=&quot;color: #EBDF00;&quot;&gt; ANNONCES&lt;/td&gt;
        &lt;/tr&gt;
            {% for article in articles %}
         &lt;tr&gt; 
        &lt;td width=&quot;11%&quot; align=&quot;center&quot; valign=&quot;middle&quot;&gt; &lt;img src=&quot;image/puce2.png&quot; width=&quot;19&quot; height=&quot;19&quot;/&gt; &lt;/td&gt;
           &lt;td&gt; &lt;a href=&quot;index.php?route=blog/article&amp;article_id={{article.article_id}}&quot;&gt; {{article.name}}&lt;/a&gt; &lt;/td&gt;
        &lt;/tr&gt;
          {% endfor %}
      &lt;/table&gt;
  &lt;/div&gt;
   &lt;/div&gt;