Data Visualization

Using InfoMotion to visualize data.

This tutorial covers the following.

  • Discovering and Forking a flow
  • Discovering and Forking a graph (InfoType)
  • Visualising Flow data in an InfoMotion

Import a Flow

Enebular allows users to publish and fork Assets. At the right top part of the window click on Discover.

discoverMenu

Select Flow and search getting-started.

discover

Click fork to open the fork modal.

discover2

Select the project to import to and the Default asset role. (For now select superdev)

fork

Go back to your project dashboard to see the new asset you just forked.

addedForkFlow

The imported Flow should look like this.

forkFlow

The flow is set up in a way that all the user needs to edit in the flow is datasource credentials. before we deploy the flow lets register a datasource.

Creating a Datasource

Below are the current real time databases used in InfoMotion. See documentation for simple registration and and set up configurations.

This tutorial uses Firebase. Before proceed to the next step, you have to register and create dataStore. Please refer to Firebase.

*The following configurations are for testing usage only and not recommended for production.

Editing and Deploying the Flow

Set credentials to Node and deploy flow. This tutorial only set uo Firebase Node.

Credentials needed for Firebase.

At the overview page click on Add firebase to your web app. firebase

databaseURL will be used in the Flow.

webApp

Inputs in Flow

Double click the firebase node and click on the pencil icon to edit a new firebase.

fireBaseNode

Insert your databaseURL, click update and done to set node. Leave authtype to none just for this example.

fireBaseConfig

Once the correct credentials are inserted click the Deploy button. To check if data is being pushed click the debug tag. The debug log should be updated every 10 seconds (intervals set by the inject node).

Image of debug log

debugTab

With data being pushed to a database we can create an datasource (endpoint) for infomotion to use.

*Note 1: The free version of enebular automatically sleeps if there is no access for 30 minutes. At present only the free version is available.

*Note 2: If the flow editor is left open and unused for an extended period of time, an attempt to deploy may result with it failing with "Unauthorized". If this happens please reload.

Registering a DataSource for InfoMotion

We will next add datasources to our project for InfoMotion to visualise. At your project dashboard select Data Source on the left tab then click on the plus button to open the datasource modal.

addDataSource

Give the datasource a name and correct credentials. Click on save to save. Now the datasource is ready for InfoMotion to use.

dataSourceSettings

Import an InfoType

Enebular allows users to publish and fork Assets. At the right top part of the window click on Discover.

Select InfoType and search barchart.

discoverInfoType

Click fork to open the fork modal.

sampleBarChart

Select the project to import to.

forkInfoType

Go back to your project dashboard to see the new asset you just forked.

confirmForkedInfoType

Creating an InfoMotion

Here we'll create an InfoMotion using a DataSource and an InfoType. Press the "+" at the bottom right to open the dialog box.

createInfoMotion

Give the InfoMotion a title. For the InfoMotion's default access permissions, just set it to developer this time. Select whatever you like for the "category" at the bottom.

InfoMotionModal

Once you've created it you'll be taken to the InfoMotion dashboard screen.

infoMotionDashBoard

Open the sidebar with "Add Graph". A list of the graphs shown on the dashboard is shown in the sidebar. In this procjet no graphs have been added yet.

newGraph

Click on New Graph to open the the creation modal. By default the Type will be set to barchart and DATASOURCE to test-datasource. The Label corresponds to x axis set as category and Value to the y axis value. These are set by default. Edit the name as you like then create graph.

graphConfig

"test-graph" will now be added to the list.

graphList

If you click the plus icon to the left of test-graph it will be added to the dashboard. If data is not displayed you may have no data being stored. Select a daterange to a date when data was stored.

infomotion

To resize the graph drag its bottom right corner then press "Save" to save the save layout.

infomotion2

Well Done!

With that, we've been able to go from creating a data flow right through to displaying a graph that uses the data.

While in this tutorial we displayed a simple pre-made bar graph, you can also create, upload and use your own InfoMotion Type. For details, please refer to the InfoMotion Type Creation Tutorial.

results matching ""

    No results matching ""