Custom Visualizations

Custom Visualization in Zoho Analytics allows users to create and integrate custom visualizations beyond the default chart types. With this capability, you can use third-party libraries or custom scripts to design unique visual elements that better suit your reporting needs.
To create a custom visualization, you must configure three key files: ZAViz_Manifest.json and main.js. These files define the structure, dependencies, and rendering logic of the custom visual.

Configuring a Custom Visualization

1. ZAViz_Manifest.json – Define the Data Fields

The ZAViz_Manifest.json file defines the required fields and the drop area for the custom visualization. It specifies how users should map data fields when using the visualization. 

{
    "name": "<visual's display name>",
    "icon": "<visual's icon url>",
		"dependencies": ["URL", "file1", "file2"],
    "structure": [
      <dropBox Parameters in array>
    ]
}
dropBox Parameters:
[
   "<Name of the Drop Box>",
   "<is single column droppable or not>",
   "<Supported data Type>",
   "<Supported operations in the types
     ('' to support all operations)>"
]
Ex :
[
   'Value',
   'single',
   'MEASURE',
   ''
]
]

Example for a Waterfall Chart:

{
    "name": "WaterFall",
    "icon": "localFile <path>",
	"dependencies": [https://cdn.plot.ly/plotly-3.0.0.min.js]
    "structure": [
        [
            'Category',
            'single'
            'DIMENSIONAL',
            ''
        ],
        [
            'Value',
            'single',
            'MEASURE',
            ''
        ]
    ]
}

2. main.js – Render the Visualization

The main.js file handles the rendering logic. You must override the generateCustomVisual method to create the visualization using the specified chart container and data.

function generateCustomVisual(container, data, metaData)
{
 // your renderer logic here
}

Adding a Custom Visual as a Plugin

Custom visualizations can be added only by Workspace Admins and are currently supported only in the Enterprise Plan.

Steps to Add a Custom Visual:

1. Click the Plugin icon next to the Chart Type selector.
2. In the File Explorer, upload the custom visualization as a ZIP file. The ZIP must contain all required files (ZAViz_Manifest.json and main.js).
3. Once uploaded, the custom visual appears under the Plugin icon.
4. Select the newly added Plugin. The Drop area updates according to the configured structure.
5. Drag and drop the required fields into the appropriate drop area.
6. Click Generate Chart to render the custom visualization.

Using External Libraries

You can use any third-party JavaScript libraries, such as:

• D3.js
• Highcharts
• Plotly
• Any other JavaScript visualization library

Supported Functionalities

• Currently, basic formatting options are supported. Developers must apply JavaScript APIs to match Zoho Analytics' data formats.
• Zoho Analytics provides extensive JavaScript APIs for customization, including options for:
  • Colors
  • Fonts
  • Legends
  • Formatting parameters