This document discusses Giraffe, a React-based library for visualizing time-series data from InfluxData. It provides examples of using Giraffe to visualize data exported from Flux queries in InfluxData by converting the data to layers in Giraffe configurations. The document also contains code examples for connecting to InfluxData and executing Flux queries to export data to visualize in Giraffe.

1. A React-Based Library
Kristina Robinson
Software Engineering Manager, InfluxData
January 2021
Visualize Your
Time-Stamped Data
Using Giraffe

2. © 2021 InfluxData. All rights reserved.
2
•
•

3. © 2021 InfluxData. All rights reserved.
3
•
•
•
•
•
•
•
▪
▪
▪

4. © 2021 InfluxData. All rights reserved.
4
•
const fluxResultCSV =
`#datatype,string,long,dateTime:RFC3339,dateTime:RFC3339,dateTi
me:RFC3339,double,string,string,string,string
#group,false,false,true,true,false,false,true,true,true,true
#default,_result,,,,,,,,,
,result,table,_start,_stop,_time,_value,_field,_measurement,exa
mple,location
,,0,2020-03-25T20:58:15.731129Z,2020-04-24T20:58:15.731129Z,202
0-04-03T18:31:33.95Z,29.9,value,temperature,index.html,browser
,,0,2020-03-25T20:58:15.731129Z,2020-04-24T20:58:15.731129Z,202
0-04-03T18:55:23.863Z,28.7,value,temperature,index.html,browser
,,0,2020-03-25T20:58:15.731129Z,2020-04-24T20:58:15.731129Z,202
0-04-03T19:50:52.357Z,15,value,temperature,index.html,browser

5. © 2021 InfluxData. All rights reserved.
5

6. © 2021 InfluxData. All rights reserved.
6

7. © 2021 InfluxData. All rights reserved.
7

8. © 2021 InfluxData. All rights reserved.
8

9. © 2021 InfluxData. All rights reserved.
9

10. © 2021 InfluxData. All rights reserved.
10

11. © 2021 InfluxData. All rights reserved.
11

12. © 2021 InfluxData. All rights reserved.
12

13. © 2021 InfluxData. All rights reserved.
13

14. © 2021 InfluxData. All rights reserved.
14
•
•
•
•
•
•
•
•

15. © 2021 InfluxData. All rights reserved.
15
const body = { query: query,
dialect: { header: true,
delimiter: ',',
quoteChar: '"',
commentPrefix: "#",
annotations: ["datatype","group","default"]},
type: 'flux'}
const headers = new Headers()
headers.append('Authorization', `Token ${Constants.Influx.TOKEN}`)
headers.append('Content-Type', 'application/json')
var request = new
Request(`${Constants.Influx.URL}/api/v2/query?org=${Constants.Influx.ORG}`,
method: 'POST',
headers: headers,
body: JSON.stringify(body)})

16. © 2021 InfluxData. All rights reserved.
16
const { InfluxDB, flux } = require('@influxdata/influxdb-client')
// vars to connect to bucket in influxdb
const baseURL = process.env.INFLUX_URL // url of your cloud instance
const influxToken = process.env.INFLUX_TOKEN; // all access token from the UI
const orgID = process.env.ORG_ID // export your org id;
const bucket = process.env.BUCKET_NAME //export the name of your bucket
// connect to influxdb
const influxDB = new InfluxDB({ url: baseURL, token: influxToken })
const queryApi = influxDB.getQueryApi(orgID)
let clientQuery = flux``+query
queryApi.queryLines(clientQuery, {
next(line) { csv = `${csv}${line}n`; },
complete() { res.end(JSON.stringify({ csv: csv })) }, })

17. © 2021 InfluxData. All rights reserved.
17
•
•
// fluxResultsCSV is annotated CSV
const dataFromFlux = fromFlux(fluxResultCSV)
const config = {
table: dataFromFlux.table,
layers: [lineLayer],
}
OR
const config = {
fluxResponse,
layers: [lineLayer],
}
•
const lineLayer = {
type: "line",
x: "_time",
y: "_value",
}

18. © 2021 InfluxData. All rights reserved.
18
•
•
•

19. © 2021 InfluxData. All rights reserved.
19
• Settings Templates
• Step 2
• Lookup
•
•
• Data Dashboards Speedtest Dashboard
•

20. © 2021 InfluxData. All rights reserved.
20

21. Q & A

22. © 2021 InfluxData. All rights reserved.
22
•
•
•
•
•

23. © 2021 InfluxData. All rights reserved.
23
•
•
•
•
•
•

24. © 2021 InfluxData. All rights reserved.
24
•
•
•
•

25. Thank You