Courbe avec rafraichissement

**Anonyme5571** · 10/04/2015, 08h11

Bonjour,

Je voudrais réaliser dans mon application web qui est en node.js une courbe en temps réel (dynamique) qui s'affiche sur ma page web en allant chercher les nouvelles valeurs des points dans ma base de donner Mysql. J'arrive à faire une courbe simple mais après je sais pas trop quoi faire, quelqu'un n'aurait pas un exemple? Ou une idée de comment faire?

Merci d'avance pour vos réponses.

**Anonyme5571** · 10/04/2015, 08h27

Voilà mon code que j'ai pour l'instant qui me créer une courbe comme ça;
Mais je suis bloqué à cet endroit car je ne sais pas comment récupérer les valeurs de ma base de données...je dois utiliser node? ou c'est possible de le faire directement depuis ma page html? J'arrive à récupérer les valeurs de ma base de données depuis node et à les transmettre à ma page html mais pas à les rafraichir en allant chercher d'autres valeurs dans ma base de donner.

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
<script> 
$(function () {
    $(document).ready(function () {
        Highcharts.setOptions({
            global: {
                useUTC: false
            }
        });
 
        $('#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 = Math.random();
                            series.addPoint([x, y], true, true);
                        }, 10000);
                    }
                }
            },
            title: {
                text: 'Live random data'
            },
            xAxis: {
                type: 'datetime',
                tickPixelInterval: 10
            },
            yAxis: {
                title: {
                    text: 'Value'
                },
                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: 'Random data',
                data: (function () {
                    // generate an array of random data
                    var data = [],
                        time = (new Date()).getTime(),
                        i;
 
                    for (i = -19; i <= 0; i += 1) {
                        data.push({
                            x: time + i * 10000,
                            y:7
                        });
                    }
                    return data;
                }())
            }]
        });
    });
});
</script>