https://github.com/arction/lcjs-react-express-influxdb

Example of LightningChart JS + React + Express + InfluxDB
https://github.com/arction/lcjs-react-express-influxdb

chart data-visualization express fullstack graph influxdb javascript lcjs lightningchart medical monitoring react reactjs real-time

Last synced: 1 day ago
JSON representation

Example of LightningChart JS + React + Express + InfluxDB

• Host: GitHub
• URL: https://github.com/arction/lcjs-react-express-influxdb
• Owner: Arction
• Created: 2024-02-21T14:30:49.000Z (9 months ago)
• Default Branch: master
• Last Pushed: 2024-02-22T09:32:31.000Z (9 months ago)
• Last Synced: 2024-02-22T11:41:57.043Z (9 months ago)
• Topics: chart, data-visualization, express, fullstack, graph, influxdb, javascript, lcjs, lightningchart, medical, monitoring, react, reactjs, real-time
• Language: JavaScript
• Homepage: https://lightningchart.com/js-charts/
• Size: 183 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## Content

This is a minimal showcase of functional combination of:

- LightningChart JS (data visualization library on frontend)

- React (frontend development framework, created with `create-react-app`)

- Express (Node.JS backend framework)

- InfluxDB (time series database)

1. In the application, the server continuously spawns new data points and pushes them to the database.

2. When a client is opened, the last 5 minutes of data are requested through a GET endpoint on the backend.

3. Afterwards, the client establishes a websocket connection to the server to listen to new data points as they arrive.

4. When new data points are spawned on server, it also broadcasts them to all active websocket clients.

Result = real-time visualization of 1 data source with 1000 Hz frequency.

https://github.com/Arction/lcjs-react-express-influxdb/assets/55391673/b3c27da6-8562-46f9-9f78-9e69898a0a02

## Setup

- Following InfluxDB guide on setting up a local InfluxDB server

- https://docs.influxdata.com/influxdb/v2/get-started/setup/

- Extract InfluxDB executable to machine, run it with powershell

- Open InfluxDB UI at http://localhost:8086/

- Finish the database setup to get organization name, initial bucket name and API key

- Here we'll just go with `test-organization` and `test-bucket`

- Copy the "operator API token" directly to the repository's `.env` file under as `INFLUXDB_API_TOKEN`

- Place your LightningChart JS trial or developer license to `frontend/src/App.js`

- Install project dependencies with `npm i`

- Run the project with `npm start`

  - This will first build the React frontend into `public` folder

  - and afterwards launch Express server that hosts everything needed (frontend, server endpoints and websocket server)

## Extra mentions

- Opening application rapidly may not show recent data points stored from database. This is some strange InfluxDB behavior, as the query is done totally right. There seems to be some delay between new data points being written and them being returned by queries. Write batching?