Highcharts, PHP & MySQL

[GAITii]

Beste Tweakers,

voor mijn projectje van een Arduino, kWh meter en een webservertje ben ik terecht gekomen bij Highcharts om de uitkomsten netjes te vertalen naar grafieken.

Nu schrijft mijn Arduino (gekoppeld aan een Raspberry welke deze uitleest) elke keer wanneer de streep op mijn draaischijf (kWh meter) voorbij komt een meting weg naar mijn MySQL database welke er als volgt uitziet:

code:

+--------------+-------------+------+-----+-------------------+----------------+
| Field        | Type        | Null | Key | Default           | Extra          |
+--------------+-------------+------+-----+-------------------+----------------+
| id           | int(11)     | NO   | PRI | NULL              | auto_increment |
| datetime     | timestamp   | NO   |     | CURRENT_TIMESTAMP |                |
| watt         | varchar(11) | NO   |     | NULL              |                |
+--------------+-------------+------+-----+-------------------+----------------+

Nu wordt deze simpelweg gevuld met data als hieronder:

id,datetime,watt
------------------------------------------
1,2015-10-30 21:50:43,523.61
2,2015-10-30 21:51:55,540.12
3,2015-10-30 21:52:23,590.51
4,2015-10-30 21:52:59,610.89
5,2015-10-30 21:53:22,605.03

Nu is mijn vraag, hoe zijn de kolommen datetime en watt makkelijk te verwerken in grafieken van Highcharts?

Allereerst wil ik een simpele grafiek met alles wat er al in de database staat.
Later zou ik zelf kunnen proberen om er tijdperiodes aan vast te binden zoals:
- Huidige verbruik
- Afgelopen week
- Afgelopen maand
- Afgelopen jaar

Momenteel heb ik while met een mysql_fetch_array, maar geen idee hoe die data (en dan met name de datum/tijd) goed in een array te krijgen zodat deze ook weer bruikbaar wordt voor Highcharts.

Kan iemand mij een schop in de goede richting helpen? Momenteel vind ik op internet alleen maar resultaten met andere soorten datum/tijd formats en niet de format die ik gebruik.

[maarud]

Als je de demo's bekijkt, bijvoorbeeld van een simpele lijngrafiek: http://www.highcharts.com/demo/line-basic

Dan moet je denk ik al een heel eind komen met de opbouw van je data. De opties spreken voor zich, de data verpakken in de juiste array's is nog eventjes een uitdaging voor de eerste keer maar de demo's en de JSFiddles helpen daar goed bij denk ik.

Oja, en deze voor extra opties: http://api.highcharts.com/highcharts

Probeer eerst de grafiek überhaupt maar te maken, dan komen de juiste formats later wel
Je zal wellicht er tegen aan lopen dat je niet handmatig je categorieën (de x-as) wil hardcoden, maar bijvoorbeeld de data (dynamisch). Dan kan je richting deze hoek zoeken http://api.highcharts.com...ts#series<line>.data.name maar je kan ook natuurlijk gewoon de xAxis->categories array vullen.

Je servertje zal vast voor intern gebruik zijn, maar mocht je het via internet bereikbaar maken zou ik ook niet met mysql_fetch_array werken maar met PDO.

[ Voor 43% gewijzigd door maarud op 02-11-2015 11:48 ]

[GAITii]

maarud schreef op maandag 02 november 2015 @ 11:44:
Als je de demo's bekijkt, bijvoorbeeld van een simpele lijngrafiek: http://www.highcharts.com/demo/line-basic

Dan moet je denk ik al een heel eind komen met de opbouw van je data. De opties spreken voor zich, de data verpakken in de juiste array's is nog eventjes een uitdaging voor de eerste keer maar de demo's en de JSFiddles helpen daar goed bij denk ik.

Oja, en deze voor extra opties: http://api.highcharts.com/highcharts

Probeer eerst de grafiek überhaupt maar te maken, dan komen de juiste formats later wel

Je servertje zal vast voor intern gebruik zijn, maar mocht je het via internet bereikbaar maken zou ik ook niet met mysql_fetch_array werken maar met PDO.

