Add files for experiment with timeline chart

emanuelef · Mar 10, 2024 · c38dd65 · c38dd65
1 parent 73df436
commit c38dd65
Show file tree

Hide file tree

Showing 3 changed files with 203 additions and 0 deletions.
diff --git a/test.html b/test.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>FusionChart - Temperature Readings</title>
+    <script
+      type="text/javascript"
+      src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"
+    ></script>
+    <script
+      type="text/javascript"
+      src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"
+    ></script>
+    <script
+      type="text/javascript"
+      src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.candy.js"
+    ></script>
+  </head>
+  <body>
+    <h1>Temperature Readings of an Italian Town</h1>
+    <div id="chart-container"></div>
+
+    <script>
+      const WEEKLY_BINNING = {
+        year: [],
+        month: [],
+        day: [],
+        week: [1],
+        hour: [],
+        minute: [],
+        second: [],
+      };
+
+      function calculateMedian(data) {
+        data.sort((a, b) => a - b);
+        const mid = Math.floor(data.length / 2);
+        if (data.length % 2 === 0) {
+          // Even number of elements, return average of middle two
+          return (data[mid - 1] + data[mid]) / 2;
+        } else {
+          // Odd number of elements, return middle element
+          return data[mid];
+        }
+      }
+
+      Promise.all([
+        loadData(
+          "https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/adding-a-reference-line-data.json"
+        ),
+        loadData(
+          "https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/adding-a-reference-line-schema.json"
+        ),
+      ]).then(function (res) {
+        const data = res[0];
+        const schema = res[1];
+
+        const dataStore = new FusionCharts.DataStore();
+        const dataSource = {
+          chart: { animation: "0", theme: "candy" },
+          caption: {
+            text: "Temperature readings of an Italian Town",
+          },
+          yAxis: [
+            {
+              plot: {
+                value: "Temperature",
+                type: "column",
+              },
+              title: "Temperature",
+              aggregation: "max",
+              format: {
+                suffix: "°C",
+              },
+              referenceline: [
+                {
+                  label: "Controlled Temperature",
+                  value: 10,
+                },
+              ],
+            },
+          ],
+          xAxis: {
+            plot: "Time",
+            binning: WEEKLY_BINNING,
+          },
+        };
+
+        dataSource.data = dataStore.createDataTable(data, schema);
+
+        new FusionCharts({
+          type: "timeseries",
+          renderAt: "chart-container",
+          width: "100%",
+          height: "700",
+          dataSource: dataSource,
+        }).render();
+      });
+
+      // Replace this with your actual loadData function
+      function loadData(url) {
+        return fetch(url).then((response) => response.json()); // Assuming JSON data
+      }
+    </script>
+  </body>
+</html>
diff --git a/timeline.md b/timeline.md
@@ -0,0 +1 @@
+https://www.fusioncharts.com/fusiontime/examples/representing-predictive-data?framework=javascript
diff --git a/website/src/Chart.jsx b/website/src/Chart.jsx
@@ -0,0 +1,96 @@
+import React, { useState, useEffect } from "react";
+import FusionCharts from "fusioncharts";
+import charts from "fusioncharts/fusioncharts.charts";
+import ReactFC from "react-fusioncharts";
+import CandyTheme from "fusioncharts/themes/fusioncharts.theme.candy.js";
+
+charts(CandyTheme);
+const WEEKLY_BINNING = {
+  year: [],
+  month: [],
+  day: [],
+  week: [1],
+  hour: [],
+  minute: [],
+  second: [],
+};
+
+function loadData(url) {
+  return fetch(url).then((response) => response.json());
+}
+
+const Chart = () => {
+  const [ds, setds] = useState(null);
+
+  const dataSource = {
+    chart: { animation: "0" },
+    caption: {
+      text: "Temperature readings of an Italian Town",
+    },
+    yAxis: [
+      {
+        plot: {
+          value: "Temperature",
+          type: "column",
+        },
+        title: "Temperature",
+        aggregation: "max",
+        format: {
+          suffix: "°C",
+        },
+        referenceline: [
+          {
+            label: "Controlled Temperature",
+            value: 10,
+          },
+        ],
+      },
+    ],
+    xAxis: {
+      plot: "Time",
+      binning: WEEKLY_BINNING,
+    },
+  };
+
+  useEffect(() => {
+    Promise.all([
+      loadData(
+        "https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/adding-a-reference-line-data.json"
+      ),
+      loadData(
+        "https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/adding-a-reference-line-schema.json"
+      ),
+    ]).then((res) => {
+      console.log(res[1]);
+
+      const fusionTable = new FusionCharts.DataStore().createDataTable(
+        res[0],
+        res[1]
+      );
+      dataSource.data = fusionTable;
+
+      dataSource.yAxis[0].referenceline = [
+        {
+          label: "Ref Temperature",
+          value: 22,
+        },
+      ];
+
+      setds({
+        type: "timeseries",
+        width: "100%",
+        height: "700",
+        dataSource,
+      });
+    });
+  }, []);
+
+  return (
+    <div>
+      <h1>Temperature Readings of an Italian Town</h1>
+      {ds && ds.dataSource.data && <ReactFC {...ds} />}
+    </div>
+  );
+};
+
+export default Chart;