fix #4809 heatmap: added example

apexcharts · Nov 29, 2024 · ae9b24c · ae9b24c
1 parent 6dcaadb
commit ae9b24c
Showing 1 changed file with 115 additions and 0 deletions.
diff --git a/samples/vanilla-js/heatmap/inconsistent-timeseries.html b/samples/vanilla-js/heatmap/inconsistent-timeseries.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>HeatMap with inconsistent timeseries</title>
+
+    <link href="../../assets/styles.css" rel="stylesheet" />
+
+    <style>
+        #chart {
+          max-width: 650px;
+          margin: 35px auto;
+        }
+    </style>
+
+    <script>
+      window.Promise ||
+        document.write(
+          '<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"><\/script>'
+        )
+      window.Promise ||
+        document.write(
+          '<script src="https://cdn.jsdelivr.net/npm/[email protected]/classList.min.js"><\/script>'
+        )
+      window.Promise ||
+        document.write(
+          '<script src="https://cdn.jsdelivr.net/npm/findindex_polyfill_mdn"><\/script>'
+        )
+    </script>
+
+    <script src="../../../dist/apexcharts.js"></script>
+  </head>
+
+  <body>
+    <div id="chart"></div>
+
+    <script>
+      const end = new Date("2024-11-29T10:00:00.000Z").getTime();
+      const start = end - 12 * 60 * 60 * 1000;
+
+      const timeSeries = () => {
+        let series = [];
+        for (let i = start; i < end; i += 30 * 60 * 1000) {
+          series.push({
+            x: (new Date(i).getTime()),
+            y: Math.floor(Math.random() * 100).toFixed(0),
+          });
+        }
+        return series;
+      };
+      let data1 = timeSeries()
+      data1.splice(0,10)
+      data1.splice(3,2)
+      const data2 = timeSeries()
+      data2.splice(data2.length - 10,10);
+      const data3 = timeSeries()
+      let data = [
+        {
+            name: "Series 1",
+            data: data1,
+          },
+        {
+            name: "Series 2",
+            data: data2,
+          },
+        {
+            name: "Series 3",
+            data: data3,
+          },
+      ];
+
+      var options = {
+        chart: {
+          height: 200,
+          width: 630,
+          type: "heatmap"
+        },
+        tooltip: {
+          x: { show: true, format: 'MMM dd HH:mm' },
+        },
+        xaxis: {
+          labels: {
+            datetimeFormatter: {
+              year: 'yyyy',
+              month: 'yyyy MMM',
+              day: 'MMM dd',
+              hour: 'HH:mm',
+            },
+          },
+          type: 'datetime'
+        },
+        plotOptions: {
+          heatmap: {
+        colorScale: {
+          ranges: [
+          {
+            from: 0,
+            to: 100,
+            name: 'orange',
+            color: '#FFB200'
+          }]
+        }
+        }
+        },
+        series: data,
+      };
+
+      var chart = new ApexCharts(document.querySelector("#chart"), options);
+
+      chart.render();
+    </script>
+  </body>
+</html>