Discussion :

[achraf.b.a]

bonjour

a fin utiliser le live update pour highcharts librairies, je reçoit comme entrée (mysql timestamp(3)) a travers un appel ajax

Code :

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

1
2
 
["2012-12-21 11:00:00.080",45]

je veut afficher ce point dans mon graphe, mais avant je doit le convertir en date ou date objet (sans perdre la précision en milliseconde) pour qui il soit pris en compte par highcharts.

est ce que quelqu’un peut me guider comment faire ca ?
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
 
function requestData() {
 $.ajax ({
            type:"get" ,
        url: "<?php echo CController::createUrl('beam/GetSensorsDataLive') ?>",
        data: {"beamId" : "<?php echo $modelBeam['poutre_id'] ?>" },
         dataType: "json",
 
          success: function(response,point) {
          var series = chart.series[0], //// error here 
 
    shift = series.data.length > 20;// shift if the series is longer than 20
          chart.series[0].addPoint( point,true, false); // add the point
          setTimeout(requestData, 1000);    // call it again after one second
 
                                   },
                                 cache: false
    });
           }  
 
 $(document).ready(function() {
     var chart;
 
        chart = new Highcharts.Chart({
        chart: {
            renderTo: 'graph',
            type: 'spline',
            events: {
                load: requestData   
            }
        },
 
        xAxis: {
          type: 'datetime',
          },
              tooltip: {
 
                  formatter: function() {
 
                    return '<b>'+ this.series.name +'</b><br/>'+
 
                    Highcharts.dateFormat('%H:%M:%S:%m', this.x) +'<br/>'+
 
                    Highcharts.numberFormat(this.y, 2);
 
            }
 
        },  
 
 
                    series: [{
            name: 'Live Data From sensor <?php echo $modelBeam['poutre_id'] ;?>  ',
             data:[] 
        }]
 
    });
 
});

merci !

[SylvainPV]

Code :

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

1
2
 
new Date("2012-12-21 11:00:00.080")

Tout simplement

[achraf.b.a]

merci SylvainPV pour votre réponse

mais ou insérer la fonction date dans mon code pour quelle change tous les point qui seront fetcher par appel ajax .

merci encore une fois

[SylvainPV]

Ben au callback AJAX par exemple:

Code :

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

1
2
3
4
 
...
success: function(response,point) {
     point[0] = new Date(point[0]);

Par contre je ne comprends pas pourquoi ton appel AJAX te renvoie qu'un seul point et pas l'ensemble. Ah et aussi, évite de mettre du PHP dans du Javascript, c'est un cauchemar en lisibilité...

[achraf.b.a]

merci encore une fois

est ce que je doit pas replacer " par T avant ?
a propos pourquoi mon appel AJAX me renvoie qu'un seul point
c est parce que j utilise le live update et a chaque appel je reçoit le dernier point dans ma table.

merci

[achraf.b.a]

pour les intéressée voici le code que que j ai trouver pour formater le temps en milliseconde pour 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
 
 
 success: function(point) {
			  var darr = point[0].split('.')
				  , dat=new Date(darr[0])
				  , datestr = '';
				dat.setMilliseconds(Math.round(darr[1]/1000));
				datestr = [ [dat.getFullYear(),dat.getMonth()+1,dat.getDate()].join('-')
							,' ', 
			  [dat.getHours(),dat.getMinutes(),dat.getSeconds()].join(':')
							,'.',
							dat.getMilliseconds()
						  ].join('');
		      var series = chart.series[0],
		      shift = series.data.length > 20;// shift if the series is longer than 20
              chart.series[0].addPoint(eval(point),true, false); // add the point
              setTimeout(requestData, 1000);    // call it again after one second
 
                                       },