Applying User Filter

To apply user filter to the specified view.

Function Call

ObjName.applyUserFilter('Filter Name', Values)

Parameters

Parameter Name

Description

Filter Name

String

Enter the name of the user filter.

Values

String / Number

Enter the values to be used in the user filter.

Allowed values vary based on the user filter type:

Single Select User Filter - String
Multi Select User Filter - Array<String>
Date User Filter - { from: DateString, to: DateString }
Slider User Filter - { from: Number, to: Number }

Sample Response

ZAnalytics JS API

Date: Region:

Cost:

Sample Code:

Copied<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ZAnalytics JS API</title>
    <link rel="icon" type="image/x-icon" href="https://analytics.zoho.com/favicon.ico">
    <script src="https://downloads.zohocdn.com/zanalyticslib/jsapi/v1/zanalytics.min.js"></script>
    <style>
        input, select, button {
            background: #fff;
            border-radius: 3px;
            border: 1px solid #b8b8b8;
            height: 30px;
            margin: 5px;
        }
        input[type="date"], select {
            width: 150px;
            padding-left: 10px;
        }
        input[type="range"] {
            width: 150px;
        }
        button {
            cursor: pointer;
        }
    </style>
</head>
<body>
<div style="background-color:#fbfbfb;border:1px solid #d4d4d4;padding:20px;">
    <div style="margin-bottom:15px;">
        <label>Date: </label><input type="date" id="dateFilter">
        <label>Region: </label>
        <select id="regionFilter">
            <option value='None'>Select</option>
            <option value='Central'>Central</option>
            <option value="East">East</option>
            <option value="West">West</option>
        </select>
        </br><label>Cost: </label><input type="range" id="costFilter" min="119000" max="300000" value="125000">
    </div>
    <div id="reportView"></div>
</div>

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

    document.getElementById("dateFilter").onchange = function() {
        if (!this.value) {
            vizObj.applyUserFilter('Date', 'RESET');
        } else {
            const date = new Date(this.value);
            const day = String(date.getDate()).padStart(2, '0');
            const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
            const formattedDate = `${day} ${monthNames[date.getMonth()]} ${date.getFullYear()} 00:00:00`;
            vizObj.applyUserFilter('Date', { to: formattedDate });
        }
    };

    document.getElementById("regionFilter").onchange = function() {
        vizObj.applyUserFilter('Region', this.value === 'None' ? 'RESET' : this.value);
    };

    document.getElementById("costFilter").onchange = function() {
        vizObj.applyUserFilter('Cost', { from: this.min, to: this.value });
    };
</script>
</body>
</html>