How to create a dashboard step by step?

Owned by DevPortal Editor (Unlicensed)
Last updated: 28/10/22 by Onesait Platform

EN | ES


Access a Platform Instance

Firstly, access to the platform: https://lab.onesaitplatform.com/controlpanel/login

If necessary, create a new user with developer role:

 


Go to Dashboards


Go to VISUALIZATION -> My Dashboards.

The screen will show a list of the available dashboards and some extra information that is explained below.


In the Options column, you can see different options. These options can be different based on the user role and the authorizations on the dashboards:

  • Allows to access the dashboard and work with it in presentation mode.
  • Acess the dashboard in edit mode.
  • Configuration of the dashboard, change picture, authorizations, etc.
  • Allows to clone the dashboard.
  • Gives a URL to access the dashboard in presentation mode.
  • Export a dashboard image.
  • Export a dashboard pdf file.
  • Remove the dashboard, if selected and confirmed.

Create a new Dashboard

Click on the New Dashboard button to access the creation form.

Assign a unique id (1) and a description (2) to the dashboard. There is the option to make the dashboard public using (3), or you can leave it as private and assign more specific permissions. You can select an initial dashboard style (4),  leave the default image that will be displayed for users with the DataViewer role, or select one to differentiate your dashboard from the other dashboards more visually (5); and you can also assign a Category (6) and a subcategory (7).

You can create Scripts, add libraries or styles can be added to the dashboard in the html editor (8). You can also assign authorizations to other users (9), for which you must choose the user and the type of access, and click on insert authorization. The authorization will appear in the list on the right, where you can modify or delete it.

There are two types of available authorizations:

  • EDIT grants edition and visualization.
  • VIEW grants only visualization.

Click NEW to finish the dashboard creation.


Dashboard Edition

After the dashboard creation, access the editing screen with the Edit button. There you can design your dashboard, giving it the styles that suit your needs and creating or adding the gadgets that will show the information that is required.

Dashboard header buttons:

  1. Move Toolbar Buttons.
  2. Add Element: To add gadgets to the dashboard.
  3. DataLink: To configure filters and between gadgets.
  4. URL Parameters.
  5. Open the options Pages, Configure Dashboard y Dashboard Style.
  6. Save Dashboard.
  7. Delete Dashboard.
  8. Close Dashboard Editor.

To start adding gadgets, click the option (2). This will show charts with the different types of gadgets that can be passed to the dashboard.

Currently, the available types of charts are:

  • Line Chart.
  • Bar Chart.
  • Mixed Chart.
  • Pie Chart.
  • Wordcloud.
  • Map, to be used the data to be displayed must have coordinates.
  • Radar, also known as web chart, spider chart, and star chart, among other names.
  • Template, this allows to create charts writing html code.
  • Filter, allows to clean the filters.
  • HTML5, allows to create a gadget using a html5 editor.
  • Table, data tables.

Drag and drop the selected chart icons to the dashboard canvas, drop then there, and a pop-up will show the following options:

ADD GADGET: if you select an existing gadget and click this button, this option will add it to the canvas.

NEW GADGET: The gadget you need does not yet exist, so you will create it now. Click the button and this modal window will appear.

Add a name to the gadget. There is two options to configure a gadget: The first one is selecting a previously defined datasource. The second one is selecting an ontology from which the gadget will show information. In this example, we use the Restaurants Ontology.

After choosing the ontology, a wizard appears to help you set up the query with which to fetch the data. For the example,  a simple select * from Restaurants will be enough.

If you click on Execute Query, the results of the query appear, and you can validate that it is what you need. When the expected output suits our requirements, click Continue.

In this case you will create a Line Chart type gadget, so you will have to fill in and choose the following values, at least: X Axis and Y Axis, which are the values ​​of the different axes of the graph (for this example, the type of kitchen and as Y axis the valuation), and a Color for the line. Then, click on NEW. You can create more than one line by adding more measures or more than one axis with ADD AXIS and filling in the values ​​for another axis.

You can see in real time how your graph is being represented with the values ​​that you marked. When it is as you wish, press NEW and the gadget will go to the dashboard page. This would be your first gadget. You will now create two more to see the drill-down and filter functions.

Create a Pie or Pie-Type gadget. To do this, after choosing the data source, you only have to choose the values ​​for the X and Y axes.

Finally, create a Table Type gadget, to see in detail the information of each restaurant. For this, as in the two previous cases, select a data source and fill in the fields that we need.

You can see a Table Config section, with the table configuration; show or hide the header, selectable rows, number of elements per page… In this example, I have only made the rows selectable and changed the colors of the header and footer to white. Then, I have added the measurements and the names that will be seen in the header, and I have given them an order.

To finish our third gadget, click on NEW.

Place the gadget in the dashboard so that it allows the correct visualization of the data. Click the Save option to store the dashboard.


Click on the data link button (option (3) on edit header) to establish relationships or connections between the gadgets. This modal window appears, where you can add the relationships. First select the source gadget and source field, which is the gadget on which you will click to filter the data of the target gadget by its target field. Summarizing: when pressing a data of the source gadget, it filters the data of the destination gadget.

The first relationship is established between the GADGET PIE and the GADGET LINE:


 The second relationship is established from the GADGET TABLE with the GADGET PIE.

You can see that, if you click on a row of the table, the data of the GADGET PIE with the filter cuisine = American is updated; and that, if you click on the GADGET PIE in Manhattan, the GADGET LINE inherits the filters borough = Manhattan and cuisine = American.


Option (5) of the edit header has three additional options to configure the dashboard:

PAGES

It allows you to manage the pages of the dashboard, being able to have one or create more.

You just have to give it a name, select an icon, and, if you want, you can givea background image or a color.

To establish the order of the pages you just have to click on the arrows on the right. The one on the top is the first one, and so on.


Configure dashboard

This allows configuring the dashboard's header, style, colors and logo.

It also allows to configure the visibility and style of the grid, such as the number of lines, columns...

Dashboard Style

It allows us to configure the styles of the gadgets at a global level, such as the height of the headers, the color, the style of the titles and the body.

Also, if you click on the menu icon:

you have the option to configure the styles of each gadget individually, hide the header, add a title, an icon, colors, ...