WSO2 Complex Event Processor is succeeded by WSO2 Stream Processor. This documentation is for WSO2 Complex Event Processor 4.1.0. View documentation for the latest release.
||
Skip to end of metadata
Go to start of metadata

A gadget is a component of a dashboard which displays information relating to a real time event flow is a specific format. If the gadgets available in the Analytics Dashboard by default do not match your requirement, you can create a new gadget using the gadget generation wizard or add a custom gadget.

Click on the relevant link to create a new gadget using your preferred method.

It is required to create a UI event publisher associated with a realtime event stream before you create a custom gadget.



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.

Selecting the table/event stream

Follow the steps below to select a table or an event stream to get data for the gadget.

  1. Log into the Analytics Dashboard if you are not already logged in. For detailed instructions, see Logging into the Analytics Dashboard.
  2. Click CREATE GADGET in the top navigator.

     
  3. Select the relevant input for the Analytics Table/Event Stream as shown below. It can be either an analytics table or an event stream. Then click Next.
  4. Select a chart type from the available list as shown below.

    In the Title parameter, enter a title for the gadget you are adding.

    Click on the relevant tab below and configure the required parameters for the chart type you selected in the previous step.

    The parameters to be configured are as follows.

    Parameter NameDescription
    X-AxisSelect the attribute for the X axis of the bar chart.
    Y-AxisSelect the attribute for the Y axis of the bar chart.
    Number of Viewable RecordsThe number of records that can be viewed on the chart at a given time.

    The parameters to be configured are as follows.

    Parameter NameDescription
    X-AxisSelect the attribute for the X axis of the line chart.
    Y-AxisSelect the attribute for the Y axis of the line chart.
    Color DimensionThe points mapped on the line chart will be differentiated using colour based on the value of the attribute selected for this parameter.
    Number of Viewable RecordsThe number of records that can be viewed on the chart at a given time.

    The parameters to be configured are as follows.

    Parameter NameDescription
    X-AxisSelect the attribute for the X axis of the area chart.
    Y-AxisSelect the attribute for the Y axis of the area chart.
    Number of Viewable RecordsThe number of records that can be viewed on the chart at a given time.

    The parameters to be configured are as follows.

    Parameter NameDescription
    KeyThe attribute which serves as the key for an information row in the table.
    Number of Viewable RecordsThe number of records that can be viewed on the chart at a given time.
    ColumnsThis parameter is used to specify the attributes for which columns should be created in the table.

    The parameters to be configured are as follows.

    Parameter NameDescription
    X-AxisSelect the attribute for the X axis of the scatter chart.
    Y-AxisSelect the attribute for the Y axis of the scatter chart.
    Point ColourThe points mapped on the scatter chart will be differentiated using colour based on the value of the attribute selected for this parameter.
    Point SizeThe points mapped on the scatter chart will be differentiated using size based on the value of the attribute selected for this parameter.
    Number of Viewable RecordsThe number of records that can be viewed on the chart at a given time.

    The parameters to be configured are as follows.

    Parameter NameDescription
    X-AxisSelect the attribute for the X axis of the map.
    Y-AxisSelect the attribute for the Y axis of the map
    RegionThe geographical area that should be included in the map. Possible values are World Map, USA Map and Europe Map.

    The parameters to be configured are as follows.

    Parameter NameDescription
    X-AxisSelect the attribute for the X axis of the number chart.
    Number DescriptionA description for the number.
  5. Click Preview to view a preview of the chart as shown in the example below.
    preview of the added chart 

  6. Once all the customizations are done, click Add to Gadget Store to generate a gadget with the information you provided.
  7. Click the corresponding Design  button of the dashboard to which you want to add a gadget as shown below.
    editing a dashboard
  8. Click the following gadget browser icon in the side menu bar.
    The new gadget will be displayed in the available gadget list as shown below.
     line chart gadget added to list
  9. 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.
    gadget placed in the layout 
  10. Click PREVIEW to preview the gadget.

    A preview of the gadget will be displayed as shown in the example below. 
     

Gadget configurations are saved in the  <PRODUCT_HOME>/repository/deployemnt/server/jaggeryapps/portal/store/carbon.super/layout directory. Therefore, to create a custom gadget, you should save the required configurations in this directory. Follow the procedure below to create a custom gadget by creating the relevant configurations.

  1. Create a new directory in the  <PRODUCT_HOME>/repository/deployemnt/server/jaggeryapps/portal/store/carbon.super/gadget directory. This directory will serve as the parent directory of the custom gadget.
  2. Create the following resources and save them in the directory you created in the previous step.
    • index.xml file with a gadget structure configuration as shown in the following example.

      <?xml version="1.0" encoding="UTF-8" ?>
      <Module>
          <ModulePrefs title="USA Mobile Stats" height="250" description="USA Mobile Stats">
              <Require feature="pubsub-2"/>
              <Require feature="dynamic-height"/>
          </ModulePrefs>
          <Content type="html">
              <![CDATA[
              <head>
                  <style type="text/css">
                      .log {
                          width: 400px;
                          height: 400px;
                          background-color: #415b76;
                          color: #fff;
                      }
                  </style>
                  <script language="javascript" type="text/javascript" src="/portal/js/jquery-1.10.2.js"></script>
                  <script>
                      gadgets.HubSettings.onConnect = function() {
                          var id = 0;
                          setInterval(function() {
                              $('.log').append('<div>publishing message from g1, id : ' + (++id) + '</div>');
                              gadgets.Hub.publish('select', {
                                  msg : 'A message from g1',
                                  id: id
                              });
                          }, 5000);
                      };
                  </script>
              <head>
              <body>
                  <div class="log"></div>
              </body>
              ]]>
          </Content>
      </Module>
    • gadget.json file with a gadget definition as shown in the following example.

      {
          "id": "USA Mobile Stats",
          "title": "USA Mobile Stats",
          "type": "gadget",
          "thumbnail": "local://store/gadget/my-gadget/index.png",
          "data": {
              "url": "local://store/gadget/my-gadget/index.xml"
          },
          "notify": {
              "select": {
                  "type": "address",
                  "description": "This generates mobile stats."
              },
              "cancel": {
                  "type": "boolean",
                  "description": "This generates disconnected mobile stats."
              }
          }
      }
    • A thumbnail image for the gadget named index.png as shown in the following example.
      thumbnail image of the custom gadget  
  3. Refresh the Analytics Dashboard. Now you can view the custom gadget in the list of available gadgets as shown below.
    created custom gadget added to the list of available gadgets You can add this custom gadget to a layout.

  • No labels