Powered by Blogger.

Friday, December 2, 2016

Tag: , ,

Lesson 5: Magicblocks.io : Dashboards



Dashboard is used to visualize data which processed by your IoT applications. Visualization methods include plots, graphs, maps and so on. In this article we wish to introduce you to Magicblocks dashboard and how to configure your own dashboard.


Step 1

Login to Magicblocks and click on 'Dashboards' link on the left navigation bar. This page will list you the dashboards you have configured. Initially when you login there will be no dashboards therefore this list will be blank.



Step 2

Click on the 'New Dashboard' button to create a new dashboard. Enter the following details:
  • Name - A name for your dashboard. 
  • Description - description of what your dashboard displays
  • Visibility - This parameter can be either
    • Admin only - A private admin only dashboard can be viewed only after logging into your magicblocks account. Therefore by just having the URL no one will be able to view your dashboard.
    • Public - A public dashboard can be viewed by anyone who has the URL of the dashboard. It can be shared  publicly


Step 3

Your dashboard will now be listed as shown below. Click on the 'View' link to open your newly created dashboard.




Step 4

Your newly created dashboard will now appear in a new tab. A dashboard is made up of

  • Datasources - a datasource is the source from which the dashboard obtains data. There are multiple datasource options available. By default there are
    • Clock datasource - timestamps generated at 1 second intervals. Can be used to display a clock on the dashboard or anyother similar purpose.
    • JSON datasource - an external API to obtain JSON data. You can define a URL which will be called by the dashboard periodically to fetch JSON formatted data. This data can be used to for visual representation.
Custom datasources can be defined on the magicblocks playground. Once a custom datasource is defined in the magicblocks playground, it will be visible in the dashboard. You can use these custom datasources to relay data from you playground logic layer to the dashboard visualization layer. Learn more on the playground in depth tutorials
  • Widgets - a widget is used to represent the data obtained from a a datasource. You can configure how the data obtained for the datasources should be fed to the widget for visualization. The following widgets are available:
    • Text - Display the data in text form. You can add a a graph additional to the text on the same widget to display the historical variation of the data. This graph can be either a line graph or a bar graph
    • Gauge - A gauge with a maximum and minimum value will display your data value 
    • Sparkline - A single series or multi series graph. Can be either bar or line. Eg. Three axis acceleration data from a mobile phone
    • Pointer - A pointer to display the direction. It is commonly used to display the azimuth of a movement. Eg: wind direction
    • Picture - A URL of a image can be fed via a datasource to be displayed
    • Indicator light - used to indicate the status of a certain operation
    • HTML - to display a web page on an iframe inside the dashboard
    • Google map - to display the location when the longitude and latitude information are fed by a datasource. eg: Location tracking
    • Table - to display tabular data fed by a datasource. eg: names of participants currently registered
To configure a dashboard you need to 

  • Create the relevant datasource on the playground. Refer the node documentation here.
  • add the datasource to the dashboard
  • add a widget to the dashboard and on the widget's configuration set the datasource's fields to be fed to the widget.
  • Save the dashboard.
To learn more about a real implementation, go to the walk through section here.