Bedankt voor je snelle reactie.

Juist dat verpakken in de juiste array kom ik totaal niet uit, het maken van de grafiek met static data lukt mij wel.

Het enkel tonen van de Watt's in een example area grafiek lukt mij nog wel, maar om dan vervolgens op de X-as de datum's en/of tijd te tonen zou ik niet weten hoe...

[maarud]

GAITii schreef op maandag 02 november 2015 @ 11:48:
[...]

Juist dat verpakken in de juiste array kom ik totaal niet uit, het maken van de grafiek met static data lukt mij wel.

Kleine hints:
http://php.net/manual/en/control-structures.foreach.php
http://php.net/manual/en/function.array-push.php
en zoals je zelf al vond: http://php.net/manual/en/control-structures.while.php

Kijk goed hoe Highcharts de data verwacht:
http://api.highcharts.com/highcharts#series<line>.data
Kijk wat de constante is (dit deel zet je buiten de while loop) en kijk welk gedeelte variabel is (de resultaten dus, en dit gedeelte zet je in de while loop).

Dan zorg je dat de variabelen in de array komen, of je dat nu doet met [] of met array_push()is even van minder belang. Dit stukje zet je dus in de while loop zodat hij de variabelen elke keer in de array 'drukt' of 'pusht' zogezegd.

Dan heb je een mooie array gevuld, en deze array kan je gebruiken om om te zetten naar json mocht je dat in de javascript willen gebruiken.

[ Voor 52% gewijzigd door maarud op 02-11-2015 11:58 ]

[FotW]

Let op dat int's wel echt int zijn en let op single quote/dubbel quote gebruik (' ")

Vorige week ook met Higcharts zitten stoeien

[GAITii]

code:

while($row = mysqli_fetch_assoc($query))
{
    $data1 = $row['datetime'];
    $data2 = $row['watt'];
    
    $data[] = "[$data1, $data2]";
}

$getdata = join($data, ',');

Wat gaat er hier fout?

Levert constant witte pagina's op zonder errors...

[maarud]

GAITii schreef op maandag 02 november 2015 @ 14:32:

code:

while($row = mysqli_fetch_assoc($query))
{
    $data1 = $row['datetime'];
    $data2 = $row['watt'];
    
    $data[] = "[$datetime, $watt]";
}

$getdata = join($data, ',');

Wat gaat er hier fout?

Je definieert geen $datetime en geen $watt. Misschien bedoel je $data[] = "[$data1, $data2]"; ?

Ik zal een stukje verklappen:

PHP:

//Definieer eerst een lege array om problemen te voorkomen als je query geen output heeft
$data = array();
//Dan je query in de array stoppen
foreach($query_uitkomst as $row) {
    array_push($data, array(
            "name" => $row['datetime'],
            "y" => intval($row['watt'])
        )
    );
}

In jouw geval kan je je while gebruiken, trouwens.

[ Voor 31% gewijzigd door maarud op 02-11-2015 14:49 ]

[GAITii]

Ook wanneer ik dat doe krijg ik een witte pagina. (code iets aangepast voor hier, vandaar die fout)

[LordSinclair]

Tip: kijk in je broncode in de browser, hierin kan je analyseren waar je fout bent gegaan.

[maarud]

Kijk ook wat in je F12 console gebeurd. Highcharts geeft ook redelijk nette errors inclusief URL naar de mogelijke oplossing.

[GAITii]

Volgens de console zou dit er verkeerd gaan, en geen geldige waardes zijn (let niet op de outputs):

code:

