BEDRIJFSINFORMATIE
VLAAMSE OVERHEID
VIA DRUPAL
SHOPT IT - 8 mei 2014
meteen ter zake
www.bestuurszaken.be/bedrijfsinformatie
www.bestuurszaken.be/bedrijfsinformatie/personeelsbestand
www.bestuurszaken.be/bedrijfsinformatie/personeelsbestand
Bedrijfsinformatie VO
Data uit verschillende bronsystemen via ETL in datawarehouse -> authentieke bron
Opgelet: De dataflow die we hier bekijken is de flow zoals
hij in deze case is opgezet maar er zijn verschillende alternatieven mogelijk.
De hier voorgestelde dataflow wordt periodiek uitgevoerd.
Het interval is afhankelijk van de aard van de data.
Dataflow
datawarehouse
ETL
ETL
ETL/BI-tool
genereert
...
csv
ftp
ETL
mount
webserver
Highcharts
Alternatieve dataflow
php-script
genereert
ETL
ETL
...
ETL/BI-tool
ETL
csv
json
xml
ftp
mount
Highcharts
Highcharts haalt data op via een (in dit geval) php-script:
altijd actuele data, geen periodieke dump, geen dure BItools.
FREE FOR NON-COMMERCIAL
COMPATIBLE
HTML5
moderne browsers
mobile/tablets
IE vanaf IE6
gebaseerd op native browser technologie;
geen plugins vereist (flash/silverlight/...)
DYNAMIC, EASY TO USE...
Op de Drupal-website
visualisatie van data via Highcharts
= javascript bibliotheek (pure js of jquery)
--> js via Drupal-theme
MAAR
•Hoe worden deze grafieken opgebouwd?
•Hoe worden deze grafieken gevoed?
Vroeger
Grafieken via:
•iframe gevuld met Cognos (BI-tool) data-visualisatie
•google-charts in combinatie met taxonomie
MAAR problemen met beide systemen:
•iframe: http://www.rwblackburn.com/2012/07/iframe-evil/
•chart-configuratie via Drupal-taxonomie:
•mix van js en php
•moeilijk in onderhoud
•moeilijk uit te breiden; weinig configuratie-opties
Anatomie Highcharts-grafiek
Highcharts is een javascript-bibliotheek
-> javascript-kennis is vereist
=
Monthly Average Temperature
Source: WorldClimate.com
30
25
20
Temperature (°C)
<script type=”text/javascript”>
$(function () {
$(‘#container’).highcharts({
title: {
text: ‘Monthly Average Temperature’,
x: -20 //center
},
subtitle: {
text: ‘Source: WorldClimate.com’,
x: -20
},
xAxis: {
categories: [‘Jan’, ‘Feb’, ‘Mar’, ‘Apr’, ‘May’, ‘Jun’,
‘Jul’, ‘Aug’, ‘Sep’, ‘Oct’, ‘Nov’, ‘Dec’]
},
yAxis: {
title: {
text: ‘Temperature (°C)’
},
plotLines: [{
value: 0,
width: 1,
color: ‘#808080’
}]
},
tooltip: {
valueSuffix: ‘°C’
},
legend: {
layout: ‘vertical’,
align: ‘right’,
verticalAlign: ‘middle’,
borderWidth: 0
},
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]
}]
});
});
Tokyo
New York
Berlin
London
15
10
5
0
-5
Jan
Feb
Mar
Apr
May
JunJ
ul
Aug
Sep
Oct
Nov
Dec
Highcharts.com
Opbouw van grafieken as is
Opbouw van grafieken as is
Invoer van javascript via back-end.
•(te) gevaarlijk voor ‘gewone gebruikers’
•javascript-kennis vereist
•moeilijk te onderhouden
≠ best-practice; javascript invoer door gebruikers moet te
allen tijde vermeden worden
Voeden van grafieken as is
Invoer data via back-end: url of directe input
•via manipulatie van het configuratie javascript
•(te) gevaarlijk voor ‘gewone gebruikers’
•javascript-kennis vereist
•moeilijk te onderhouden
≠ best-practice
Voor verbetering vatbaar
•Tussenkomst van persoon met javascript kennis is
vereist om een grafiek op de website te wijzigen of om
een nieuwe grafiek toe te voegen.
•Grafieken zitten “verspreid” in de content.
•Hergebruik van een grafiek is niet mogelijk.
Oplossing: Easychart
•intuïtieve GUI voor Highcharts
•jQuery-plugin (https://github.com/bestuurszaken/easychart)
gebaseerd op Highcharts API json-optionsstring (http://api.
highcharts.com/highcharts/option/dump.json)
•Drupal-module (https://drupal.org/project/easychart)
•door Departement Bestuurszaken (Thomas Daem) en
Eps&Kaas (Jan-Yves Vanhaverbeke)
Oplossing: Easychart
voordelen:
•intuïtieve GUI voor Highcharts
•geen js-kennis nodig om een grafiek te maken
•geen js-invoer in back-end, geen code meer in content
•alle Highcharts-opties zijn mogelijk
•invoer data of url
•hergebruik grafieken mogelijk
•gemakkelijk in onderhoud
•...
Oplossing: Easychart
nadelen:
•momenteel eerste release: POC herschreven naar
module, nog niet alle opties zijn beschikbaar maar de
basis is wel al gelegd voor verdere uitbreiding
•klein ontwikkel-team
demo: easychart.org
© Copyright 2024 ExpyDoc
