Formatage de dates et de ToolTip

**Franck.H** · 28/07/2016, 09h16

Je suis en train de tester l'implémentation des graphique HighCharts/StockCharts. Je me heurte cependant à un problème, les dates/heures ne se formatent pas comme je l'ai spécifié:
Nom : GraphHighCharts.png
Affichages : 1112
Taille : 25,7 Ko

Nom : GraphHighCharts.png
Affichages : 1112
Taille : 25,7 Ko

Dans le ToolTip c'est carrément planté et sur l'axe des X pour les dates ce n'est pas reconnu non plus...
Voici le code:

Code javascript :

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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>TEST HIGHCHARTS</title>
    </head>
    <script src="https://code.jquery.com/jquery-3.1.0.min.js" type="text/javascript"></script>
    <script src="https://code.highcharts.com/stock/highstock.js" type="text/javascript"></script>
    <script src="https://code.highcharts.com/stock/modules/exporting.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            AffichageGraph();
        });
 
        function AffichageGraph() {
            $.ajax({
                type: "GET",
                url: 'XML/PackDO_Datas_Graphs.xml',
                dataType: 'xml',
                success: readXML,
                data: {
                    _rnd: new Date().getTime()
                }
            });
        }
 
        function readXML(xml) {
            var options = {
                rangeSelector: {
                    buttonTheme: { width: 70 },
                    buttons: [{ type: 'day', count: 1, text: '1 jour' },
                              { type: 'day', count: 7, text: '7 jours' },
                              { type: 'month', count: 1, text: '1 mois' },
                              { type: 'all', count: 1, text: 'Tous'}],
                    inputEnabled: true,
                    selected: 3
                },
 
                lang: {
                    months: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
                    weekdays: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
                    shortMonths: ['Jan', 'Fev', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil', 'Août', 'Sept', 'Oct', 'Nov', 'Déc'],
                    decimalPoint: ',',
                    resetZoom: 'Reset zoom',
                    resetZoomTitle: 'Reset zoom à 1:1',
                    downloadPNG: 'Télécharger au format PNG',
                    downloadJPEG: 'Télécharger au format JPEG',
                    downloadPDF: 'Télécharger au format PDF',
                    downloadSVG: 'Télécharger au format SVG',
                    exportButtonTitle: 'Exporter image ou document',
                    printButtonTitle: 'Imprimer le graphique',
                    loading: 'Chargement...'
                },
 
                //Informations concernant le graphe en générales
                chart: { renderTo: 'container' },
 
                //Informations concernant le graphe en générales
                title: { text: 'Mesures des hauteurs d\'eau des DO' },
 
                //Informations concernant l'axe X
                xAxis: { 
                    type: 'datetime',
                    categories: [] 
                },
 
                //Informations concernant l'axe Y
                yAxis: {
                    min: 0,
                    title: { text: 'Hauteur d\'eau' },
                    labels: { overflow: 'justify' }
                },
 
                //Informations concernant les séries de données
                series: [{
                    name: 'Sonde S1',
                    data: []
                }],
 
                dateFormat: { format: '%d/%m/%Y %H:%MM:%S' },
 
                //Informations concernant les tooltips
                tooltip: {
                    formatter: function () {
                        var s = '<b>' + Highcharts.dateFormat('%d/%m/%Y %H:%M:%S', this.x) + '</b>';
 
                        $.each(this.points, function (i, point) {
                            var unit = {
                                'Sonde S1': ' mètres'
                            }[this.point.series.name];
 
                            s = s + '<br/>';
                            s = s + '<span style="color:' + point.series.color + '">' + point.series.name + ': </span>';
                            s = s + ' <b>';
                            s = s + Highcharts.numberFormat(point.y, 1, ",", " ");
                            s = s + '</b> ';
                            s = s + unit;
                        });
 
                        return s;
                    }
                }
            };  
 
            var $xml = $(xml);      //On définie la variable xml par son contenu
            $(xml).find('dsGraphes > GET_DATAS').each(function () {
                options.xAxis.categories.push($(this).find('DTE').text());
                options.series[0].data.push(parseFloat($(this).find('VAL').text()));
            });
 
            var chart = new Highcharts.StockChart(options);
        }
    </script>
    <body>
        <div id="container" style="width:800px; height:400px; margin:auto;"></div>
    </body>
</html>

J'ai l'impression qu'en fait, il ne reconnaît pas ma série de date/heure. Si jamais quelqu'un vois de quoi cela peut venir ...

[EDIT]
Mon fichier et mes données sont formatés de cette manière:

Code xml :

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
<?xml version="1.0" standalone="yes"?>
<dsGraphes xmlns="http://tempuri.org/dsGraphes.xsd">
  <GET_DATAS>
    <DTE>2015-07-01T00:00:00+02:00</DTE>
    <VAL>0.11</VAL>
    <ID_POS>S1</ID_POS>
  </GET_DATAS>
  <GET_DATAS>
    <DTE>2015-07-01T01:00:00+02:00</DTE>
    <VAL>0.11</VAL>
    <ID_POS>S1</ID_POS>
  </GET_DATAS>
  <GET_DATAS>
    <DTE>2015-07-01T02:00:00+02:00</DTE>
    <VAL>0.10</VAL>
    <ID_POS>S1</ID_POS>
  </GET_DATAS>
  <GET_DATAS>
    <DTE>2015-07-01T02:14:21+02:00</DTE>
    <VAL>0.10</VAL>
    <ID_POS>S1</ID_POS>
  </GET_DATAS>
  <GET_DATAS>
    <DTE>2015-07-01T03:00:00+02:00</DTE>
    <VAL>0.11</VAL>
    <ID_POS>S1</ID_POS>
  </GET_DATAS>
  <GET_DATAS>
    <DTE>2015-07-01T04:00:00+02:00</DTE>
    <VAL>0.11</VAL>
    <ID_POS>S1</ID_POS>
  </GET_DATAS>
  <GET_DATAS>
    <DTE>2015-07-01T05:00:00+02:00</DTE>
    <VAL>0.11</VAL>
    <ID_POS>S1</ID_POS>
  </GET_DATAS>
  <GET_DATAS>
    <DTE>2015-07-01T06:00:00+02:00</DTE>
    <VAL>0.14</VAL>
    <ID_POS>S1</ID_POS>
  </GET_DATAS>
</dsGraphes>

[/EDIT]

**mathieu** · 28/07/2016, 22h40

est ce que tu as déjà essayé en passant des valeur fixes ?
parce que dans le "tooltip", "this.x" vaut 0, 1, 2,... et il n'y a pas de trace de la date

même question pour les libellé de la barre des abscisses puisque j'ai trouvé un exemple là qui se fait après la création de l'objet "charts"
http://api.highcharts.com/highcharts#Axis.setCategories

**mathieu** · 28/07/2016, 23h00

je crois que j'ai trouvé ce que tu veux faire là : http://www.highcharts.com/demo/splin...ime/grid-light

donc en s'inspirant de ça, le remplissage des données est comme ça :

Code :

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

1
2
3
4
$(xml).find('GET_DATAS').each(function () {
    var date = new Date($(this).find('DTE').text());
    options.series[0].data.push({x: date, y: parseFloat($(this).find('VAL').text())});
});

et pour le "tooltip" changer juste la 1re ligne :

Code :

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

var s = '<b>' + this.x.toLocaleFormat("%d/%m/%Y %H:%M:%S") + '</b>';

**Franck.H** · 29/07/2016, 08h31

Salut, merci pour la correction mais les données ne s'affichent pas sur le graphiques

**mathieu** · 29/07/2016, 11h04

et bin chez moi ça marche nananère

j'ai repris le code plus haut avec le contenu XML et ça donne ça :

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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>TEST HIGHCHARTS</title>
    </head>
    <script src="https://code.jquery.com/jquery-3.1.0.min.js" type="text/javascript"></script>
    <script src="https://code.highcharts.com/stock/highstock.js" type="text/javascript"></script>
    <script src="https://code.highcharts.com/stock/modules/exporting.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            AffichageGraph();
        });
 
        function AffichageGraph() {
            $.ajax({
                type: "GET",
                url: 'XML/PackDO_Datas_Graphs.xml',
                dataType: 'xml',
                success: readXML,
                data: {
                    _rnd: new Date().getTime()
                }
            });
        }
 
        function readXML(xml) {
            var options = {
                rangeSelector: {
                    buttonTheme: { width: 70 },
                    buttons: [{ type: 'day', count: 1, text: '1 jour' },
                              { type: 'day', count: 7, text: '7 jours' },
                              { type: 'month', count: 1, text: '1 mois' },
                              { type: 'all', count: 1, text: 'Tous'}],
                    inputEnabled: true,
                    selected: 3
                },
 
                lang: {
                    months: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
                    weekdays: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
                    shortMonths: ['Jan', 'Fev', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil', 'Août', 'Sept', 'Oct', 'Nov', 'Déc'],
                    decimalPoint: ',',
                    resetZoom: 'Reset zoom',
                    resetZoomTitle: 'Reset zoom à 1:1',
                    downloadPNG: 'Télécharger au format PNG',
                    downloadJPEG: 'Télécharger au format JPEG',
                    downloadPDF: 'Télécharger au format PDF',
                    downloadSVG: 'Télécharger au format SVG',
                    exportButtonTitle: 'Exporter image ou document',
                    printButtonTitle: 'Imprimer le graphique',
                    loading: 'Chargement...'
                },
 
                //Informations concernant le graphe en générales
                chart: { renderTo: 'container' },
 
                //Informations concernant le graphe en générales
                title: { text: 'Mesures des hauteurs d\'eau des DO' },
 
                //Informations concernant l'axe X
                xAxis: { 
                    type: 'datetime',
                    categories: [] 
                },
 
                //Informations concernant l'axe Y
                yAxis: {
                    min: 0,
                    title: { text: 'Hauteur d\'eau' },
                    labels: { overflow: 'justify' }
                },
 
                //Informations concernant les séries de données
                series: [{
                    name: 'Sonde S1',
                    data: []
                }],
 
                dateFormat: { format: '%d/%m/%Y %H:%MM:%S' },
 
                //Informations concernant les tooltips
                tooltip: {
                    formatter: function () {
                    	var s = '<b>' + this.x.toLocaleFormat("%d/%m/%Y %H:%M:%S") + '</b>';                    	 
                        $.each(this.points, function (i, point) {
                            var unit = {
                                'Sonde S1': ' mètres'
                            }[this.point.series.name];
 
                            s = s + '<br/>';
                            s = s + '<span style="color:' + point.series.color + '">' + point.series.name + ': </span>';
                            s = s + ' <b>';
                            s = s + Highcharts.numberFormat(point.y, 1, ",", " ");
                            s = s + '</b> ';
                            s = s + unit;
                        });
 
                        return s;
                    }
                }
            };  
 
            var $xml = $(xml);      //On définie la variable xml par son contenu
 
            $(xml).find('GET_DATAS').each(function () {
                var date = new Date($(this).find('DTE').text());
                options.series[0].data.push({x: date, y: parseFloat($(this).find('VAL').text())});
            });
 
            var chart = new Highcharts.StockChart(options);
        }
    </script>
    <body>
        <div id="container" style="width:800px; height:400px; margin:auto;"></div>
    </body>
</html>

**Franck.H** · 29/07/2016, 12h04

Ca marche pas chez moi. Lorsque je fait:

Code :

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

options.series[0].data.push(parseFloat($(this).find('VAL').text()));

Les données de mesures s'affichent

[EDIT]
J'ai regardé avec le debug de Chrome (j'utilise Brackets en réalité mais même sous IE et FireFox cela ne marche pas mieux), les données sont présentes:
Nom : debug-highcharts.png
Affichages : 1031
Taille : 40,8 Ko

