Giraffe Visualization Library and InfluxDB

Giraffe is the open source React-based visualization library that’s used to implement InfluxDB’s v2 UI. It employs clever algorithms to handle the challenge of visualizing the incredibly high volume of data that InfluxDB can ingest and query. We’ve just published documentation describing how developers can take advantage of this library and I’ve tried to create a companion tutorial to further illustrate the power of this library. This tutorial demonstrates how you can use Giraffe in conjunction with the JavaScript Client to build a line graph in the browser. The repo that accompanies this tutorial can be found here.

Tutorial assumptions

This project was initialized with Create React App. The emphasis of this tutorial is on how to use Giraffe with the JS client and not how to create a React App. For this reason, I am generating a very simple static site. We will be building a line graph that visualizes RAM usage from our local machine. Our site will look something like this:

This tutorial assumes that you have configured Telegraf to gather system stats from your machine. This tutorial also assumes that you are fairly familiar with the JavaScript Client and know how to query InfluxDB. If you’re new to the Client, I encourage you to take a look at this Getting Started with the JavaScript Client guide.