<!DOCTYPE html>

Effectively Visualize Data: Add Grids and Charts in JavaScript Pivot Field List

<br> body {<br> font-family: Arial, sans-serif;<br> }</p> <div class="highlight"><pre class="highlight plaintext"><code>h1, h2, h3 { margin-top: 2em; } code { background-color: #eee; padding: 2px 5px; font-family: monospace; } img { max-width: 100%; height: auto; } pre { background-color: #eee; padding: 10px; overflow-x: auto; } </code></pre></div> <p>

Effectively Visualize Data: Add Grids and Charts in JavaScript Pivot Field List

Data visualization is an essential aspect of data analysis, enabling us to glean insights, discover patterns, and communicate findings effectively. Pivot tables, with their ability to summarize and aggregate data in various ways, are powerful tools for data exploration. However, their tabular format can sometimes be cumbersome for understanding complex relationships. Adding grids and charts directly to a JavaScript Pivot Field List enhances data visualization, making it easier to interpret and share insights.

Understanding Pivot Tables and Field Lists

A Pivot Table, in essence, is a dynamic table that lets you summarize and analyze data by grouping it into categories. Think of it as a powerful spreadsheet function that allows you to manipulate your data in various ways.

A Pivot Field List, on the other hand, provides a graphical interface for manipulating the data in your Pivot Table. It lists all the fields (columns) in your dataset, allowing you to drag and drop them into different areas to create your desired view.

Let's visualize this with an example:

In this example, the Pivot Field List allows us to choose which fields to analyze (e.g., 'Product', 'Region', 'Sales'), and how to group them (e.g., by 'Region', 'Month', etc.).

Adding Grids and Charts

While Pivot Tables offer a structured view of data, visual representations often provide a more intuitive and impactful understanding. JavaScript libraries can seamlessly integrate grids and charts within the Pivot Field List, enhancing data visualization capabilities.

Choosing the Right Library

Several JavaScript libraries are designed for interactive data visualization. The choice depends on your specific requirements and the complexity of your data:

PivotTable.js: A widely used library specifically built for Pivot Table interaction. It offers built-in grid and chart options, making it easy to add visualizations to your Pivot Field List.
D3.js: A powerful and flexible library that enables you to create custom charts and visualizations. While requiring more coding expertise, it offers unparalleled control and customization options.
Chart.js: A user-friendly library focusing on charts like bar charts, line charts, and pie charts. It's a good choice for simple and visually appealing charts.
C3.js: A library based on D3.js, offering a simpler API for creating charts. It's a good option for beginners seeking a more approachable approach to data visualization.

Integrating Charts and Grids with PivotTable.js

PivotTable.js offers a straightforward way to incorporate grids and charts into your Pivot Field List. Here's a step-by-step guide:

Step 1: Include Necessary Libraries

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.jquery.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.fr.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.es.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.de.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.zh-CN.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.ru.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.pt-BR.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.it.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.nl.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.ja.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.ko.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.zh-TW.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.pl.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.tr.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.cs.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.fi.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.sv.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.da.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.no.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.ro.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.id.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.sk.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.hu.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.el.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.he.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.vi.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.hr.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.bg.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.th.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.sl.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.et.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.lt.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.lv.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.uk.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.is.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.hi.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.ar.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.hy.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.bn.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.fa.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.ka.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.kk.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.ky.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.mn.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.ne.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.pa.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.ps.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.si.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.sq.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.sr.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.ta.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.te.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.tg.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.uz.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.be.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.cy.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.ga.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.gl.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.gu.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.ha.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.haw.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.ig.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.km.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.kn.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.ku.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.lb.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.ml.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.mr.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.ms.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.my.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.or.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.sd.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.so.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.sw.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.ty.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.ug.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.ur.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.yi.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.yo.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.zu.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.zh-HK.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.zh-SG.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.af.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.am.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.az.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.bm.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.bo.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.br.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.bs.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.ca.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.ce.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.co.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.cr.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.cv.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.cy.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.da.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.de.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.el.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.en.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.eo.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.es.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.et.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.eu.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.fa.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.fi.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.fo.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.fr.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.fy.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.ga.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.gd.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.gl.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.gu.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.ha.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.haw.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.he.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.hi.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.hr.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.ht.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.hu.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.hy.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.id.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.ig.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.is.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.it.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.ja.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.ka.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.kk.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.km.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.kn.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.ko.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.ku.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.ky.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.lb.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.lt.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.lv.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.mg.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.mk.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.ml.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.mn.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.mr.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.ms.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.mt.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.my.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.ne.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.nl.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.no.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.oc.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.or.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.pa.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.pl.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.ps.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.pt.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.pt-BR.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.ro.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.ru.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.sd.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.si.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.sk.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.sl.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.so.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.sq.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.sr.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.sv.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.sw.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.ta.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.te.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.tg.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.th.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.tr.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.tt.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.ty.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.ug.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.uk.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.ur.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.uz.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.vi.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.vo.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.wa.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.xh.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.yi.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.yo.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.zh-CN.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.zh-HK.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.zh-SG.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.zh-TW.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.zu.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/3.14.0/pivot.all.min.js">
  </script>

Step 2: Load Your Data

var data = [
  { "Product": "Apple", "Region": "North", "Sales": 100 },
  { "Product": "Orange", "Region": "North", "Sales": 150 },
  { "Product": "Apple", "Region": "South", "Sales": 80 },
  { "Product": "Orange", "Region": "South", "Sales": 120 },
  { "Product": "Apple", "Region": "East", "Sales": 130 },
  { "Product": "Orange", "Region": "East", "Sales": 170 },
  // ... more data entries
];

Step 3: Define the Pivot Table Configuration


javascript
$("#output").pivotUI(data, {
  rows: ["Region"],
  cols: ["Product"],
  aggregatorName: "Sum",
  vals: ["Sales"],
  rendererName: "Table",
  // Enable Grid and Chart Renderers
  renderers: [
    "Table", // Default Table Renderer
    "Grid", // Grid Renderer
    "Chart", // Chart Renderer
    "Heatmap" // Heatmap Renderer
  ],
 </body>
</html>