Vraag over ouder Highcharts topic op phphulp

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

.NET Developer / Innovatieve software / Virtual Re

Functieomschrijving Als .Net developer werken aan innovatieve software waar onder andere gebruik gemaakt wordt van Virtual Reality? Bijdragen aan een organisatie waar je uitgedaagd wordt om continu verbeteringen en ontwikkelpunten te ontdekken en door te voeren? Werken in de omgeving Putten? Reageer dan nu voor meer informatie! Het pro-actief aandragen van verbeteringen voor de bestaande applicatie; Ontwikkelen van nieuwe functionaliteiten; Doorvoeren van aanpassingen en wijzigingen; Verantwoordelijk voor koppelingen met andere systemen; Op de hoogte blijven van technische ontwikkelingen. Functie-eisen Hbo werk- en denkniveau; Een afgeronde IT gerelateerde opleiding; Minimaal 1 jaar professionele ervaring als developer; Aantoonbare kennis van C#; Initiatiefrijke

Bekijk vacature »

Robert v Ommen

Robert v Ommen

08/01/2018 19:16:46
Quote Anchor link
Goedendag, ik heb een vraag over dit topic in het PHP forum.

https://www.phphulp.nl/php/forum/topic/highcharts-gauge-met-live-data/92587/

Wanneer ik een 'live-server-data.php' maak op de website die {"p1_current_power_in":"0.940","time":1381781571000} weergeeft, zou de HTML toch moeten werken volgens de poster.
Ik krijg het echter niet voor elkaar.
Iemand anders wel?

Alvast bedankt voor reacties!
Groeten Robert.
Gewijzigd op 08/01/2018 19:17:32 door Robert v Ommen
 
PHP hulp

PHP hulp

24/01/2020 18:06:24
 
- Ariën -
Beheerder

- Ariën -

08/01/2018 19:29:41
Quote Anchor link
Laat je code eens zien?
 
Robert v Ommen

Robert v Ommen

08/01/2018 19:43:07
Quote Anchor link
Hallo Ariën, dank je voor je reactie.
van de live-server-data.php? Daar staat alleen
echo '{"p1_current_power_in":"0.940","time":1381781571000}';
in
Daarnaast maak ik dan een HTML met de code in het topic, maar er gebeurt niets.

Verder naar onderen in hetzelfde topic geeft Danny Stultiens ook een reactie.
Zijn gauge_data.php geeft {"Huidige_stroom":"686"}. Wanneer ik zijn code van de gauge in een bestand.php zet gebeurt er ook niets.
Ik doe iets fout, maar wat.
 
- Ariën -
Beheerder

- Ariën -

08/01/2018 19:46:56
Quote Anchor link
Heb je misschien een nieuwere versie van de gauge? Heb je een testcase die we kunnen zien
 
Robert v Ommen

Robert v Ommen

08/01/2018 19:55:40
Quote Anchor link
Dit is de gauge die een waarde uit mijn database laat zien. Mijn doel is dat deze geupdated wordt met steeds de laatste waarde uit de database, zoals de poster ook wil bereiken.

http://www.fam-vanommen.nl/grafiek/index_meter.php
 
Frank Nietbelangrijk

Frank Nietbelangrijk

09/01/2018 14:32:50
Quote Anchor link
Als eerste moet je zorgen dat 'live-server-data.php' de laatste waarde uit je database weergeeft in JSON formaat.

Dus telkens als je die pagina opnieuw aanvraagt geeft deze de laatste (meest actuele) waarde. Als dat werkt kun je door naar het aanpassen van de meter. De javascript dient hier aangepast te worden. De meter uit jouw link laat nu een random waarde zien. Er wordt niets uit een database gehaald volgens mij. Om de zoveel tijd (bijv iedere 5 seconden) moet de javascript op de achtergrond opnieuw 'live-server-data.php' opvragen om zo de laatste waarde uit je database te krijgen. Hiervoor gebruik je een AJAX request. (Probeer server + database te onderscheiden van de client).
 
Robert v Ommen

