4. Create a Chart App

Owned by Lakshminarayanan1 S CTOO (Unlicensed)
Last updated: Aug 24, 2020

Bar Chart is a view type, which illustrates the quantitative comparison of the data in a feasible manner. Bar charts comprise horizontal aligned rectangular bars, so as to facilitate the purpose of a viable data comparison. The purpose of charts is to display the data in an effective graphical representation with acutely aligned axes to facilitate the purpose of portraying the displayed data in an accurate manner. For detailed information on the different chart types provided by Canvas, refer App Designer - Analytical Charts.

You can easily create a chart app (widget) using App Designer in Canvas Studio with viable and feasible configurations. Apps (Widgets) serve the purpose of displaying the data from the selected data source.

A brief overview on creating a chart app in Canvas Studio is provided as follows:

  1. In Canvas Studio, click App Designer.
  2. Clickto create a new app. 

  3. Provide unique names in the App Display Name, App ID and View ID fields.  

    No blank spaces and special characters should be used in the App ID and View ID fields. The underscore symbol can be used.

  4. In the App Resource bundle field, provide the bundle key of the associated property file. 
  5. Select the appropriate Product, Sub-Product and Function Codes. 
  6. Select the BAR chart view type. 
  7. Click the Datasource Tab. 
  8. In the Data Src ID field, select the data source of your choice and then click Proceed to design the app. 
  9. Click Columns tab. 
  10. Drag and Drop the appropriate columns to the X and Y axes in the designer area. 
  11. Clickto save the chart app. 


The step-by-step procedure to create a chart app in Canvas Studio is listed as follows:

  1. On the home page of Canvas Studio, click App Designer.




  2. Click icon to create a new app.



  3. Enter an appropriate name in the App Display Name field, e.g. ACCOUNT SUMMARY CHART.
    1. Enter an appropriate ID in the App ID and View ID fields, e.g. ACCOUNT_SUMMARY_CHART_APP.
    2. In the App Resource Bundle field, enter the name of the bundle key associated with the property file, e.g. common.

    3. Select the appropriate Product, Sub-Product and Function Codes. For detailed information on Product, Sub-Product and Function Codes, refer Configuring Entitlements and Creating Product, Sub-Product and Function Codes.

    On entering the App ID, the View ID gets filled automatically. However, you can still apply changes to the View ID. No blank spaces and special characters should be used in the App ID and View ID fields. The underscore symbol can be used. During the creation of an app, you can edit the App ID and View ID fields. However, while editing an app, you cannot apply changes to the App ID and View ID fields.




  4. Select the BAR chart view type.



    1. Click the Datasource tab to select the relevant data source for the bar chart widget.



  5. Click the Data Src ID field and type the name of the Data Source to select it.

    You can uncheck the Use Existing Data Source and Use Default instruction Class checkboxes to connect to any data source using SQL Param Map ID. For detailed information on using the SQL Map and the instruction class to display data on the app, refer Adding the SQL Map and Instruction Class with App.

    1. Click Proceed to design the app.



  6. Click Columns tab.



  7. Drag and Drop the ACCOUNT_NAME column to X-Axis.
    1. Drag and Drop the AVAI_BALANCE column to Y-Axis.



  8. Hover the mouse on the ACCOUNT_NAME column, clickicon to configure the column properties.  



  9. Hover the mouse on the AVAI_BALANCE column, clickicon to configure the column properties. 



  10. Click icon to save the app.



    A confirmation message, indicating a successful save appears.




  11. Click Ok.