Get json data mbv Ajax van PHP file in container en laat zien

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Robert v Ommen

Robert v Ommen

14/01/2018 16:11:42
Quote Anchor link
Goedemiddag, ik heb weer een vraag. Mijn vorige vraag over highcharts is opgelost en ik ben een heel eind verder gekomen. Zie hier het resultaat. Dit zijn actuele gegevens.

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

Er zal vast veel aan te verbeteren zijn maar het werkt!

In de PHP's met data die aangeroepen worden, wordt ook data geretourneerd of en hoe hard de pomp draait, en of de douche aan staat e.d. Ook bijvoorbeeld hoeveel KWH de PV panelen opgebracht hebben.
Nu wil ik dit ook weergeven op dit dashboard maar ik loop vast hoe ik dit kan realiseren.

Ik denk dat ik in het script een 11e container aan moet maken met een ajax call erin met weer een setinterval, maar hoe ik dit ook probeer, ik krijg steeds geen resultaat.
Weet iemand een goed voorbeeld waar ik verder mee zou kunnen komen?

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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Zonnestroom, Zonneboiler en Haard</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 () {

    $('#container1').highcharts({

        chart: {
            type: 'gauge',
            plotBackgroundColor: null,
            plotBackgroundImage: null,
            plotBorderWidth: 0,
            plotShadow: false

        },

        title: {
            text: 'Collector',
        y: 35
        },

        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: 130,

            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: 'C'
            },
            plotBands: [{
                from: 0,
                to: 80,
                color: '#55BF3B' // green
            }, {
                from: 80,
                to: 100,
                color: '#DDDF0D' // yellow
            }, {
                from: 100,
                to: 130,
                color: '#DF5353' // red
            }]
        },

        series: [{
            name: 'Temperatuur',
            data: [ 1 ],






            
           // tooltip: {valueSuffix: ' Watt'}
        }]
    },
        // Add some life
        function (chart) {
            if (!chart.renderer.forExport) {
                setInterval(function () {
                    
                    $.ajax({
                        url: "boiler_data.php",
                    }).done (function(data) {
                        var point = chart.series[0].points[0];
                        point.update(data.WW_Zon);
                    });
                }, 6000);
            }
        });

    $('#container2').highcharts({

 
en hier container 2 t/m 10 (zo beter Arin) :-)



});
        </script>
    </head>
    <body>


<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>



<div id="container1" style="min-width: 300px; max-width: 300px; height: 300px; margin: 0 auto; float: left"></div>
<div id="container2" style="min-width: 300px; max-width: 300px; height: 300px; margin: 0 auto; float: left"></div>
<div id="container3" style="min-width: 300px; max-width: 300px; height: 300px; margin: 0 auto; float: left"></div>
<div id="container4" style="min-width: 300px; max-width: 300px; height: 300px; margin: 0 auto; float: left"></div>
<div id="container5" style="min-width: 300px; max-width: 300px; height: 300px; margin: 0 auto; float: left"></div>
<div id="container6" style="min-width: 300px; max-width: 300px; height: 300px; margin: 0 auto; float: left"></div>
<div id="container7" style="min-width: 300px; max-width: 300px; height: 300px; margin: 0 auto; float: left"></div>
<div id="container8" style="min-width: 300px; max-width: 300px; height: 300px; margin: 0 auto; float: left"></div>
<div id="container9" style="min-width: 300px; max-width: 300px; height: 300px; margin: 0 auto; float: left"></div>
<div id="container10" style="min-width: 300px; max-width: 300px; height: 300px; margin: 0 auto; float: left"></div>
<br><br>
<a href="http://www.fam-vanommen.nl/grafiek/index.php" target="_top">Grafieken</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
Pomp: $Test

    </body>
</html>
Gewijzigd op 14/01/2018 16:48:24 door Robert v Ommen
 
PHP hulp

PHP hulp

28/03/2024 09:44:38
 
- Ariën  -
Beheerder

- Ariën -

14/01/2018 16:36:28
Quote Anchor link
Ik ga geen +/- 1.100 regels aan code doorspitten.
Kan je jouw code a.u.b. even aanpassen en bewerken tot ongeveer 30 regels?
 
Robert v Ommen

Robert v Ommen

14/01/2018 20:02:28
Quote Anchor link
Hoi Ariën,
Ik heb het iets ingekort, het gaat er juist om dat deze code, waar allemaal 'containers' inzitten, en welke werkt tot dusver, ik wil aanpassen met de genoemde functionaliteit.
 
Nick Vledder

Nick Vledder

14/01/2018 20:08:54
Quote Anchor link
@Robert Volgens mij ben je het meest geholpen met wat tips over hoe je dit kan aanpakken. Sowieso is het goed de uitdaging die je hebt in kleinere stukken onder te verdelen. Je wilt schijnbaar een dashboard ontwikkelen met een aantal highcharts grafieken (JS/ HTML/ jQuery) die moeten worden gevoed via AJAX in combinatie met PHP.

Je hebt het over al dan niet een elfde container aanmaken en je noemt een aantal variabelen die je blijkbaar in beeld gebracht wilt zien (quote: 'of en hoe hard de pomp draait, en of de douche aan staat e.d. Ook bijvoorbeeld hoeveel KWH de PV panelen...').

