BEDRIJFSINFORMATIE VLAAMSE OVERHEID VIA DRUPAL. SHOPT IT - 8 mei 2014

Transcriptie

1 BEDRIJFSINFORMATIE VLAAMSE OVERHEID VIA DRUPAL SHOPT IT - 8 mei 2014

2 meteen ter zake

3

4

5

6 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.

7 Dataflow datawarehouse ETL ETL ETL/BI-tool genereert csv ftp... ETL mount webserver Highcharts

8 Alternatieve dataflow ETL php-script genereert... ETL ETL ETL/BI-tool 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.

9 FREE FOR NON-COMMERCIAL COMPATIBLE moderne browsers mobile/tablets IE vanaf IE6 HTML5 gebaseerd op native browser technologie; geen plugins vereist (flash/silverlight/...) DYNAMIC, EASY TO USE...

10 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?

11 Vroeger Grafieken via: iframe gevuld met Cognos (BI-tool) data-visualisatie google-charts in combinatie met taxonomie MAAR problemen met beide systemen: iframe: chart-configuratie via Drupal-taxonomie: mix van js en php moeilijk in onderhoud moeilijk uit te breiden; weinig configuratie-opties

12 Anatomie Highcharts-grafiek Highcharts is een javascript-bibliotheek -> javascript-kennis is vereist <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: # }] }, 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] }] }); }); Temperature ( C) Monthly Average Temperature Source: WorldClimate.com Jan Feb Mar Apr May JunJ ul Aug Sep Oct Nov Dec Tokyo New York Berlin London Highcharts.com

13 Opbouw van grafieken as is

14 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

15 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

16 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.

17 Oplossing: Easychart intuïtieve GUI voor Highcharts jquery-plugin ( gebaseerd op Highcharts API json-optionsstring ( highcharts.com/highcharts/option/dump.json) Drupal-module ( door Departement Bestuurszaken (Thomas Daem) en Eps&Kaas (Jan-Yves Vanhaverbeke)

18 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...

19 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