Robert v Ommen

09/01/2018 18:58:15
Quote Anchor link
Hallo Frank,
Het voorbeeld wat ik laat zien in de link, haalt de laatst waarde uit mijn database. Daarna gaat de '// Add some life' functie inderdaad random de meter verder laten bewegen.

Wanneer ik deze PHP maak die de waarde Huidige_stroom 686 geeft, (dmv echo)

http://www.fam-vanommen.nl/grafiek/live-server-data.php

krijg ik de code die de originele poster post niet werkend.


Dit is de code:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Highcharts Example</title>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script type="text/javascript">

$(function () {
    
    $('#container').highcharts({
    
        chart: {
            type: 'gauge',
            plotBackgroundColor: null,
            plotBackgroundImage: null,
            plotBorderWidth: 0,
            plotShadow: false
        },
        
        title: {
            text: 'Stroomverbruik'
        },
        
        pane: {
            startAngle: -150,
            endAngle: 150,
            background: [{
                backgroundColor: {
                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                    stops: [
                        [0, '#FFF'],
                        [1, '#333']
                    ]
                },
                borderWidth: 0,
                outerRadius: '109%'
            }, {
                backgroundColor: {
                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                    stops: [
                        [0, '#333'],
                        [1, '#FFF']
                    ]
                },
                borderWidth: 1,
                outerRadius: '107%'
            }, {
                // default background
            }, {
                backgroundColor: '#DDD',
                borderWidth: 0,
                outerRadius: '105%',
                innerRadius: '103%'
            }]
        },
          
        // the value axis
        yAxis: {
            min: 0,
            max: 8000,
            
            minorTickInterval: 'auto',
            minorTickWidth: 1,
            minorTickLength: 10,
            minorTickPosition: 'inside',
            minorTickColor: '#666',
    
            tickPixelInterval: 30,
            tickWidth: 2,
            tickPosition: 'inside',
            tickLength: 10,
            tickColor: '#666',
            labels: {
                step: 2,
                rotation: 'auto'
            },
            title: {
                text: 'Watt'
            },
            plotBands: [{
                from: 0,
                to: 1500,
                color: '#55BF3B' // green
            }, {
                from: 1500,
                to: 3000,
                color: '#DDDF0D' // yellow
            }, {
                from: 3000,
                to: 8000,
                color: '#DF5353' // red
            }]        
        },
    
        series: [{
            name: 'Huidig verbruik',
            data: [0]
        }]
    
    },
    // Add some life
    function (chart) {
        if (!chart.renderer.forExport) {
            setInterval(function () {
                $.ajax({
                    url: "live-server-data.php",
                }).done(function(data) {
                    var point = chart.series[0].points[0];
                    point.update(data.p1_current_power_in*1000);
                });
            }, 3000);
        }
    });
});
        </script>
    </head>
    <body>
    
<script src="hightcharts/js/highcharts.js"></script>
<script src="hightcharts/js/highcharts-more.js"></script>
<script src="hightcharts/js/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>

    </body>
</html>
Gewijzigd op 10/01/2018 18:37:34 door Robert v Ommen
 
Nick Vledder

Nick Vledder

09/01/2018 19:10:29
Quote Anchor link
Datgene wat je echo't vanuit PHP doe je json_encode, neem ik aan?
 
- Ariën -
Beheerder

- Ariën -

09/01/2018 19:37:34
Quote Anchor link
Zou je jouw code tussen code-tags willen zetten? Dan is het beter leesbaarder. Alvast bedankt!
 
Frank Nietbelangrijk

Frank Nietbelangrijk

09/01/2018 20:18:22
Quote Anchor link
Als je nou eens goed kijkt naar mijn code hier en dan met name naar regel 124:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
point.update(data.p1_current_power_in * 25);


die p1_current_power_in wordt uit de json gelezen en moet bij jou data.Huidige_stroom worden. Vermenigvuldigen met 25 lijkt me bij jou overbodig (?)
Je krijgt dan dus

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
point.update(data.Huidige_stroom);




