In this talk, Zoe Steinkamp will talk about Giraffe, an open source 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.
How We Created the Giraffe Libraries for Time Series Data
AI Generated Video Summary
1. Introduction to GIRAFFE
I will be presenting Influx Data's open source time series graphing library GIRAFFE. GIRAFFE powers the visualizations of the InfluxDB dashboard and the Data Explorer. It can be used in external applications and is particularly useful for displaying solar power data.
Hello, my name is Zoe Seinkamp and I've been a software engineer for over five years and I've been with Influx Data, my company, for about one and a half years. I will be presenting Influx Data's open source time series graphing library GIRAFFE. We use this library in our application to display the time series data our user's input, but recently we have been working on improving GIRAFFE so it can be used more easily outside of our Influx project. I will be briefly explaining how it's used and showing some examples of the graphs it supports, as well as the code you would need to get it running locally.
But GIRAFFE also has a large amount of documentation and a few sample apps you can reference. I've also included links to all of those as well in my slide deck. So let's go ahead and begin.
Why GIRAFFE? It powers the visualizations of the InfluxDB dashboard and the Data Explorer in all of the InfluxDB versions. We have an InfluxDB 1 and a InfluxDB 2. Developers can reuse InfluxDB visualizations in external applications such as websites, phone apps, or other custom apps. So it's not uncommon that we work with solar panels as like a client like, we have a few solar panel companies. They would put their data in InfluxDB and then they would pull it back out to display it to their customers. So that's one example of how this might be used is, you send your solar power data to Tesla. They get it. They put in us and then they send it back to you to show like, look, your solar panel is doing great or not so great.
2. Exploring GIRAFFE: A Versatile JS Charting Library
It takes an annotated CSV as an input. The output type of the InfluxQL slash flux queries is streamable. It contains annotated headers denoted with the hashtag group, hashtag dataset and hashtag default. And I am going to show an example of this in the next slide. So I'm not going to go too in-depth into this, but basically GROUP contains true or false entries, data set describes data type beach entry and the default is the actual table. Like I said, I'm just going to show an example because it's a little hard to explain annotated CSV data. It's not really necessary. We also have an example here using this in our Dirac docs.
And then here are a few of the graphs that Dirac actually supports. We have the band, the gauge, the simple graph, line graph, all that good stuff. We actually have a few different variations of line graphs. Graph with a single stat, a heat map, a histogram, a scatter plot, a single stat, no graph just the single stat, and a table, which might remind you of what you see when you normally go to a database company, a table. We also have a few other graphs coming soon, which is going to be candlestick and map, but I'm not going to display them because they're obviously not out in production yet.
3. Working with Giraffe Plots
Working with the giraffe plots each pot requires the config property. You have your X and Y plot your colors, your theme, your type. Getting data into giraffe using our InfluxDB client, you just need your URL, token, org ID, and bucket. Giraffe has a sandbox with 30 to 40 examples of different types of graphs.
A really quick, you know, working with the giraffe plots each pot requires the config property. So as you can see, we get our data from the flux CSV data is, you know, the flux table line layers is the line layer. And then, you know, we have two examples of this config, but basically you have the layers and you have the actual CSV data. Pretty straightforward.
Then the actual line layer property is how you define, you know, in your graph. You're going to have a ton of options. You have your X and Y plot your colors, your theme, your your type. Like I said, we have actually multiple line types. Like we we have a lot of different graph types that I just didn't show an example of because we have so many. And like I said, here's the example that I was talking about. This one's very simple. You were literally hard coding the data right here. You know, this is your X data. This is your Y data. It's very simple. It's very brute force, but I think it really gets across how simple giraffe is to use. You know, this doesn't take very much to get it up and going and you don't have to use it with InfluxDB. We might be a time series provider, but you know, giraffe is open source. You can use it however you would see fit.
Now, the big thing I also wanted to mention is the fact that giraffe does have a sandbox. So our sandbox is based on storybook. So, you know, you come in here, you get the storybook up and running, which is pretty easy. You just do like a yarn start super simple command. And from here you can actually see, I think we have about 30 to 40 examples of different types of graphs in here.
4. Exploring the Sandbox and Links
You can see the code and what we're doing in our sandbox. Some features are not in production yet, but you can explore the options available for your graphs. While not everything is fully functional, most things are stable and functional. We provide links to our GitHub repository, quick start guides, demos, code samples, and various storybook graphs.
And again, you can see the code, you can see what we're doing. Some of this is not actually currently even in production and in FluxDB. So it's a great way to see what we're up to. Like right now, I'm showing the map one, we're not done yet, but it's in here. So that is just one thing to note. If you choose to ever go through our sandbox and check out all of our graph types, you know, you can see all the options that you have for your graphs as well.
The map one doesn't have as many options, but some of these have like 20 options to, you know, play with on the side. Just be aware that it's our sandbox too. So not everything is like 100% functional, but I would say that most things are, you know, pretty stable, pretty functional, you know, we've been using them for years kind of thing.
And then these are just some general links that I put up. So we have, you know, the GitHub repository, the quick start guides, some of our demos, some of our code samples, the anti ATC as we reference. And then again, these are just all the different storybook graphs. And this isn't even all of them. This is just like the basic ones.