> ## Documentation Index
> Fetch the complete documentation index at: https://docs.activeviam.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Data visualization

<div className="min-h-screen bg-gradient-to-b from-gray-100 via-white to-white dark:from-zinc-800/40 dark:via-zinc-950 dark:to-zinc-950">
  <div className="px-4 pt-6 pb-8 lg:pt-16 lg:pb-12 max-w-3xl mx-auto text-center">
    <h1 className="text-4xl font-semibold tracking-tight bg-gradient-to-r from-gray-900 to-gray-600 dark:from-zinc-50 dark:to-zinc-400 bg-clip-text text-transparent">
      Data visualization
    </h1>

    <p className="mt-4 text-xl text-gray-600 dark:text-zinc-400">All the documentation you need to visualize your Atoti data.</p>
  </div>

  <div className="max-w-4xl mx-auto px-5">
    <div className="px-4 pb-10">
      <h2 className="text-3xl font-medium text-gray-900 dark:text-zinc-50 tracking-tight mb-6 text-center">Atoti UI</h2>

      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <a href="./atoti-ui/latest/introduction-to-atoti-ui" className="flex items-start gap-4 rounded-xl border border-gray-200 dark:border-zinc-700 hover:border-[#291a40] dark:hover:border-[#00ade6] hover:shadow-sm transition-all bg-white dark:bg-zinc-900 p-5 no-underline">
          <img src="https://mintcdn.com/activeviam/lTzImDUNm0cHRUws/images/icons/atoti-ui-same-as-javascript-api-1.svg?fit=max&auto=format&n=lTzImDUNm0cHRUws&q=85&s=dbde2cdb4d4d7ba8397d31a110ff9090" className="w-9 h-9 mt-0.5 shrink-0 dark:invert" width="225" height="225" data-path="images/icons/atoti-ui-same-as-javascript-api-1.svg" />

          <div>
            <div className="text-base font-semibold text-[#00ade6] dark:text-zinc-100 mb-2">Atoti UI user guide</div>
            <p className="text-base text-gray-500 dark:text-zinc-400 m-0 leading-relaxed">Use <b>Atoti UI</b> to <b>explore data and analytics</b>.</p>
          </div>
        </a>

        <a href="./atoti-ui/latest/developer-guide/install-and-start/set-up" className="flex items-start gap-4 rounded-xl border border-gray-200 dark:border-zinc-700 hover:border-[#291a40] dark:hover:border-[#00ade6] hover:shadow-sm transition-all bg-white dark:bg-zinc-900 p-5 no-underline">
          <img src="https://mintcdn.com/activeviam/lTzImDUNm0cHRUws/images/icons/atoti-ui-same-as-javascript-api-2.svg?fit=max&auto=format&n=lTzImDUNm0cHRUws&q=85&s=9d520d84089d4e6845c02cdae38f3a92" className="w-9 h-9 mt-0.5 shrink-0 dark:invert" width="225" height="225" data-path="images/icons/atoti-ui-same-as-javascript-api-2.svg" />

          <div>
            <div className="text-base font-semibold text-[#00ade6] dark:text-zinc-100 mb-2">Atoti JavaScript SDK</div>
            <p className="text-base text-gray-500 dark:text-zinc-400 m-0 leading-relaxed"><b>Customize</b> and extend Atoti UI <b>using JavaScript</b>.</p>
          </div>
        </a>
      </div>
    </div>

    <div className="mt-4 px-4 pt-6 pb-16">
      <h2 className="text-3xl font-medium text-gray-900 dark:text-zinc-50 tracking-tight mb-6 text-center">Third-party visualization tools</h2>

      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <a href="/data-visualization/excel-addin/overview" className="flex items-start gap-4 rounded-xl border border-gray-200 dark:border-zinc-700 hover:border-[#291a40] dark:hover:border-[#00ade6] hover:shadow-sm transition-all bg-white dark:bg-zinc-900 p-5 no-underline">
          <img src="https://mintcdn.com/activeviam/duaQk9wU3mgO5MD4/images/icons/situation-2.svg?fit=max&auto=format&n=duaQk9wU3mgO5MD4&q=85&s=15999aedecfc281261942c38f332aae3" className="w-9 h-9 mt-0.5 shrink-0 dark:invert" width="225" height="225" data-path="images/icons/situation-2.svg" />

          <div>
            <div className="text-base font-semibold text-[#00ade6] dark:text-zinc-100 mb-2">Atoti Excel Add-in</div>
            <p className="text-base text-gray-500 dark:text-zinc-400 m-0 leading-relaxed">Bring <b>Atoti capabilities into Excel</b>: drillthrough, real-time refresh, filter navigation, and more.</p>
          </div>
        </a>

        <a href="/engine/java-sdk/latest/user_guide/querying/front_ends/user_guide_querying_front_ends_overview" className="flex items-start gap-4 rounded-xl border border-gray-200 dark:border-zinc-700 hover:border-[#291a40] dark:hover:border-[#00ade6] hover:shadow-sm transition-all bg-white dark:bg-zinc-900 p-5 no-underline">
          <img src="https://mintcdn.com/activeviam/duaQk9wU3mgO5MD4/images/icons/situation-1.svg?fit=max&auto=format&n=duaQk9wU3mgO5MD4&q=85&s=82efee9408143c9f87a8b8f2c454297f" className="w-9 h-9 mt-0.5 shrink-0 dark:invert" width="225" height="225" data-path="images/icons/situation-1.svg" />

          <div>
            <div className="text-base font-semibold text-[#00ade6] dark:text-zinc-100 mb-2">Third-party visualization tools</div>
            <p className="text-base text-gray-500 dark:text-zinc-400 m-0 leading-relaxed"><b>Connect Atoti to</b> Excel, Power BI, or Tableau to visualize your data in <b>your preferred tool</b>.</p>
          </div>
        </a>
      </div>
    </div>

    <div className="border-t border-gray-200 dark:border-zinc-700 mt-8 py-6 px-4">
      <div className="max-w-4xl mx-auto flex flex-wrap justify-center gap-x-6 gap-y-2 text-xs text-gray-500 dark:text-zinc-400">
        <a href="https://www.activeviam.com" className="no-underline hover:text-gray-800 dark:hover:text-zinc-200 transition-colors">© ActiveViam</a>
        <a href="https://www.activeviam.com/privacy-policy/" className="no-underline hover:text-gray-800 dark:hover:text-zinc-200 transition-colors">Privacy policy</a>
        <a href="https://www.activeviam.com/website-terms-of-use/" className="no-underline hover:text-gray-800 dark:hover:text-zinc-200 transition-colors">Terms of use</a>
        <a href="https://activeviam.com/wp-content/uploads/ActiveViam-_-Anti-modern-slavery-statement-2025.pdf" className="no-underline hover:text-gray-800 dark:hover:text-zinc-200 transition-colors">Anti-modern slavery statement</a>
      </div>
    </div>
  </div>
</div>