Stap 10: Visualiseren de gegevensstroom
Laten we EON te werken! Alle van de code die u nodig hebt is beschikbaar aan het begin van de blogpost.
De grafieken en grafische component van EON is gebaseerd op C3.js, een open source bibliotheek grafieken. Dit kunt u realtime lijn, een bar, taart, gauge en donut grafieken. Wanneer nieuwe gegevens wordt gestreamd, overgangen worden geanimeerd en wijzigingen worden doorgevoerd in realtime. Geen handboek verfrissende vereist!
Wij wilt niet alleen weergeven van onbewerkte gegevens uit de sensor als een aantal live-bijwerken. Dat is saai. Mijn partner-in-crime Tomomi gebouwd dus onze mooie temperatuur visualization, die je hierboven kunt zien! Het bespot kinderdagverblijf of broeikasgassen monitor (een typische, realworld use-case voor realtime temperatuursensoren).
De interface is loopt in de browser, en de technologie achter is vrij eenvoudig, met behulp van PubNub JavaScript-API's om je te abonneren op de gegevens die worden verzonden vanaf de Atmel-chip. Omdat onze interface eenvoudig, lichtgewicht en gebouwd is geheel in JavaScript, het is toegankelijk vanaf overal in de wereld met elke soort apparaat-mobiele telefoons, tablets en een smart-apparaat, zolang u een webbrowser hebben. Het belangrijkste doel achter dit is informatie te presenteren in de meest efficiënte wijze zonder verlies van de juistheid ervan.
In dit scenario toont de UI de huidige temperatuur, ook een eenvoudige lijngrafiek, in realtime bijwerken, zodat u de relatieve veranderingen van de temperatuur zien kunt, optillen en vallen. Deze gegevens is eenvoudig, maar wanneer u meerdere, meer ingewikkelde gegevens, data visualisatie belangrijker rol speelt.