Custom Visualisation enable users to add custom codes i.e. html, Java script to write their own business logic to create custom widgets also users can use virtually add any charts or maps libraries i.e. HighCharts, D3js, Google maps etc. to create custom widgets (Please check the license condition, users must read and agree to the third party licenses before using them, AIS do not take any responsibility for any AIS customers for not following licensing terms for any third party tools and users are fully responsible for third party licenses and using third party library/tool by fully complying with the terms attached)


To Add a Custom Visualisation Widget in dashboard, follow the steps below:


1. Click on Component icon from the top right corner menu, a list of the available component will open up as follows:




2. Click on   Component from the list of component into the dashboard, a configuration box would open as follows:




3. Follow below steps to create Tree Map Custom Visualization.


    • Select Tree Map
    • Now go to Data tab
    • Provide name to custom visualization (make sure name should be unique).
    • Select desired Datasource
    • Move to HTML tab (Make necessary changes if required)
    • Then go to Javascript tab (In this tab you need to make some Changes) follow below steps:
      1. Update CondigData variable

       

               

       

      1. Change var data= getSelectedData(widgetContext,condigData);


to

                var data=  getSelectedData(widgetContext.datasets['fileName'],condigData);        


      1. Provide datasource fileName which you have selected in datasource section.


    • Then go to CSS tab if required customize it.

               
4. Click on button to create Custom Visualization.