Understand and Visualize your Data with InfluxDB Cloud

Hi everyone, my name is Christina Robinson. I'm a Software Engineering Manager at Influx Data, and today I'm going to be talking to you about visualizing your timestamp data from InfluxDB using Giraffe. Let's go!

First of all, what is InfluxDB? InfluxDB is a time series platform. It's open source, scalable, analytics engine to accumulate, analyze and act on real-time data. We have client server libraries to ingest data, including JavaScript, Go, Python and other databases, as well as a lot more. We have almost 200 libraries now.

What is the characteristic of time series data? Basically, it's timestamped data. It can be generated in regular intervals, such as metrics, or irregular time periods, such as events. We have really high volumes and the data is most valuable in its real-time version. So, it's time sensitive. After 30 days, the data may not be relevant anymore.

What is Giraffe? Giraffe is a charting mapping software that's customized for InfluxDB. It's a JavaScript library, it uses the React framework, it's also open source and available in a GitHub repository. It takes annotated CSV as input. Why? Because that's the output from InfluxQL and FluxQueries, which is our own customized version of how we query the database. It's streamable and basically it's like your typical CSV data, but it has some headers at the top. It has group, data set, and default. Group contains entries of true false that tells you whether or not the data has been grouped and by what category. Data set describes each type of the data and then there's the result test set which is your traditional CSV values.

Why would you want to use Giraffe? Well, it powers the visualizations of the InfluxDB dashboard and data explorer in all of our versions. That includes our original open source version, our enterprise version, as well as our newest cloud version. Developers can reuse the visualizations that you create within InfluxDB in external applications such as websites, phone apps, or other custom applications. So let's take a look at what Giraffe looks like. We can produce band charts, gauges, graphs, graphs with a single stat overlaid, a heat map, histogram, scatter, just a plain old single stat, as well as table, and we have some more visualizations that are going to be coming up soon.

Let's take a look at the basics of Giraffe. First of all, you have to get your data into Giraffe. This is annotated CSV, as I mentioned earlier. There are two ways of getting that in. The first is by using what's called a Flux query. You basically will use REST API in whatever language you like, because we have over 200 libraries, and you can write your Flux and get the data back.

Or, if you don't want to mess with REST APIs, we actually have a JavaScript client that's specifically written, and it takes care of a lot of the shortcuts for you. Then, we talk about the basics of the visualization. First of all, there's the base entity which is called the plot. This is what you'll import into your React code. Next, we have a prop for plot, and that prop contains the CSV data itself that you're going to pass in, as well as a layers object. The layers object, which is basically a property of config, allows you to specify which plot type it is and all of its properties.