Data Sources

Test all data source loading methods: CSV URL, Excel URL, JavaScript array, and local file upload.

💻 Implementation Code

<!DOCTYPE html>
<html>
<head>
  <title>Data Sources Demo</title>
  <script src="https://cdn.webpivottable.com/wpt/latest/wpt.js"></script>
</head>
<body>
  <h1>Data Sources Demo</h1>

  <button onclick="loadFromCsv()">Load CSV</button>
  <button onclick="loadFromExcel()">Load Excel</button>
  <button onclick="loadFromArray()">Load Array</button>
  <input type="file" id="fileInput" accept=".csv,.xlsx" />

  <web-pivot-table id="wpt" style="width:100%;height:600px"></web-pivot-table>

  <script>
    const wpt = document.getElementById('wpt')

    function loadFromCsv() {
      wpt.setWptFromCsvUrl('https://cdn.webpivottable.com/samples/sales.csv')
    }

    function loadFromExcel() {
      wpt.setWptFromExcelUrl('https://cdn.webpivottable.com/samples/sales.xlsx')
    }

    function loadFromArray() {
      const data = [
        ['Region', 'Quarter', 'Product', 'Revenue', 'Units'],
        ['North', 'Q1', 'Widget A', 12500, 125],
        ['South', 'Q1', 'Widget B', 8900, 89],
        ['East', 'Q2', 'Widget A', 15600, 156],
        ['West', 'Q2', 'Widget C', 11200, 112]
      ]
      wpt.setWptFromDataArray(data)
    }

    document.getElementById('fileInput').addEventListener('change', (e) => {
      const file = e.target.files[0]
      if (file) {
        wpt.setWptFromLocalFile(file)
      }
    })
  </script>
</body>
</html>

🎯 Live Demo

Load from URL

Load from JavaScript Array

Load from Local File

💻 Implementation Code