series: [{
            name: 'kWh',
            data: [[2015-10-30 21:50:43, 5981.31],[2015-10-30 21:50:44, 5914.97],[2015-10-30 21:51:07, 5904.06],[2015-10-30 21:51:09, 5914.97],[2015-10-30 21:51:10, 5918.62],[2015-10-30 21:51:12, 5914.97],[2015-10-30 21:51:14, 5922.27],[2015-10-30 21:51:15, 5922.27],[2015-10-30 21:51:17, 5914.97],[2015-10-30 21:51:18, 5914.97],[2015-10-30 21:51:20, 5940.59],[2015-10-30 21:51:22, 5988.77],[2015-10-30 21:51:23, 5966.44],[2015-10-30 21:51:25, 5996.25],[2015-10-30 21:51:27, 5850.09],[2015-10-30 21:51:28, 5985.04],[2015-10-30 21:51:30, 5929.59],[2015-10-30 21:51:31, 5985.04],[2015-10-30 21:51:33, 5966.44],[2015-10-30 21:51:35, 5925.93],[2015-10-30 21:51:36, 6000.00],[2015-10-30 21:51:38, 5922.27],[2015-10-30 21:51:39, 5933.25],[2015-10-30 21:51:41, 6000.00],[2015-10-30 21:51:43, 5853.66],[2015-10-30 21:51:44, 5896.81],[2015-10-30 21:51:46, 5959.03],[2015-10-30 21:51:48, 5966.44],[2015-10-30 21:51:49, 5882.35],[2015-10-30 21:51:51, 5925.93],[2015-10-30 21:51:52, 5650.38],[2015-10-30 21:51:54, 5925.93],[2015-10-30 21:51:56, 5933.25]]
        }]

[LordSinclair]

Waarschijnlijk accepteert deze de datum & tijd notatie niet. Het is geen getal, dus moet het tussen enkele quotes staan.

Daarnaast probeer je nu de X en Y as in dezelfde serie te stoppen. Als ik naar een lijngrafiek kijk in het demo zie ik het volgende:

De labels op de X as

code:

        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

en
De waarden op de Y as.

code:

series: [{
            name: 'Tokyo',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }, {
            name: 'New York',
            data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
        }, {
            name: 'Berlin',
            data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
        }, {
            name: 'London',
            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
        }

[ Voor 85% gewijzigd door LordSinclair op 02-11-2015 15:05 ]

[Xtremelead]

probeer eens epoch timestamps te gebruiken

[CurlyMo]

code:

[2015-10-30 21:50:43, 5981.31]

Lijkt niet echt op de data die Highcharts nodig heeft. Bijv:
https://www.highcharts.co...me=usdeur.json&callback=?

code:

[Date.UTC(2013,5,2),0.7695]

Even zoeken op de documentatie van de Date.UTC in Javascript en deze correct invullen vanuit PHP.

Eventueel kan je via PHP ook direct een timestamp (= uitvoer van Date.UTC) aanmaken. Bijv.:

code:

[1446473177, 5981.31]

[GAITii]

Dan krijg ik inderdaad netjes lijnen op de Y-as het wattage en de X-as de tijd zoals in de database vernoemd. Bedankt!

Dan rest nu nog de vraag, kun je met Highcharts ook nette grafieken krijgen van bijvoorbeeld het laatste uur met labels op de X-as van bijvoorbeeld (om de 10 minuten, afgelopen uur):
/ 14:00
/ 14:10
/ 14:20
/ 14:30
en ga zo maar door...

Ook als er in de database bijvoorbeeld enkel deze records staan?

code:

id,datetime,watt
------------------------------------------
11,2015-11-02 14:01:23,323.98
12,2015-11-02 14:08:22,56.44
13,2015-11-02 14:11:54,78.23
14,2015-11-02 14:16:33,44.77
15,2015-11-02 14:18:10,476.21
16,2015-11-02 14:20:54,234.54
17,2015-11-02 14:23:27,89.41

Dit vroeg ik mij eigenlijk af... of kun je enkel grafieken genereren op basis van data die er ook alleen maar daadwerkelijk is?

[CurlyMo]

Even rondneuzen bij highstock:
http://www.highcharts.com/stock/demo/basic-line

[GAITii]

Dit is enkel 1 waarde per dag, ik wou graag van de afgelopen 24 uur
En dat is Highstock, is het ook te realiseren met Highcharts?

[HamuNaptra]

highchart en highstock zelf bieden geen enkele manier van data verwewrking. Dit moet je zelfd oen voor je dat data aanlevert. Misschien dat 1 van de plugins iets voor je kan betekenen? Misschien ben je gewoon op zoek naar een trendlijn?