Nom : debug-highcharts.png
Affichages : 1031
Taille : 40,8 Ko

**mathieu** · 29/07/2016, 18h05

je viens de lire que "toLocaleFormat" n'est pas une méthode qui fonctionne pas sur tous les navigateurs
tu n'as pas eu de message d'erreur dans la console au moment où aurait dû s'afficher le petit cadre ?

**Franck.H** · 05/09/2016, 13h40

Je reviens à la charge après de très longues vacances... J'ai ceci comme erreur:

Highcharts Error #12

Highcharts expects point configuration to be numbers or arrays in turbo mode

This error occurs if the series.data option contains object configurations and the number of points exceeds the turboThreshold. It can be fixed by either setting the turboThreshold option to a higher value, or changing your point configurations to numbers or arrays. See turboThreshold.

Sauf que j'y comprend rien

J'avoue qu'en réalité, le fichier XML contient dans les 12.000+ entrées

**Franck.H** · 05/09/2016, 16h01

Bon... En changeant mon graphique en Spline:

Code :

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

chart: { renderTo: 'container', type: 'spline' },

et en changeant le turboThreshold:

Code :

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

1
2
3
4
5
plotOptions: {
  spline: {
      turboThreshold: 1000000
  }  
},

J'arrive enfin a afficher mon graphique... il me reste plus qu'à afficher correctement les ToolTips ...

Formatage de dates et de ToolTip

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager