Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Meet the Experts: Visualize Your Time-Stamped Data Using the React-Based Giraffe Library

Giraffe is the open source React-based visualization library that powers data visualizations in the InfluxDB 2.0 UI. Giraffe can be used to display your data within your own app and is Fluxlang-supported! It uses algorithms to handle visualizing high volumes of time series data that InfluxDB can ingest and query.

Kristina Robinson, the engineering manager for the Giraffe team at InfluxData, will dive into:

The basics of using the Giraffe library including how to query your data with Flux
Specific Giraffe visualization types for dashboards (e.g. single number, table and graph)
How to incorporate visualizations in your own custom apps

  • Be the first to comment

  • Be the first to like this

Meet the Experts: Visualize Your Time-Stamped Data Using the React-Based Giraffe Library

  1. 1. A React-Based Library Kristina Robinson Software Engineering Manager, InfluxData January 2021 Visualize Your Time-Stamped Data Using Giraffe
  2. 2. © 2021 InfluxData. All rights reserved. 2 • •
  3. 3. © 2021 InfluxData. All rights reserved. 3 • • • • • • • ▪ ▪ ▪
  4. 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. 5. © 2021 InfluxData. All rights reserved. 5
  6. 6. © 2021 InfluxData. All rights reserved. 6
  7. 7. © 2021 InfluxData. All rights reserved. 7
  8. 8. © 2021 InfluxData. All rights reserved. 8
  9. 9. © 2021 InfluxData. All rights reserved. 9
  10. 10. © 2021 InfluxData. All rights reserved. 10
  11. 11. © 2021 InfluxData. All rights reserved. 11
  12. 12. © 2021 InfluxData. All rights reserved. 12
  13. 13. © 2021 InfluxData. All rights reserved. 13
  14. 14. © 2021 InfluxData. All rights reserved. 14 • • • • • • • •
  15. 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. 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. 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. 18. © 2021 InfluxData. All rights reserved. 18 • • •
  19. 19. © 2021 InfluxData. All rights reserved. 19 • Settings Templates • Step 2 • Lookup • • • Data Dashboards Speedtest Dashboard •
  20. 20. © 2021 InfluxData. All rights reserved. 20
  21. 21. Q & A
  22. 22. © 2021 InfluxData. All rights reserved. 22 • • • • •
  23. 23. © 2021 InfluxData. All rights reserved. 23 • • • • • •
  24. 24. © 2021 InfluxData. All rights reserved. 24 • • • •
  25. 25. Thank You

×