Discussion :

[dudux2]

Bonjour,

J'utilise actuellement une dizaine de graphique affiché sur la même page avec beaucoup de données, plusieurs million chacun.

Je téléchargeais les données depuis une base de données mysql, mise en forme dans une variable et pour ensuite les affichées.

Ma page prend du coup un peut de temps avant de s'affiché...

=> J'ai donc opté pour un affichage asynchrone des données et l'idéale serait que les graphique se mettent a jour en live lorsque les données sont mises à jour.

Pour info:
-J'ai créer mon fichier http://192.168.1.1/updateData.php qui récupère les données dans la base de données Mysql pour mettre mes données dans des fichiers séparés (au format highstock). Ce fichier est appelé toute les 5 minutes par le planificateur de tâche pour mettre a jour les fichiers de données

-Voici un exemple du contenu de ces fichiers de données http://192.168.1.1/dataFile/temp1.data (dans mon exemple plus bas on aura besoin de temp1, temp2, temp3, temp4, temp5, hygro1)

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
 
/* temp1 Duduino data asynchrone API */
[
[1450956890000, 23.5],
[1450957070000, 23.5],
[1450957130000, 23.5],
[1450957190000, 23.5],
[1450957250000, 23.5],
[1450957370000, 23.5],
[1450957430000, 23.5],
[1450957490000, 23.4],
[1450957550000, 23.4],
[1450957670000, 23.5],
[1450957730000, 23.5],
[1450957910000, 23.5],
[1450958030000, 23.5],
[1450958150000, 23.5],
[1450958210000, 23.5],
[1450958390000, 23.5]
]

Voici mon code html que j'aimerais modifié avec votre aide (pour adapté au mode asynchrone)

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
 
		<script type='text/javascript'>
			<!--
			$(function () {	// Create the chart
 
				// TEMPERATURE
				$('#temps_charts').highcharts('StockChart',{	
 
				<?php include('scriptsJS/highstockOptions.js'); ?>
 
					title: { text: '<?php echo LANG_temp; ?> - <?php echo LANG_hygro; ?>', x: 0 },
 
				    yAxis: [
					       { // Primary yAxis
                                labels: 
                                { 
                                    formatter: function() { return this.value +' <?php echo $_COOKIE['tempUnit']?>'; }
                                },
 
                                title: { text: '<?php echo LANG_temp; ?> (<?php echo $_COOKIE['tempUnit']?>)'},
                                plotLines: [{ value: 0, width: 1, color: '#808080' }]
                            },
 
							{ // Secondary yAxis  
                                gridLineWidth: 0,
 
                                labels: 
                                {
                                    formatter: function() { return this.value +' %'; },
				                    style: { color: '#9D66CC' }
                                },
 
                                title: 
                                {
                                    text: '<?php echo LANG_hygro; ?> (%)',
                                    style: { color: '#9D66CC' }
                                },
 
                                opposite: true
				            }	
						   ],
 
					series: 
                    [	
                        { name: '<?php echo LANG_heating1; ?>', data: [<?php echo $data['temp1'] ?>], type: 'spline', yAxis: 0, zIndex: 4, tooltip: { valueSuffix: ' <?php echo $_COOKIE['tempUnit']?>'} },
                        { name: '<?php echo LANG_heating2; ?>', data: [<?php echo $data['temp2'] ?>], type: 'spline', yAxis: 0, zIndex: 3, tooltip: { valueSuffix: ' <?php echo $_COOKIE['tempUnit']?>'} },
                        { name: '<?php echo LANG_heating3; ?>', data: [<?php echo $data['temp3'] ?>], type: 'spline', yAxis: 0, zIndex: 2, tooltip: { valueSuffix: ' <?php echo $_COOKIE['tempUnit']?>'} },
						{ name: '<?php echo LANG_heating4; ?>', data: [<?php echo $data['temp4'] ?>], type: 'spline', yAxis: 0, zIndex: 1, tooltip: { valueSuffix: ' <?php echo $_COOKIE['tempUnit']?>'} },
                        { name: '<?php echo LANG_heating5; ?>', data: [<?php echo $data['temp5'] ?>], type: 'spline', yAxis: 0, zIndex: 1, tooltip: { valueSuffix: ' <?php echo $_COOKIE['tempUnit']?>'} },
                        { name: '<?php echo LANG_hr; ?>', data: [<?php echo $data['hygro1'] ?>], type: 'spline', yAxis: 1, zIndex: 0, tooltip: { valueSuffix: ' %'}, dashStyle: 'shortdot' }
 
                    ]
				});
			});
            -->
		</script>

- Résultat

[dudux2]

J'ai un premier jet fonctionnel, mais c'est pas vraiment propre...

Mon soucis, c'est que je n'arrive pas a mettre en place, la mise a jour dynamique de la courbe, une idée?

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
 
<script type='text/javascript'>
			<!--
            $(function () 
            {
                var seriesOptions = [],
                seriesCounter = 0,
                names = ['temp1', 'temp2', 'temp3', 'temp4', 'temp5', 'hygro1'];
 
                var test = [
                            ['<?php echo LANG_heating1; ?>',0,5,' <?php echo $_COOKIE['tempUnit']?>'],
                            ['<?php echo LANG_heating2; ?>',0,4,' <?php echo $_COOKIE['tempUnit']?>'],
                            ['<?php echo LANG_heating3; ?>',0,3,' <?php echo $_COOKIE['tempUnit']?>'],
                            ['<?php echo LANG_heating4; ?>',0,2,' <?php echo $_COOKIE['tempUnit']?>'],
                            ['<?php echo LANG_heating5; ?>',0,1,' <?php echo $_COOKIE['tempUnit']?>'],
                            ['<?php echo LANG_hr; ?>',1,0,' %']
                           ];
 
                function createChart() 
                {
                    $('#temps_charts').highcharts('StockChart', 
                    {
                       <?php include('scriptsJS/highstockOptions.js'); ?> 
 
                       title: { text: '<?php echo LANG_temp; ?> - <?php echo LANG_hygro; ?>', x: 0 },
 
                        yAxis: [
					       { // Primary yAxis
                                labels: 
                                { 
                                    formatter: function() { return this.value +' <?php echo $_COOKIE['tempUnit']?>'; }
                                },
 
                                title: { text: '<?php echo LANG_temp; ?> (<?php echo $_COOKIE['tempUnit']?>)'},
                                plotLines: [{ value: 0, width: 1, color: '#808080' }]
                            },
 
							{ // Secondary yAxis  
                                gridLineWidth: 0,
 
                                labels: 
                                {
                                    formatter: function() { return this.value +' %'; },
				                    style: { color: '#E3B071' }
                                },
 
                                title: 
                                {
                                    text: '<?php echo LANG_hygro; ?> (%)',
                                    style: { color: '#E3B071' }
                                },
 
                                opposite: true
				            }	
						   ],                         
                        series: seriesOptions
                    });
                }
 
                $.each(names, function (i, name) 
                {
                    $.getJSON('http://192.168.1.211/scriptsPHP/json.php?filename=' + name + '.json&callback=?',    function (data) 
                    {             
                        seriesOptions[i] = 
                        {
                            name: test[i][0], data: data, type: 'spline', yAxis: test[i][1], zIndex: test[i][2], tooltip: { valueSuffix: test[i][3]}
                        };
                        seriesCounter += 1;
 
                        if (seriesCounter === names.length) 
                        {
                            seriesCounter = 0;
                            createChart();
                        }
                    });
                });
            });
            -->
		</script>