Toevoeging op 09/01/2018 20:19:37:

en uiteraard moet je wel de hele code verder overnemen.
 
Robert v Ommen

Robert v Ommen

10/01/2018 18:34:07
Quote Anchor link
Nick Vledder op 09/01/2018 19:10:29:
Datgene wat je echo't vanuit PHP doe je json_encode, neem ik aan?


Nee, gewoon

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
<?php
header('Content-Type: application/json');
echo '{"Huidige_stroom":686}';
?>


Puur om te testen. Zou dat er voor zorgen dat het niet goed werkt?
Wanneer ik de PHP start krijg ik wel een geldig json formaat volgens mij op deze manier.
Gewijzigd op 10/01/2018 18:36:27 door Robert v Ommen
 
Nick Vledder

Nick Vledder

11/01/2018 11:14:35
Quote Anchor link
Wat ook nog een rol zou kunnen spelen is tijdigheid. Je haalt met AJAX een waarde op en dat kost tijd (connecteren met server, etc). Pas op het moment dat de waarde zich in de browser bevindt, mag de nieuwe waarde gebruikt worden in Highcharts (callback, promise). Dit zou je ook nog kunnen checken voor de zekerheid...
 
Robert v Ommen

Robert v Ommen

11/01/2018 18:01:16
Quote Anchor link
OK, maar dat is taal wat ik niet zo 123 begrijp.
Ligt het dan alleen aan mij dat het niet werkt?
Ik doe dit op hosting2go.
Ik ging er van uit dat de code een fout bevatte of dat ik iets fout doe wat dit veroorzaakt.
Gewijzigd op 11/01/2018 18:02:14 door Robert v Ommen
 
Nick Vledder

Nick Vledder

11/01/2018 22:32:08
Quote Anchor link
edit: heb even gekeken, maar dat zou goed moeten gaan. Zou je die Ajax uitkomst ns willen loggen voor de zekerheid (console.log). Zie ook opmerking Frank... Wat toont de console als je de hele zwik (data.Huidige_stroom) logt?
Gewijzigd op 11/01/2018 22:42:33 door Nick Vledder
 
Robert v Ommen

Robert v Ommen

13/01/2018 08:57:39
Quote Anchor link
Hoi Nick, bedankt voor je reactie weer,
bedoel je dat je het getest hebt en het bij jou wel werkt? Misschien dat ik iets fout doe, ik zal de stappen beschrijven.
Ik pak de code van Frank en zet deze in een textbestand die ik 'code.php' heb genoemd. Deze zet in in de map online:

http://www.fam-vanommen.nl/grafiek/code.php

ik maak verder een 'gauge_data.php' text bestand waar de volgende code in staat:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
<?php
header('Content-Type: application/json');
echo '{"Huidige_stroom":686}';
?>

Deze staat in dezelfde map
http://www.fam-vanommen.nl/grafiek/gauge_data.php

Zoals je kan zien komt daar de goede json data uit.

toch geeft bij mij de code.php geen reactie. Het scherm blijft leeg. Er zal een fout in staan dus lijkt het mij dat ik ook niets kan loggen, of begrijp ik dat ook verkeerd? Hoe kom ik er achter wat er fout gaat?
 
Jan Koehoorn

Jan Koehoorn

13/01/2018 09:57:43
Quote Anchor link
Onderin de sourcecode van je pagina heb je dit:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
<script src="/js/highcharts.js"></script>
<script src="/js/highcharts-more.js"></script>
<script src="/js/modules/exporting.js"></script>


Maar die javascript bestanden worden niet gevonden.
 
Robert v Ommen

Robert v Ommen

13/01/2018 10:21:13
Quote Anchor link
Ahhh, ok.
Ik heb ze gevonden en er in gezet. Werkt nog niet helemaal, ik krijg een zwart vlak, maar er gebeurt nou in ieder geval iets, dank je! Wat zou dit nog kunnen veroorzaken?

Toevoeging op 13/01/2018 10:37:42:

Werkt, hier kan ik weer verder mee spelen, dank je jan!
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.