Applying Legend Filters

To apply legend filter to the specified view.

Function Call

ObjName.filterByLegend(value)

Parameters

Parameter NameDescription
values

JSONObject

value = { enable: Array<String>, disable: Array<String> };

Values to be used in the legend filter.

Config Parameters for value

Parameter NameDescription
enable

Array <String>

The legend filters to be enabled in the view.

disable

Array <String>

The legend filters to be disabled in the view.

Sample Response

Zoho Analytics Report
 

Sample Code:

Copied<html>
<head>
    <meta charset="utf-8">
    <title>Zoho Analytics Report</title>
    <script src="https://downloads.zohocdn.com/zanalyticslib/jsapi/v1/zanalytics.min.js"></script>
    <style>
        button {
            padding: 8px 15px;
            margin: 5px;
            background: #f0f0f0;
            border: 1px solid #ccc;
            border-radius: 4px;
            cursor: pointer;
        }
        button.active {
            background: #0053ff;
            color: white;
        }
        #reportView {
            width: 100%;
            height: 500px;
            border: 1px solid #ddd;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div>
        <button id="grocery" class="active" onclick="toggle('Grocery')">Grocery</button>
        <button id="stationery" class="active" onclick="toggle('Stationery')">Stationery</button>
        <button id="furniture" class="active" onclick="toggle('Furniture')">Furniture</button>
    </div>
    <div id="reportView"></div>

    <script>
        // Initialize report
        const vizObj = new ZAnalyticsLib(
            document.getElementById("reportView"),
            "https://analytics.zoho.com/open-view/2588560000000102021/a492ca0193d7b3962f31d3326069d91a",
            { width: '100%', height: '100%' }
        );
        vizObj.createViz();

        // Legend filter logic
        const activeCategories = ['Grocery', 'Stationery', 'Furniture'];
        
        function toggle(category) {
            const button = document.getElementById(category.toLowerCase());
            
            if (activeCategories.includes(category)) {
                // Remove category
                activeCategories.splice(activeCategories.indexOf(category), 1);
                button.classList.remove('active');
            } else {
                // Add category
                activeCategories.push(category);
                button.classList.add('active');
            }
            
            applyFilter();
        }
        
        function applyFilter() {
            vizObj.filterByLegend({
                enable: [...activeCategories],
                disable: ['Grocery', 'Stationery', 'Furniture'].filter(x => !activeCategories.includes(x))
            });
        }
    </script>
</body>
</html>