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
