Vraag over ouder Highcharts topic op phphulp

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Java Developer / Overheid / Complexiteit

Functieomschrijving Wil jij als Java Developer een bijdrage leveren aan een veiliger Nederland en je als Java Developer bezig houden met zeer complexe bedrijfskritische applicaties? Lees dan snel verder! Doorontwikkelen bedrijfskritische applicaties; Aanpassingen maken in de bestaande applicatie; Vertalen van jouw visie op continuous integration en continuous delivery; Debuggen van de applicatie; In gesprek gaan met eindgebruikers om verbetervoorstellen op te halen. Functie-eisen Minimaal HBO-werk en denkniveau; Minimaal 5 jaar werkervaring als Java Developer; Je bent minimaal OCP-Java SE 6 gercertificeerd; Je hebt kennis van Webservices en Continuous Integration; Je bent analytisch sterk en zowel klant- als resultaatgericht. Bedrijfsomschrijving Binnen

Bekijk vacature »

Senior DevOps-ontwikkelaar eIDAS

Functie­omschrijving Burgers en bedrijven veilig en betrouwbaar digitaal toegang geven tot diensten en producten van het ministerie van Economische Zaken en Klimaat. Als senior DevOps-ontwikkelaar bouw je daar letterlijk aan mee. En dat doe je bij DICTU: een van de grootste en meest vooruitstrevende ICT-dienstverleners van de Rijksoverheid. Jij werkt mee aan de doorontwikkeling van eIDAS, dat staat voor Electronic IDentification Authentication and trust Services. Deze koppeling maakt de grensoverschrijdende authenticatie op overheidswebsites binnen de Europese Unie mogelijk. Het ministerie van Economische Zaken en Klimaat heeft één moderne toegangspoort voor zijn diensten en inspecties. Enkele daarvan zijn dankzij eIDAS inmiddels

Bekijk vacature »

Front-end Developer Vue.js Meewerkend voorman

Functieomschrijving Ben jij een ervaren Front-end Developer, bedreven in Vue.js en lijkt het jou gaaf om als meewerkend voorman verantwoordelijk te zijn voor de ontwikkeling van drie junior ontwikkelaars? Werk jij graag aan diverse projecten t.b.v. het vergroten van klant- en medewerkerbeleving? Lee dan snel verder! Het onderhouden, ontwikkelen en testen van front-end software van diverse klant- en medewerkersapplicaties; Het ontwikkelen van maatwerk front-end oplossingen in Vue.js en participeren in een scrumteam; Verantwoordelijk voor het begeleiden en coachen van drie junior front-end developers; Verantwoordelijk voor code-reviews en het opstellen van de juiste documentatie zoals userstories en api ontwerp; Participeren in

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

04/08/2020 21:55:46
 
- 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.