Page Comparison

A gadget is a component of a dashboard. You can place gadgets to the pre-defined grids of the layout of a page as described below.

Anchor
Adding a default gadget Adding a default gadget

Adding a default gadget

Follow the steps below to add a gadget which is available by default in the analytics dashboard of WSO2 DAS.

1.  Access the analytics dashboard application using the following URL: https://<HOST_NAME>:<PORT>/portal/dashboards.
2. Log in to the dashboard using Carbon login credentials. 
3. Click the corresponding Design button of the dashboard to which you want to add a gadget as shown below.
   

4. Click the following gadget browser icon in the side menu bar. 
   
   You view all available gadgets as shown below.

   

5. Drag the gadget out which you want to add, and drop it to place it in the preferred grid of the selected layout in the dashboard editor as shown below.

   

Adding a gadget using the gadget generation wizard

Gadget generation wizard is a UI based fast and easy way to generate a gadget without writing any code. It guides you through multiple steps to customize the parameters of the gadget accordingly in each step. The gadget generation wizard has the following two steps.

• Adding Gadgets to Selecting a LayoutAdding Gadgets to a Layoutdatasource
• Configuring the chart

Anchor
Selecting a datasource Selecting a datasource

Selecting the datasource

Follow the steps below to select a datasource to get data for the gadget.

1. Log in to the dashboard using Carbon login credentials, if you are not already logged in.
2. Click the following CREATE GADGET icon in the top menu bar.  
   
3. Select the input datasource as shown below. It can be either an analytics table or an event stream.
   
   
4. Click Preview Data to view a preview of the datasource as shown below. 
   
5. Click Next.
   

Anchor
Configuring the chart Configuring the chart

Configuring the chart

Follow the steps below to configure the chart.

1. Select Chart Type and enter the preferred x, y axis and additional parameters based on the selected chart type as shown below. 
   

2. Click Preview to view a preview of the chart as shown below.
   

3. Once all the customizations are done, click Add to Gadget Store to generate a gadget with the information you provided. 

4. Click the corresponding Design button of the dashboard to which you want to add a gadget as shown below.

   

5. Click the following gadget browser icon in the side menu bar. 

   

   You view the new gadget listed in the gadget browser as shown below. 

   

6. Click on the new gadget, drag it out, and place it in the preferred grid of the selected layout in the dashboard editor as shown below.

   

Editing a gadget

You can use the following options provided in the dashboard editor to edit a gadget as described below.

...

• Click the following icon to view information about the gadget in a tooltip: 
• Click the following icon to move the gadget (drag-and-drop) from one grid to another in the layout.
  
• Click the following icon to view the settings of the gadget.
  You can change the default settings of the gadget as preferred as shown in the below example.
  
  
• Click the following icon to remove the gadget from the layout.
  

Creating a custom gadget

Use the sample gadget configuration structures in the  <DAS_HOME>/repository/deployemnt/server/jaggeryapps/portal/store/carbon.super/gadget/ directory to create a custom gadget Add the following resources and create the configuration parent directory of your custom gadget.

...