From c38dd65a98df4734acd67d65c9afe362d961c117 Mon Sep 17 00:00:00 2001 From: Emanuele Fumagalli Date: Sun, 10 Mar 2024 09:54:06 +0000 Subject: [PATCH] Add files for experiment with timeline chart --- test.html | 106 ++++++++++++++++++++++++++++++++++++++++++ timeline.md | 1 + website/src/Chart.jsx | 96 ++++++++++++++++++++++++++++++++++++++ 3 files changed, 203 insertions(+) create mode 100644 test.html create mode 100644 timeline.md create mode 100644 website/src/Chart.jsx diff --git a/test.html b/test.html new file mode 100644 index 0000000..1b2afbe --- /dev/null +++ b/test.html @@ -0,0 +1,106 @@ + + + + + + FusionChart - Temperature Readings + + + + + +

Temperature Readings of an Italian Town

+
+ + + + diff --git a/timeline.md b/timeline.md new file mode 100644 index 0000000..0ea2b3a --- /dev/null +++ b/timeline.md @@ -0,0 +1 @@ +https://www.fusioncharts.com/fusiontime/examples/representing-predictive-data?framework=javascript \ No newline at end of file diff --git a/website/src/Chart.jsx b/website/src/Chart.jsx new file mode 100644 index 0000000..94f80cf --- /dev/null +++ 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 ( +
+

Temperature Readings of an Italian Town

+ {ds && ds.dataSource.data && } +
+ ); +}; + +export default Chart;