Highcarts php refresh

**ryaxx** · 31/07/2013, 16h08

Héllo ladies and gentlemen,

N'étant pas un grand spécialiste de j'ajax et autre merveilles en javascript fait maintenant plusieurs jours que je bloque sur la librairie Highcarts et php, c'est pour cela que je me tourne vers vous, afin d'avoir votre avis.

Je vous explique :
je dois récupérer une valeur directement d'un service web via php, (jusqu'à la pas de problèmes), en sachant que c'ette valeur évolue (c'est un chiffre d'affaire). ensuite je dois afficher ce chiffre d'affaire dans un highcarts type :
http://www.highcharts.com/demo/dynamic-update
En gros au lieu d'avoir un random de l'information je récupére ma valeur toutes les minutes ou secondes.

Pour l'aspect php pas de soucis voici le code :

Code php :

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

1
2
3
4
5
6
7
8
$MonTab = array ();
$MonTab['Ca_Net'] = $Valeur[2];
$MonTab['Ca_Brut'] = $Valeur[3];
 
 
$donnees = json_encode($MonTab['Ca_Brut'], JSON_NUMERIC_CHECK);
 
echo $donnees;

Pour la partie highcarts

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
$(function () {
    $(document).ready(function() {
        Highcharts.setOptions({
            global: {
                useUTC: false
            }
        });
 
        var chart;
        $('#container').highcharts({
            chart: {
                type: 'spline',
                animation: Highcharts.svg, // don't animate in old IE
                marginRight: 10,
                events: {
                    load: function() {
 
                        // set up the updating of the chart each second
                        var series = this.series[0];
                        setInterval(function() {
                            var x = (new Date()).getTime(); // current time
                                y = <?php echo $donnees ?>;
 
                            series.addPoint([x, y], true, true);
                        }, 1000);
                    }
                }
            },
            title: {
                text: 'Votre Chiffre d affaire'
            },
            xAxis: {
                type: 'datetime',
                tickPixelInterval: 150
            },
            yAxis: {
                title: {
                    text: 'CA'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                formatter: function() {
                        return '<b>'+ this.series.name +'</b><br/>'+
                        Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+
                        Highcharts.numberFormat(this.y, 2);
                }
            },
            legend: {
                enabled: false
            },
            exporting: {
                enabled: false
            },
            series: [{
                name: 'CA',
                data: (function() {
                    // generate an array of random data
                    var data = [],
                        time = (new Date()).getTime(),
                        i;
                    for (i = -8; i <= 0; i++) {
                        data.push({
                            x: time + i * 1000,
                            y: <?php echo $donnees ?>
                        });
                    }
                    return data;
                })()
            }]
        });
    });
 
});
		</script>
	</head>
	<body>
<script src="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>
 
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

jusqu'à la pas de problème le chiffre d'affaire s'affiche correctement, sauf que celui-ci n'évolue pas puisqu'il faudrais rafraichir l'information j'ai tout de même constaté que fafouillant sur la toile on pouvais rafraichir une div via l'ajax mais je ne sais pas si c'est la bonne méthode pour mon projet, aurriez-vous une solution à me proposer pour que l'information que j'extraie du fichier php évolue ? dans le highcarts (j'espère avoir bien expliqué ma problèmathique).

**NoSmoking** · 31/07/2013, 23h43

Bonjour,

on pouvais rafraichir une div via l'ajax mais je ne sais pas si c'est la bonne méthode pour mon projet,

les données étant mises à jour coté serveur il te faut bien aller les lire, utilisation d'Ajax pour ne pas rafraichir toute la page, au retour il te suffit de mettre à jour ta série de data.

**ryaxx** · 01/08/2013, 09h28

Merci d'avoir répondu, tu aurais une url ou un exemple pour mettre à jours la serie data stp ?.

**NoSmoking** · 01/08/2013, 16h36

Ce n'est que l'utilisation de la technique Ajax

Web 2.0, allez plus loin avec AJAX et XMLHttpRequest.

Comme tu utilises jQuery il me semble quand même intéressant que tu consultes la documentation officielle

jQuery.ajax().

**ryaxx** · 13/08/2013, 11h07

Je te remerci pour les liens, ça m'a aider à actualiser l'info stocké dans ma div, en revanche, si celle-ci s'actualise parfaitement la courbe ne change pas lors de l'actualisation, aurais tu une idées de ce qui clocherais.
La fonction qui actualise la div

Code :

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

1
2
3
4
5
6
7
8
9
10
function refresh() {
	//alert('ok');
	$.ajax({   
	url: "data2.php", 
	cache: false,
	success: function(retour){       
	 $('#results2').html(retour);
	 }
});
	  }

et dans le highcharts

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
series: [{
                name: 'CA',
                data: (function() {
                    // generate an array of random data
                    var data = [],
                        time = (new Date()).getTime(),
                        i;
 
 
                    for (i = -19; i <= 0; i++) {
	         var tutu = $("#results2").val();			
	         setInterval(refresh, 1000);
 
                        data.push({
                            x: time + i * 1000,
		  y: eval(tutu)
 
 
                        });
                    }
                    return data;
                })()
            }]
        });
    });