How We Created the Giraffe Libraries for Time Series 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.

What is GIRAFFE? It's a charting mapping software. It is a JavaScript library based on the React framework. It's completely open source available in our GitHub repository. So you can see it, you can touch it. You can play with it. You can change it. We got it all.

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.

Some draft basics for getting the data is what type of data is used as an input. We can use a FluxQuery, which is called through a direct API, or the InfluxDB client, which is our JavaScript client, which makes it really easy for people using JavaScript to bring that data in. The basics of visualization are that it has a plot, which is a React element defined in the draft library, a config, which is a property of that plot, which contains CSV data. And then finally layers, which is a property of config, which basically is how you decide which graph type you want to display. I'm again going to show an example of this.

Calling giraffe from external applications. You can use, technically any React or JavaScript application can call to the draft library. And we provide sample codes on how to do this and several type of ways on the GitHub Giraffe repo. You can also just do like a simple HTML page. Again, I'm going to show this example actually, because I think it's really great to get a rough idea of how it works, but we do not currently support server side rendering.

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.

Getting data into giraffe using our InfluxDB client, so I didn't put in the API one because you know, this is a JavaScript talk. So I decided to do the JavaScript client. You basically just need your URL, your token, your org ID, and your bucket, which is all things that you would find in the InfluxDB client. From there, you just connected up, you send up your query which basically says, Hey, I want the data from, you know, the span of time, the span of dates, et cetera, et cetera. I want anything above 500, anything below 500, some queries get very intense. I didn't put an example here because it can get very long, but basically you're saying I want this amount of data, please give it to me in an annotated CSV format so I can display it in my giraffe app.

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.

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.