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