Widgets
Het is mogelijk om gegevens over de hoeveelheid opgewekte energie te integreren op een externe website middels onze ‘Widgets’. Als u dit wenst kunt u hiervoor contact opnemen via info@voorstroom.nl.
1. Participanten en Units
Type: ‘Units’
2. Opgewekte energie
Type: ‘Production’
3. Verdiensten
Type: ‘Earnings’
4. Grafiek: Opgewekte energie per dag in huidige maand
Type: ‘Daily’
5. Grafiek: Opgewekte energie cumulatief in huidige productieperiode
Type: ‘Total’
Integratie
Om de Widgets te integreren moet er een stukje code worden geplaatst op de gewenste plek binnen de website.
1. Allereerst moet er een verwijzing worden gemaakt naar de Javascript Library van Voorstroom:
<script type=”text/javascript” src=”https://lib.voorstroom.nl/voorstroomjs/latest/voorstroom.js”></script>
2. Voeg een element toe op de pagina waarin de Widget moet worden weergegeven, bijvoorbeeld:
<div id=”info-box-units”></div>
3. Vervolgens kan er een Widget worden aangemaakt middels de onderstaande code:
let vs = new Voorstroom(‘00000000-0000-0000-0000-000000000000’);
vs.CreateBox({
ElementId: ‘info-box-units’,
Type: ‘Units’
});
De variabele van het type ‘Voorstroom’ hoeft slechts één keer te worden aangemaakt per Project. Het ID in de constructor is een verwijzing naar het project en ontvangt u van ons.
‘ElementId’ verwijst naar het ID van het toegevoegde element in stap 2.
‘Type’ correspondeert met de bovengenoemde Types onder ‘Widgets‘.
4. Het is mogelijk om het icoon te verbergen bij het aanmaken van de eerste 3 Widgets, op de volgende manier:
vs.CreateBox({
ElementId: ‘info-box-units’,
Type: ‘Units’,
Options: {
DisplayIcon: false
}
});
Complete voorbeeldcode
<!DOCTYPE html>
<html>
<head>
<title>Voorstroom Widgets</title>
</head>
<body>
<!-- Info boxes -->
<div class="row">
<div class="col-sm-4">
<div id="info-box-units"></div>
</div>
<div class="col-sm-4">
<div id="info-box-production"></div>
</div>
<div class="col-sm-4">
<div id="info-box-earnings"></div>
</div>
</div>
<!-- Charts -->
<div class="row">
<div class="col-sm-6">
<div id="chart-bar-daily"></div>
</div>
<div class="col-sm-6">
<div id="chart-line-total"></div>
</div>
</div>
</body>
<script type="text/javascript" src="https://lib.voorstroom.nl/voorstroomjs/latest/voorstroom.js"></script>
<script>
//// Initialise for project.
let vs = new Voorstroom('00000000-0000-0000-0000-000000000000');
//// Info boxes
// Units
vs.CreateBox({
ElementId: 'info-box-units',
Type: 'Units'
});
// Production
vs.CreateBox({
ElementId: 'info-box-production',
Type: 'Production'
});
// Earnings
vs.CreateBox({
ElementId: 'info-box-earnings',
Type: 'Earnings',
Options: {
DisplayIcon: false
}
});
//// Charts
// Bar chart, daily for current month.
vs.CreateChart({
ElementId: 'chart-bar-daily',
Type: 'Daily'
});
// Line chart, total cumulative for current period.
vs.CreateChart({
ElementId: 'chart-line-total',
Type: 'Total'
});
</script>
</html>