Adding Additional Chart Configurations – 19.1

Canvas enables you to add configurations to the chart to customise it as per your requirement. This can be achieved in two ways depending upon how the data is sourced.

For instance, if you want to change the colour option of your bar chart, you can achieve that in the following ways.

1. If the data is fetched from the Datasource or SQL Param Map, perform the following steps else proceed to step 2:
   
   
   1. Open the chart app in App Designer, then click the chart and the Chart Properties tab opens on the right-hand side of the page.
      
      
   2. Click the first drop-down list and select the configuration property type of the chart.
      
      

   3. Select a parameter from the given options in the second drop-down and specify the corresponding value as required.
      
      

      Click the Plus sign to add an additional property and the delete icon to delete the property.

   4. Click Apply to apply your configuration on the chart.
      
      
2. If the data is dynamic and fetched only during runtime from the client side, perform the following steps:
   

   Before the data load, pass the configurations as JSON data in your implementation .js(listener) file for the chart.

   CWEH.registerHandler("MSCHART", CWEC.BEFORE_DATA_LOAD,
   function(widgetId, paramss, netState, callback)
   {
       var records = [{"MONTH":"JAN","INWORD_AMT":"9234.98","OUTWORD_AMT":"4234.98"},
       {"MONTH":"FEB","INWORD_AMT":"9876.00","OUTWORD_AMT":"6875.78"},
       {"MONTH":"MAR","INWORD_AMT":"2456.00","OUTWORD_AMT":"6567.78"},
       {"MONTH":"APR","INWORD_AMT":"5886.00","OUTWORD_AMT":"3744.78"},
       {"MONTH":"MAY","INWORD_AMT":"9876.00","OUTWORD_AMT":"5875.78"},
       {"MONTH":"JUN","INWORD_AMT":"5876.00","OUTWORD_AMT":"875.78"}];
       if(ct.isArray(records)&&records.length>0)
       {
           var params=
           {
               "response":
               {
                   "value":
                   {
                       "TOTAL_COUNT":records.length,
                       "ALL_RECORDS":records,
                       "ADDITIONAL_DATA":
                       {
                           "TOTAL_NUM_RECORDS":records.length,
                           "LAST_UPDATED_DT_TM":moment().format('DD/MM/YYYY HH:mm:ss'),
                           "JSON_DATA":
                           {
                               "CHART":
                               {
                                   "colorProp":
                                   {
                                       "color":["#047cbb","#9C27B0","#F44336"]
                                   }
                               }
                           }
                       }
                   },
                   "HEADER_VALUE":
                   {
                       "TXN_PROCESS_DATE_TIME":moment().format('DD/MM/YYYY HH:mm:ss')
                   }
               };
               params.response.cancelLoad=true;
               params.response.dataMerge=true;
               callback.apply(this,[params]);
       }
   });