https://github.com/deftio/plotly-streaming-charts-demo
Simple streaming scrolling charts in javascript using plotlyjs
https://github.com/deftio/plotly-streaming-charts-demo
Last synced: 4 months ago
JSON representation
Simple streaming scrolling charts in javascript using plotlyjs
- Host: GitHub
- URL: https://github.com/deftio/plotly-streaming-charts-demo
- Owner: deftio
- License: bsd-2-clause
- Created: 2022-08-14T20:21:48.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2022-08-14T20:51:20.000Z (almost 4 years ago)
- Last Synced: 2025-06-12T04:43:03.820Z (12 months ago)
- Language: HTML
- Homepage:
- Size: 1.24 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# Streaming / Scrolling Charts Demo
Quick repo for wrapping plotly.js into simple streaming and scrolling charts.
See live demo here [streaming charts](https://deftio.github.io/plotly-streaming-charts-demo/)
## Usage
See basic.html for a simple example or index.html for 2 charts running with different update rates inside some boxes (shown above)
BSD-2 license (see LICENSE.TXT)
If python3 is installed one can run a local webserver via:
```bash
python3 -m http.server 8000
```
Then open a browser window at localhost:8000
Otherwise this should also work as a file:// url
### Example code snippet
```html
Real-Time Chart with Plotly.js
// sample simulated data
function getData() {
return Math.random()-0.5;
}
// make a new chart
newPlotlyLineChart(
"chart", // dom id of chart
2, // number of traces (can be 1 to any)
{yaxis:{range:[-1,1]}} // optional layout (see plotlyjs docs)
);
// set interval updates the chart by calling getData() every
setInterval(
function(){
updatePlotlyLineChart("chart",[getData(),getData()]); // update chart
},
25 // every 25 milliseconds this is called
);
```