Meet the Experts: Visualize Your Time-Stamped Data Using the React-Based Giraffe Library
0 likes357 views
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.
![© 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)})](https://image.slidesharecdn.com/giraffevisualizations-210120180736/85/Meet-the-Experts-Visualize-Your-Time-Stamped-Data-Using-the-React-Based-Giraffe-Library-15-320.jpg)
![© 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",
}](https://image.slidesharecdn.com/giraffevisualizations-210120180736/85/Meet-the-Experts-Visualize-Your-Time-Stamped-Data-Using-the-React-Based-Giraffe-Library-17-320.jpg)
Meet the Experts: Visualize Your Time-Stamped Data Using the React-Based Giraffe Library
- 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