Graphique "SmoothieChart" avec .XML

**halle** · 19/04/2016, 09h53

Bonjour à tous !
Je suis nouveau sur le Forum et en développement WEB aussi..
J'aimerais afficher l'évolution d'une valeur contenue dans un .xml dans un graphique en utilisant la librairie SmoothieChart.
La valeur évolue bien hors du graphique dans un <div> mais le graphique reste sur la première valeur qu'il a lu à l'ouverture de la page..
Le graphique fonctionne très bien avec une valeur "random".

Voici mon code :

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
<!DOCTYPE HTML PUBLIC >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 
<script type="text/javascript" src="flow_graph/jquery.js"></script>
<script type="text/javascript" src="smoothie.js"></script>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
 
function AJAX_Chart ()
{
 
    var request = new XMLHttpRequest();
    request.onreadystatechange = function()
    {
        if (this.readyState == 4)
        {
            if (this.status == 200)
            {
                if (this.responseXML != null)
                {
                var flow = this.responseXML.getElementsByTagName('Flow')[0].childNodes[0].nodeValue;
 
var line_flow = new TimeSeries();      
setInterval(function() {
line_flow.append(new Date().getTime(), flow);
}, 1200);  
 
var chart_FF = new SmoothieChart({
millisPerPixel:150,
grid:{fillStyle:'#ffffff',
sharpLines:true,
millisPerLine:10000,
verticalSections:4
},
labels:{fillStyle:'#ff0000'},
timestampFormatter:SmoothieChart.timeFormatter
}),
canvas = document.getElementById('Chart_Flow'),
series = new TimeSeries();
 
chart_FF.addTimeSeries(line_flow, {
  lineWidth: 1.9,
  strokeStyle: 'rgba(0,128,255,0.81)'
});
 chart_FF.streamTo(document.getElementById("Chart_Flow"), 1000 );
 
                }
            }
        }
    }
    request.open("GET", "valeurs.xml" , true);
    request.send(null);
 
}
 
function AJAX_Measure ()
{
 
 
    var request = new XMLHttpRequest();
    request.onreadystatechange = function()
    {
        if (this.readyState == 4)
        {
            if (this.status == 200)
            {
                if (this.responseXML != null)
                {
                    document.getElementById("débit").innerHTML = this.responseXML.getElementsByTagName('Flow')[0].childNodes[0].nodeValue;
                }
            }
        }
    }
    request.open("GET", "valeurs.xml" , true);
    request.send(null);
    setTimeout('AJAX_Measure()',1000);
}
 
</script>
 </head>
<body onload="AJAX_Chart();AJAX_Measure()" >
<div id="container">
<canvas id="Chart_Flow" width="431" height="268" style="position: absolute; left: 694px; top: 227px; z-index:64;" >
</canvas>
<div id="wb_Text15" style="position:absolute;left:66px;top:308px;width:380px;height:38px;z-index:16;text-align:left;">
<span style="color:#000000;font-family:'Comic Sans MS';font-size:20px;">Débit : </span>
<span style="color:#000000;font-family:'Comic Sans MS';font-size:27px;" id="débit"><strong>...</strong></span>

Il y a deux fonction, AJAX_Chart et AJAX_Measure parce que le setTimeout réinitialise le graphique alors j'ai séparé les choses,
je suppose que le problème viens de là mais je vois pas comment faire.

Et voici ce que j'obtiens :
Nom : Sans titre.jpg
Affichages : 115
Taille : 22,4 Ko

Nom : Sans titre.jpg
Affichages : 115
Taille : 22,4 Ko

Merci d'avance pour votre aide !

**halle** · 22/04/2016, 09h37

Je viens de lire ceci sur le site d'une autre librairie graphique à : http://www.fusioncharts.com/dev/gett...ta-format.html :

Using XML as Data Format

Do note that while rendering your charts locally (without a web server, even if localhost), you will not be able to load data from XML or JSON files present on your hard-drive, due to security restrictions enforced by most modern browsers.

Alors je suppose que je dois charger la totalité de mon site sur un serveur et changer la valeur de ma donnée depuis là ?
Je vais essayer de faire cela, je vous tiens au jus..

Dites moi si vous avez une n'importe quelle autre idée. Merci !