Suggestie. Begin eens met 'of en hoe hard de pomp draait', zoek een in jouw ogen geschikte highchart erbij, maak een testscript aan enkel voor het in beeld brengen van deze variabele (bijv één HTML-script). Kijk wat het doet in een developer-vriendelijke browser, bijvoorbeeld Chrome en onderzoek middels de knop 'inspecteren' wat de browser doet, welke foutmeldingen zich voordoen, etc. Een aantal foutmeldingen zul je zelf redelijk snel middels trial-and-error op kunnen lossen (icm Google). Zo niet, kun je al veel specifieker je vraag op een forum stellen.
 
Robert v Ommen

Robert v Ommen

15/01/2018 12:32:59
Quote Anchor link
Beste lezers,
de site waar ik in dit topic naar verwijs is uit de lucht. Ik denk doordat meerdere mensen er naar keken en door de updatefrequentie van 6 seconden x 10 meters, heeft dit te veel dataverkeer voor het hosting bedrijf gegenereerd.
Om deze reden werkt de link dus niet meer.
 
Nick Vledder

Nick Vledder

15/01/2018 12:40:59
Quote Anchor link
Als dat handjevol bezoekers ervoor kan zorgen dat de site 'uit de lucht' is dan heb je nog wel wat huiswerk te doen lijkt mij zo.
 
- Ariën  -
Beheerder

- Ariën -

15/01/2018 12:46:21
Quote Anchor link
Het ligt er aan waar je AJAX voor nodig hebt. Soms zijn websockets zelf een stuk efficiënter als er realtime data moet worden getoond, zoals bijv. bij een chat.
 
Robert v Ommen

Robert v Ommen

15/01/2018 13:39:34
Quote Anchor link
Nick Vledder op 15/01/2018 12:40:59:
Als dat handjevol bezoekers ervoor kan zorgen dat de site 'uit de lucht' is dan heb je nog wel wat huiswerk te doen lijkt mij zo.


Mee eens. Ik liet elke meter elke 6 seconden de data uit de database halen. Nu doe ik het elke minuut, dat zal beter gaan. Nadeel is wel dat ik pas na openen van de site, na 1 minuut gegevens heb.
 
- Ariën  -
Beheerder

- Ariën -

15/01/2018 13:40:14
Quote Anchor link
Anders moet je met sockets werken :-)

Je kan ook de huidige gegevens alvast serverside ophalen en in je code verwerken. Dan hoef je daar geen minuut op te wachten.
Gewijzigd op 15/01/2018 13:41:14 door - Ariën -
 
Robert v Ommen

Robert v Ommen

15/01/2018 13:52:40
Quote Anchor link
OK, hetgeen ik nu heb heb ik bij elkaar gegoogled en met hulp van oa PHPHulp aan de gang gekregen. Ik ben geen programmeur bedoel ik daarmee.
Maar ik ga er eens op googelen, dank je.
 
- Ariën  -
Beheerder

- Ariën -

15/01/2018 13:53:37
Quote Anchor link
Je haalt die data dus gewoon eerst met PHP op, en daarna kan je het via AJAX dus overschrijven na een minuut.
 
Nick Vledder

Nick Vledder

15/01/2018 14:21:29
Quote Anchor link
@Robert
De omvang van je vraag gaat al snel richting een opdracht die niet zou misstaan in het opdracht/vacature-gedeelte van dit forum, lijkt mij. Realiseer je dat de werking van JavaScript wezenlijk anders is als de werking van PHP-code. Als je er mee aan de slag gaat en 's kijkt wat er zoal in de browser gebeurt (bijv. Inspecteren in Chrome: tabjes 'console' en 'network') dan kun je al veel obstakels zelf uit de weg ruimen.
 
Robert v Ommen

Robert v Ommen

15/01/2018 14:50:33
Quote Anchor link
Beste Nick, dat is een leuke functie die network tab in chrome. Er is zo heel veel meer activiteit te zien als wat ik verwacht had moet ik eerlijk zeggen. Ondanks dat ik de update intervallen op 1 minuut heb gezet.

Maar inderdaad, het hele project met al het programmeren / hobbyen in python, php en java loopt behoorlijk uit de klauwen.
 
- Ariën  -
Beheerder

- Ariën -

15/01/2018 15:07:13
Quote Anchor link
Even om een eventuele misvatting recht te zetten. Je zegt Java, maar volgens mij bedoel je JavaScript.
Java en JavaScript zijn totaal verschillend van elkaar.
 
Robert v Ommen

Robert v Ommen

15/01/2018 16:29:42
Quote Anchor link
OK, Javascript. Dank je.

Ik heb het script aangepast. Zo zal het beter gaan.

http://www.fam-vanommen.nl/dashboard/meterboard.php
 
Nick Vledder

Nick Vledder

15/01/2018 18:25:01
Quote Anchor link
Heb er eventjes naar gekeken. boiler_data.php wordt wordt voor meerdere charts aangeroepen (setInterval , etc.). Feitelijk hoef je maar maar één keer boiler_data.php aan te roepen om de gegevens vervolgens te gebruiken op voor net zoveel charts als je wilt.
(Het gaat om de volgende gegevens die je gebruikt:
data.WW_Zon
data.WW_Haard
data.Bovenin_Vat
data.Uittrede_Vat
data.Onderin_Vat
data.Voor_WW_Vloerverw
data.Na_WW_Vloerverw
data.Buitentemp)

Overigens verwacht ik niet dat de server waar PHP op draait hiervan onder de indruk raakt. Ook niet als je deze pagina tegelijk in meerdere browsers opent. Maar er is ook iets als netjes coderen. Wat dat betreft, kun je er veel van opsteken als je het DRY principe op dit stuk JavaScript loslaat.
 



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.