Discussion :

[syrine01]

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:

Code :

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
 
<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>

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].

Voilà ce que j'obtiens . Il n'affiche pas tous les données du tableau que j'ai montré en haut.



merci de m'aider pour avoir graphe complète ,

[MehrezLabidi]

Bonjour,
j'ai commencé par voir le lien Edit fiddle pour comprendre de quoi il s'agit.
le " data " qui est peut etre la partie dynamique et responsable de générer les graphes etc ..
data est un array javascript , alors je propose que tu le crée au début et tu insère la dedans une par une tes valeurs pour ensuite l'utiliser rempli .

Ce code n'est qu'une proposition

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<script type="text/javascript">
        $(function () {
          var data =[];
                 {% for note in stat %}
                          data.push({{note }});
                 {% endfor %}
            $('#container').highcharts({
 ///
        series: [{
            name: //,
            data: data
///