Highcarts php refresh

Version imprimable

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:

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:

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

31/07/2013, 23h43
NoSmoking

Bonjour,

Citation:

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.
01/08/2013, 09h28
ryaxx

Merci d'avoir répondu, tu aurais une url ou un exemple pour mettre à jours la serie data stp ?.
01/08/2013, 16h36
NoSmoking

Ce n'est que l'utilisation de la technique Ajax :fleche: 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 :fleche: jQuery.ajax().

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:

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:

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;
                })()
            }]
        });
    });

21/08/2013, 14h56
ryaxx

C'est nickel j'ai trouvé comment faire. Encore merci
28/08/2013, 14h12
NoSmoking

Citation:

Envoyé par ryaxx en mode :(

...si celle-ci s'actualise parfaitement la courbe ne change pas lors de l'actualisation, aurais tu une idées de ce qui clocherais.

Citation:

Envoyé par ryaxx en mode :)

C'est nickel j'ai trouvé comment faire.

Peut être q''une information sur la façon dont tu as résolu ton problème pourrait être utile autant aux futurs demandeurs qu'aux répondants ;).