Probléme d'affichage des données dans une charte graphique

Bonsoir,

Je suis entrain d'afficher des charts graphiques avec des données dynamiques dans mon projet. J'ai fais des recherches sur google et je trouve le "highCharts".
Donc j'ai l'intégré étape par étape dans mon projet.
L'encadrant de ce projet a choisi le type de charte suivant : ICI

En effet, Je cherche a créer un graphe statistique(barChart) avec les données suivantes:

Le code de ma vue:

<script type="text/javascript">
        $(function () {
            $('#container').highcharts({
                chart: {
                    type: 'bar'
                },
                title: {
                    text: 'Graphe Conformité ISO 27002'
                },
                colors: [
                    '#eb0600',
                    '#ff7a09',
                    '#008b3a'
                ],
                xAxis: {
                    categories:
                     [

                         {% for st in stat %}

                             '{{ st.prefixe }}.{{ st.nom_chapitre }}',

                         {% endfor %}
                     ],
                    title: {
                        text: null
                    }
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: ' [0..4]',
                        align: 'high'
                    },
                    labels: {
                        overflow: 'justify'
                    },
                    tickInterval: 1000
                },
                tooltip: {
                    valueSuffix: '  Note'
                },
                plotOptions: {
                    bar: {
                        dataLabels: {
                            enabled: true
                        }
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'top',
                    x: -40,
                    y: 80,
                    floating: true,
                    borderWidth: 1,
                    backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
                    shadow: true
                },
                credits: {
                    enabled: false
                },
                series:
                 [
                   //***ici le probléme***
                     {% set previous ="" %}
                     {% for note in stat %}

                     {% if note.noteChp in range(0, 0,99) or previous in range(0, 0,99) %}

                        {
                         name: 'Faible',
                         data: [ {{ note.noteChp|round(2,'floor') }} ]
                        },
                     {% set previous = note.noteChp|round(2,'floor') %}

                     {% elseif note.noteChp >=1 and  note.noteChp <= 1.99 or ( previous >=1 and  previous <= 1.99) %}

                         {
                         name: 'Moyen',
                         data: [ {{ note.noteChp|round(2,'floor') }} ]
                         },
                     {% set previous = note.noteChp|round(2,'floor') %}
                     {% else %}

                       {
                         name: 'haute',
                         data: [ {{ note.noteChp|round(2,'floor') }} ]
                       }
                     {% endif %}

                   {% endfor %}

                 ]
            });
        });
    </script>

Ce que je veux

Afficher un graphe organisé selon mes données.

Ce que j'obtiens

le probléme toujours proviens d'aprés la variable "data" de script car dans ce cas j'ai 2 variables (2 et 3) appartiennent au même intervalle v £ [2 ..4].

Merci de m'aider,