Example of Building Graphs for NetPing Devices in the Service Freeboard.io

  • Published In: Tutorial
  • Created Date: 2016-01-28
  • Hits: 1622

Previously, we examined an example of integrating NetPing devices with a cloud service dweet.io. A distinguishing feature of the service is a lack of the need to sign up or configure anything to work with it – data from your devices can be transmitted at once. You can watch changing data from sensors in the view of graphs via the address:


For a better visuality of data, let us use the service freeboard.io, which is a web dashboard and is supported by dweet.io. It allows to visually represent the data from a device using only a web browser and an Internet access. A concept of the service is based on the layout of object-panels (PANE) on the dashboard page. It is possible to add several widgets (WIDGETS) into each panel. There are widgets for a different data representation: a linear scale, a graph, a direction indicator (for example wind), a status indicator ON/OFF, Google Maps location and others. In addition, freeboard.io has got a built-in support for other services (DATASOURCES): FIWARE Orion, PubNub, Yahoo! Weather; and can get data in JSON format via the URL by various methods. It also has a service for representing current time and support for expanding possibilities and features through building own plugins.

WEB dashboard freeboard.io

Let us implement an example of the integration with a web dashboard freeboard.io at the basis of a previously configured integration of a NetPing device with a service dweet.io. Details are available in the article via the link.

Configuring the Service freeboard.io

To start working with a service freeboard.io, there is a need to get registered. A service is provided on both free and paid basis. The service provides extended functionality and possibilities for a fee. In a free version, the service allows creating only public dashboards, which are available to everyone via the link. After completing a registration procedure and logging in a personal account, let us proceed with creating a new dashboard. Let us enter a name «NetPing» and click «Create New»:

Creating a new dashboard in freeboard.io

Let us add a data source (DATASOURCES) to the created dashboard:

Adding a new data source in freeboard.io

Let us choose a service dweet.io:

Adding a data source in dweet.io freeboard.io

And fill in the fields of a form in a next way:

Filling out the form data source freeboard.io


NAME: Netping USS

THING NAME: netping_uss

KEY: is left empty. It is filled in only if a locked name of a dweet.io object is used. More detailed information about this is given at the project page.

Let us add a panel for future widgets «+ ADD PANE».

A service allows adding a necessary amount of panels to group similar widgets of data and make them readable. The panes can be moved on a dashboard and located in a convenient place/sequence.

Let us add the first widget to a created pane:

Adding a widget in the panel created freeboard.io

Adding widgets to your panel freeboard.io

Select the type of widget to add it to the panel freeboard.io

Let a widget represent a temperature from the first temperature sensor as a linear scale (gauge). Let us enter a value «Temp 1» into a field «TITLE:» and proceed to add a source for receiving temperature data:

Adding a source of data on temperature freeboard.io

When clicking «+ DATASOURCE», a choice from previously added data sources «Netping USS» is automatically offered:

Select Data Source to freeboard.io

After choosing a source, all sensors connected to dweet.io with corresponding names become available. Choose «TempSensor1»:

Adding sensors freeboard.io

A field «UNITS» is used to represent measurement units of displayed data. «MINIMUM» and «MAXIMUM» are used to set a minimal and maximal threshold for a scale of a widget:

Configure the widget to freeboard.io

A widget given below will be a result of the settings:

Set up the gadget temperature sensor device NetPing

Widgets for the second temperature sensor and for a humidity sensor can be added to a current panel or a new one can be created:

Adding a new widget in freeboard.io

The next elements of the interface allow:

Customize the look of dashboard in freeboard.io

1 – complete the process of editing/configuring and proceed to a display mode dashboard;

2 – enlarge dashboard display for widescreen monitors;

3 – switch a dashboard into a fullscreen mode.

In the same way, let us add the rest of sensors, and let us add a data representation in the view of graphs besides a linear scale (gauge) for displaying data from sensors. A result can have the following appearance:

Dashboard в freeboard.io


Therefore, the service freeboard.io allows to quickly organize visualization of data from the sensors, connected to the service dweet.io and other services, where data from monitoring devices and NetPing devices for remote controlling of power supply sockets can be transferred at no additional expense.

comments powered by Disqus