#Objective

The Platform allows you to create custom analytics applications using a set of graphical components made available. The management and organization of the restitution is centralized in the Dashboard tab of an application. This tab lets you list, add, and edit dashboards that can contain various types of content:

• Graphical representations from different extensions installed in the application

• Dynamic parameter that can be linked to graphics to make the data displayed interactive

• Static texts

• Blocks with tabs, to go from one graphic representation to another for the same data for example

• Blocks that can also contain different types of content with or without display condition

• Pop-ins activated at the click of the user

• Code integration specific to the current Project

#Create your first dashboard (in point & click)

Before you begin, you must first have an application already deployed. To do this, you can start from the ReactJS - Dashlab application, for example, and use automatic build and deployment. In this example, the screenshots were made from the same application theme.

#Main screen and dashboard creation

To get started, go to the Overview screen of your application.

From this screen, select "Dashboard"

From this screen, you will be able to create new dashboards, delete them, edit them, etc. For the moment we will focus on creating a new dashboard.

1. Select "New Dashboard" on your screen.
2. Give it a name, for example: "My first dashboard".

The url of this dashboard (visible in the url once the application in production), will be filled automatically. You can edit it, just kept in mind that it must be unique, two dashboards cannot have the same url. The description field is optional and will allow you to better document your applications.

We will not (intentionally) go through the "advanced" mode, it is an option to modify the default behavior of the dashboard. This default mode is perfect for a first time, so we don't have to change it.

#Edit your new dashboard

#Add a link to your dashboard

Once the dashboard is created, you can enter the editor mode by hovering over the new block and clicking on "Edit".

You have a "Full Screen" mode available at the top right of the page, all screenshots will be made from this mode for the next steps of this tutorial.

Your dashboard is empty! and more importantly, if you were not already on the page, there is no link to get to that dashboard.

So first, we need to create a link in the menu to go to the dashboard.

To do this, use the "+" button, in the left column. Select "Basic UI" and then "Link". You will then arrive on a link editor.

You can enter a text (which will be displayed on the screen), in our example: "My first dashboard". In the url field, if you did not change it in the previous step, select: "my-first-dashboard". Also select "Navigation" to switch to active, this allows the link to change color, when it is the active page. The rest of the fields are optional but let you customize further your link. In this example we will just add "fa fa-dashboard" in "Icon", this corresponds to an icon of the library Font Awesome 4.

Once validated, your link will appear in the menu on the left!

#Add a chart to your dashboard

Your page is still empty: your first thought could be to add a graphic, and you would be right... but in order to make everything "prettier" we will start by adding a "panel". This will allow us to have our charts on a white background, instead of the "gray" background of the application. To do this, click on the "+" at the top of the screen.

Select "Container" and then "Panel". Then expand your "panel" via the arrows available when hovering your mouse over it.

Select the "+" of this panel, then "Chart" to add your first graph inside this "panel".

#Configuring a chart

Chart editor tabs

#Type

You will then come to a chart editor. You first need to select a chart type.

For our example, we will select "Morris - Donut"

:::info Morris is an open source library, the donut it provides is pretty good, but the customization of it is low.

#Options

A new tab has just appeared! This is the "Options" tab. This tab is not always present, some libraries do not always offer (yet) click customization.

In this tab, we can customize our donut's colors. The default template being colorful enough, modify the colors if you wish, but it is not necessary.

#Queries

In this tab, we will be able to link our graph to a query made in the Analytics Manager. If you've ever tried to do this, click on "Select a Query".

If not, choose "Custom Query" and create a query directly via the interface.

To display a "nice donut", the ideal would be a single "Data", and a single "Scale". In my example, I want to reduce a turnover.

#Infos

In this section, we will be able to give a name and description to our chart (optional). Enter for example: "My first chart", in the field name.

You will also find "Linked Dynamic Parameter". This configuration will allow you soon to connect your graph to a datepicker or a selectbox, so as to dynamically filter the data displayed by the graph.

#Advanced mode

This advanced mode allows you to directly edit the configuration JSON file of your chart. All previously used screens are related to this JSON, and we do not yet have an interface to perform all possible configurations via this JSON.

Validate, and your graph will be displayed!

:::

Next article: Style

#Go further

If you need training or technical assistance to implement our solutions, contact your sales representative or click on this link to get a quote and ask our Professional Services experts for a custom analysis of your project.

Ask questions, give your feedback and interact directly with the team building the Data Platform on the dedicated Discord channel.

If you need support with your OVHcloud services, create a request in our Help Centre.

Join our community of users.