Stacked Column Charts

Stacked Column Chart is similar to Multi-Series Column Chart, but the difference lies in the plotting of data sets, as the stacked column chart plots data sets on top of each data set, rather than adopting the clustered side-by-side placement of data sets. For detailed information on the different chart types provided by Canvas, refer App Designer - Analytical Charts. To create a stacked column chart app, perform the following steps in Canvas Studio:

1. On the home page of Canvas Studio, click App Designer.
   
   
   
   
2. Clickicon to create a new app.
   
   
   
   
3. Enter an appropriate name in the App Display Name field, e.g. Stacked Column Chart.
   
   1. Enter an appropriate ID in the App ID and View ID fields, e.g. STACKED_COLUMN_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 STACKEDCOLUMN chart view type.
   
   1. Click the Datasource tab to select the relevant data source for the stacked column 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, OVER_DRAFT_LMT and UNCLEARED_FUND columns to Y-Axis.
      
      
   
   
   
8. Click theicon to use the additional available configurations.
   
   
   
   
9. Click Configure to change the column properties. Each column will have the default properties already set.
   
   1. After applying changes to the column properties, click Apply.
      
      
      
      
   On clicking Apply, the chart designer area will get displayed, where you can view the temporary preview of the chart.
   
   
   
   
10. Clickicon to save the app.
    
    
    
    A confirmation message, indicating a successful save appears.
    
    
    
    
11. Click Ok.
    
    Let's assume that the Stacked Column Chart app is mapped to the ACCOUNT SUMMARY workspace. The following screen shot serves as a good illustration of the output in the functional application, Modelhouse: