The following of a listing of sample React/Js projects that render different types of InfluxDB Plots (visualizations) using a variety of methods, with the Giraffe library.
The Influx Connection Type specifies whether a direct REST API call is used (direct) or whether the helper JavaScript library InfluxDBClient (@influxdata/influxdb-client-js) is used.
The Project Structure describes whether a client/server approach was used (Node/React), or whether a single React application (React) was written.
*Map Plot feature is not yet released.
| Project Name | Plot Type | Influx Connection Type | Project Structure |
|---|---|---|---|
| https://github.com/subirjolly/influxdata-giraffe-demo | Gauge, Line, Scatter | Direct API | React |
| https://github.com/genehynson/giraffe-playground | Band | InfluxDB Client | Node/React |
| https://github.com/ShmuelLotman/giraffe_sample | Histogram | Direct API | Node/React |
| https://github.com/hoorayimhelping/giraffeboi | Line, Map* | Direct API | Node/React |
| https://github.com/jrenee42/giraffeLineSample | Line | Direct API | Node/React |
| https://github.com/ChitlangeSahas/influxdata-giraffe-demo | Table | Direct API | React |
| https://github.com/influxdata/influxdb-client-js/blob/master/examples/giraffe.html | Line | InfluxDB Client | HTML |
| https://github.com/genehynson/telegraf-giraffe-iss | Map | InfluxDB Client | Node/React |
| https://github.com/blegesse-git/Mosaic-graph | Mosaic | Direct CSV | Node/React |
| https://github.com/david-rusnak/giraffe-sample-david | Line, Heatmap | Direct API | Node/React |