PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
R

Vraag over ouder Highcharts topic op phphulp

Door Robert v Ommen op 08-01-2018 19:16 gewijzigd op 08-01-2018 19:17
4.396 views
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.
- Ariën -
08-01-2018 19:29
Laat je code eens zien?
R
Robert v Ommen
08-01-2018 19:43
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 -
08-01-2018 19:46
Heb je misschien een nieuwere versie van de gauge? Heb je een testcase die we kunnen zien
Frank Nietbelangrijk
09-01-2018 14:32
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).
R
Robert v Ommen
09-01-2018 18:58 gewijzigd op 10-01-2018 18:37
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:


<!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>
Nick Vledder
09-01-2018 19:10
Datgene wat je echo't vanuit PHP doe je json_encode, neem ik aan?
- Ariën -
09-01-2018 19:37
Zou je jouw code tussen code-tags willen zetten? Dan is het beter leesbaarder. Alvast bedankt!
Frank Nietbelangrijk
09-01-2018 20:18
Als je nou eens goed kijkt naar mijn code hier en dan met name naar regel 124:

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


point.update(data.Huidige_stroom);




[size=xsmall]Toevoeging op 09/01/2018 20:19:37:[/size]

en uiteraard moet je wel de hele code verder overnemen.
R
Robert v Ommen
10-01-2018 18:34 gewijzigd op 10-01-2018 18:36
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

<?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.


Reageren

Inloggen om te reageren