Op een dashboard nemen grafieken vaak een prominente plaats in. Een bekend voorbeeld hiervan is het Kibana dashboard. Een Kibana dashboard kan bijvoorbeeld gebruik maken van een ElasticSearch als data bron.

Recent heb ik met behulp van AngularJS en FlotCharts een document stroom gevisualiseerd. De data komt uit ElasticSearch. FlotCharts werkt met behulp van JQuery en is verassend flexibel. Zo kun je bijvoorbeeld met plugins de mogelijkheid toevoegen om in te kunnen zoomen, tooltips weer te geven en een mooie curve te maken ipv vlakke lijnen.

FlotChart1

In bovenstaande grafiek is het aantal documenten te zien per tijdseenheid. Geannoteerde documenten hebben een tooltip en d.m.v. een hover actie krijg je de tooltip te zien.

De data komt uit ElasticSearch en wordt met behulp van een datum histogram aggregatie berekend. Bij zo’n aggregatie kun je aangeven of de data per uur geaggregeerd moet worden of bijvoorbeeld per 5 min. Ook kun je subaggregaties toevoegen. In bovenstaand voorbeeld is dat gebeurd om het aantal annotaties per tijdseenheid te berekenen.

Door in te zoomen kun je meer details opvragen. Op de achtergrond wordt een nieuw data verzoek gedaan. De data is nu op een lager detail niveau geaggregeerd. In onderstaand voorbeeld is dat 1 min.

FlotChart2

De grafiek wordt elke minuut geupdate met nieuwe informatie. De AngularJS directive angular-flot zorgt ervoor dat de grafiek opnieuw gerenderd wordt. Dat wil zeggen dat de data vernieuwd wordt en de x-as en de y-as opnieuw berekend worden.

Ik ben met name te spreken over de flexibiliteit van de FlotChart library. Het optioneel weergeven van tooltips lijkt misschien lastig maar is in de praktijk erg makkelijk. Je kunt namelijk per grafiek meerdere datasets gebruiken die elk hun eigen opmaak instellingen hebben.