Tab Switching

You can interact with the embedded dashboard by navigating between different tabs. Zoho Analytics provides two ways to switch tabs:

1. Using Tab Name

Function: 0bjName.switchDashboardTabByName(tabName)

This method allows you to switch tabs by specifying the exact tab name as it appears in Zoho Analytics.

2. Using Tab Index

Function: ObjName.switchDashboardTabByIndex(tabIndex)

Allows you to switch across the tabs by mapping to the tab index used in Zoho Analytics. tab index reflects the order in which the tabs are arranged in Zoho Analytics.

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.0.1/zanalytics.min.js"></script>
    <style>
        .tab-container {
            font-family: Arial, sans-serif;
            width: 100%;
            max-width: 600px;
            margin: 0;
        }
        .tabs {
            display: flex;
        }
        .tab {
            flex: 1;
            text-align: center;
            cursor: pointer;
            background-color: #f9f9f9;
            border: none;
            outline: none;
            width: 300px;
            height: 50px;
            line-height: 1.5;
            transition: background-color 0.3s;
        }
        .tab:hover {
            background-color: #e0e0e0;
        }
        .tab.active {
            background-color: #fff;
            border-bottom: 2px solid #007BFF;
            font-weight: bold;
        }
        .tab-content {
            padding: 15px;
            border: 1px solid #ccc;
            border-top: none;
        }
        .content {
            display: none;
        }
        .content.active {
            display: block;
        }
    </style>
</head>
<body>
<div style="background-color:#fbfbfb;border:1px solid #d4d4d4;padding:20px;">
    <div style="display: flex; gap: 20px; align-items: flex-start;justify-content: space-between;">
      <div class="option tab-container" name='dashboardOptions' style="flex: 1;">
          <strong class='titleLabel'>Switch Dashboard Tabs by Name</strong><br>
          <div class="tabs">
            <button class="tab active" data-tab="tab1" onclick="onTabClick('tab1')">Deals</button>
            <button class="tab" data-tab="tab2" onclick="onTabClick('tab2')">Leads</button>
            <button class="tab" data-tab="tab3" onclick="onTabClick('tab3')">Salesperson Performance</button>
            <button class="tab" data-tab="tab4" onclick="onTabClick('tab4')">Products</button>
          </div>
      </div>
      <div class="option tab-container" name='dashboardOptionsByIndex' style="flex: 1;">
          <strong class='titleLabel'>Switch Dashboard Tabs by Index</strong><br>
          <div class="tabs">
            <button class="tab active" data-tab-index="IdxTab1" onclick="onTabClickByIndex('IdxTab1')">Index 0</button>
            <button class="tab" data-tab-index="IdxTab2" onclick="onTabClickByIndex('IdxTab2')">Index 1</button>
            <button class="tab" data-tab-index="IdxTab3" onclick="onTabClickByIndex('IdxTab3')">Index 2</button>
            <button class="tab" data-tab-index="IdxTab4" onclick="onTabClickByIndex('IdxTab4')">Index 3</button>
          </div>
      </div>
    </div>
    <div id="reportView"></div>
</div>

<script>
    const reportDiv = document.getElementById("reportView");
    const reportUrl = "https://analytics.zoho.in/open-view/476765000000229655";
    const reportOptions = {
        width: '100%',
        height: window.innerHeight - 130,
        defaultConfig: {
            hideDashboardTab: true
        }
    };
    const vizObj = new ZAnalyticsLib(reportDiv, reportUrl, reportOptions);
    vizObj.createViz();

    function onTabClick(tabId) {
        const tabIsVsNameMap = {
            'tab1': "Deals",
            'tab2': "Leads",
            'tab3': "Salesperson Performance",
            'tab4': "Products"
        }
        const tabName = tabIsVsNameMap[tabId];
        if(!tabName) {
            return;
        }
        const tabs = document.querySelectorAll('.tab[data-tab]');
        tabs.forEach(tab => tab.classList.remove('active'));
        const activeTab = document.querySelector(`.tab[data-tab="${tabId}"]`);
        activeTab.classList.add('active');
        vizObj.switchDashboardTabByName(tabName);
    }

    function onTabClickByIndex(tabId) {
            const tabIdVsNameMap = {
                'IdxTab1': 0,
                'IdxTab2': 1,
                'IdxTab3': 2,
                'IdxTab4': 3
            }
            const tabIndex = tabIdVsNameMap[tabId];
            const tabs = document.querySelectorAll('.tab[data-tab-index]');
            tabs.forEach(tab => tab.classList.remove('active'));
            const activeTab = document.querySelector(`.tab[data-tab-index="${tabId}"]`);
            activeTab.classList.add('active');
            vizObj.switchDashboardTabByIndex(tabIndex);
        }
</script>
</body>
</html>

Sample Reponse

ZAnalytics JS API