Learn how you as a developer can use our InfluxDB Cloud web interface to ingest, explore, analyze, and understand your data. We'll highlight new capabilities and show you some tips and tricks to get the most out of the InfluxDB Cloud Platform.
Understand and Visualize your Data with InfluxDB Cloud
AI Generated Video Summary
Christina Robinson introduces InfluxDB and Giraffe, a JavaScript library for visualizing timestamp data. Giraffe supports various visualizations and can be used in external applications. Data can be imported into Giraffe using Flux queries via the REST API. The plot is the base entity for visualization in Giraffe, requiring CSV data and a layers object to specify the plot type and properties.
1. Introduction to InfluxDB and Giraffe
Hi everyone, my name is Christina Robinson. Today, I'm going to talk about visualizing timestamp data from InfluxDB using Giraffe. InfluxDB is an open-source time series platform with client server libraries for data ingestion. Giraffe is a JavaScript library customized for InfluxDB that powers visualizations in the InfluxDB dashboard and data explorer. It supports various types of visualizations and can be used in external applications. To get data into Giraffe, you can use Flux queries via the REST API.
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.
2. Visualization Basics and Plot Configuration
We have a JavaScript client that simplifies the usage of REST APIs. The plot is the base entity for visualization in Giraffe. It is imported into React code and requires a prop containing the CSV data and a layers object to specify the plot type and its properties.
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.
Comments