PHP + Javascript (HighCharts) | Actualisation d'une valeur php et l'introduire à chaque fois dans le java

**Dylan38** · 25/10/2017, 16h51

Bonjour a tous,
Je suis actuellement face a un petit soucis que je n'arrive pas a résoudre
En effet mon soucis est le suivant :

J'utilise une Gauge HighCharts qui récupéré la valeur d'une station météo qui change toutes les 3 secondes , en l'affichant en PHP avec un SetInterval elle ce modifie bien en sur mon php mais reste bloquer a la premiere valeur afficher sur le high chart

Voici mon code

Code PHP :

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
 
<script type="text/javascript">
        var t = self.setInterval("temperature()",1000);
            function temperature() {
            $.ajax({
                url: 'page/include.php',
                complete: function (response) {
                    $('#div_a_actualiser').html(response.responseText);
                }
            });
        }      
    </script>
 
<div id="div_a_actualiser">
<?php
 
require_once dirname(__FILE__) . '/../Phpmodbus/ModbusMaster.php';
 
// Create Modbus object
$modbus = new ModbusMaster("****", "TCP");
 
try {
    // FC 3
    $recData = $modbus->readMultipleInputRegisters(1, 42, 1);
 
}
catch (Exception $e) {
    // Print error information if any
    echo $modbus;
    echo $e;
    exit;
}
// Print read data
echo "</br>Data:</br>";
$record = PhpType::bytes2unsignedInt($recData)/10; 
echo $record;
echo "</br>";
?>
</div>

Mon code Java :

Code Javascript :

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
90
91
92
93
94
95
96
97
98
99
 
 
var gaugeOptions = {
 
    chart: {
        type: 'solidgauge'
    },
 
    title: null,
 
    pane: {
        center: ['50%', '85%'],
        size: '140%',
        startAngle: -90,
        endAngle: 90,
        background: {
            backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
            innerRadius: '60%',
            outerRadius: '100%',
            shape: 'arc'
        }
    },
 
    tooltip: {
        enabled: false
    },
 
    // the value axis
    yAxis: {
        stops: [
            [0.1, '#55BF3B'], // green
            [0.5, '#DDDF0D'], // yellow
            [0.9, '#DF5353'] // red
        ],
        lineWidth: 0,
        minorTickInterval: null,
        tickAmount: 2,
        title: {
            y: -70
        },
        labels: {
            y: 16
        }
    },
 
    plotOptions: {
        solidgauge: {
            dataLabels: {
                y: 5,
                borderWidth: 0,
                useHTML: true
            }
        }
    }
};
 
// The speed gauge
var chartSpeed = Highcharts.chart('container-speed', Highcharts.merge(gaugeOptions, {
    yAxis: {
        min: 0,
        max: 200,
        title: {
            text: 'Speed'
        }
    },
 
    credits: {
        enabled: false
    },
 
    series: [{
        name: 'Speed',
        data: [<? echo $record ?>],
        dataLabels: {
            format: '<div style="text-align:center"><span style="font-size:25px;color:' +
                ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
                   '<span style="font-size:12px;color:silver">km/h</span></div>'
        },
        tooltip: {
            valueSuffix: ' km/h'
        }
    }]
}));
setInterval(function () {
    // Speed
    var point,
        newVal;
 
    if (chartSpeed) {
        point = chartSpeed.series[0].points[0];
        newVal = point.y + <? echo $record ?>;
 
        if (newVal < 0 || newVal > 200) {
            newVal = point.y - <? echo $record ?>;
        }
 
        point.update(newVal);
    }
}, 2000);