Understand and Visualize your Data with InfluxDB Cloud


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.

7 min
14 May, 2021


Sign in or register to post your comment.

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

Short description:

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

Short description:

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.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Advanced Conference 2021React Advanced Conference 2021
6 min
Full-stack & typesafe React (+Native) apps with tRPC.io
Why are we devs so obsessed with decoupling things that are coupled nature? tRPC is a library that replaces the need for GraphQL or REST for internal APIs. When using it, you simply write backend functions whose input and output shapes are instantly inferred in your frontend without any code generation; making writing API schemas a thing of the past. It's lightweight, not tied to React, HTTP-cacheable, and can be incrementally adopted. In this talk, I'll give a glimpse of the DX you can get from tRPC and how (and why) to get started.
TypeScript Congress 2022TypeScript Congress 2022
27 min
TypeScript and the Database: Who Owns the Types?
We all love writing types in TypeScript, but we often find ourselves having to write types in another language as well: SQL. This talk will present the choose-your-own-adventure story that you face when combining TypeScript and SQL and will walk you through the tradeoffs between the various options. Combined poorly, TypeScript and SQL can be duplicative and a source of headaches, but done well they can complement one another by addressing each other's weaknesses.
JSNation 2023JSNation 2023
28 min
APIs are Evolving. Again.
As developers we stand on the shoulders of giants, and it can be helpful to take a look at the past to gain a better perspective. In this talk we’ll briefly explore the past decade of backend development and architectural patterns.
We’ve often ditched technologies in an attempt to make the developer experience frictionless. However we sometimes forget what we can learn from “the good old days”.
What are you building: a monolith, a microservices system or something in between? A shift in how we see things can help us keep moving forwards.
JSNation 2023JSNation 2023
29 min
I Would Never Use an ORM
What's an ORM? An Object-Relational Mapping tool (ORM) is a library to map a SQL table to a Class. In most cases, ORMs force the users to structure their code to have Model objects that include both data access and business logic.
Once upon a time, I did several projects using ORMs as I followed the common belief that they would simplify the development and maintenance of projects. I was wrong. ORMs are often a hurdle to overcome for the most complex part of a project.
As the next stop of my journey, I recommended people use the native languages of their databases, e.g., SQL. This works great for the most part, but it creates quite a struggle: there is a lot of boilerplate code to write that can be pretty tedious. I was wrong, again.
Today I'm presenting you Platformatic DB.
Node Congress 2022Node Congress 2022
31 min
Database Access on the Edge with Cloudflare Workers & Prisma
Edge functions are pushing the limit of serverless computing – but with new tools, come new challenges. Due to their limitations, edge functions don't allow talking to popular databases like PostgreSQL and MySQL. In this talk, you will learn how you can connect and interact with your database from Cloudflare Workers using the Prisma Data Proxy.
You can check the slides for Alex's talk 

React Summit 2022React Summit 2022
23 min
Handling Data at Scale for React Developers
It is very difficult to scale modern web applications to millions of concurrent users. Oftentimes, we've got to provision and consider in-memory Key/Value stores, search engines, analytics engines, and databases, all while preserving traceability through the layers. This talk expands on the technical details of web apps at this scale, and offers a simpler way to achieve the same effect without the technical hassle.

Workshops on related topic

Remix Conf Europe 2022Remix Conf Europe 2022
195 min
How to Solve Real-World Problems with Remix
- Errors? How to render and log your server and client errors
a - When to return errors vs throw
b - Setup logging service like Sentry, LogRocket, and Bugsnag
- Forms? How to validate and handle multi-page forms
a - Use zod to validate form data in your action
b - Step through multi-page forms without losing data
- Stuck? How to patch bugs or missing features in Remix so you can move on
a - Use patch-package to quickly fix your Remix install
b - Show tool for managing multiple patches and cherry-pick open PRs
- Users? How to handle multi-tenant apps with Prisma
a - Determine tenant by host or by user
b - Multiple database or single database/multiple schemas
c - Ensures tenant data always separate from others
GraphQL Galaxy 2020GraphQL Galaxy 2020
106 min
Relational Database Modeling for GraphQL
Workshop Free
In this workshop we'll dig deeper into data modeling. We'll start with a discussion about various database types and how they map to GraphQL. Once that groundwork is laid out, the focus will shift to specific types of databases and how to build data models that work best for GraphQL within various scenarios.
Table of contents
Part 1 - Hour 1
      a. Relational Database Data Modeling
      b. Comparing Relational and NoSQL Databases
      c. GraphQL with the Database in mind
Part 2 - Hour 2
      a. Designing Relational Data Models
      b. Relationship, Building MultijoinsTables
      c. GraphQL
Relational Data Modeling Query Complexities
      a. Data modeling tool. The trainer will be using
      b. Postgres, albeit no need to install this locally, as I'll be using a
Postgres Dicker image
, from
Docker Hub
for all examples
JSNation Live 2021JSNation Live 2021
156 min
Building a Hyper Fast Web Server with Deno
Workshop Free
Deno 1.9 introduced a new web server API that takes advantage of Hyper, a fast and correct HTTP implementation for Rust. Using this API instead of the std/http implementation increases performance and provides support for HTTP2. In this workshop, learn how to create a web server utilizing Hyper under the hood and boost the performance for your web apps.

Node Congress 2023Node Congress 2023
33 min
Scaling up Your Database With ReadySet
Workshop Free
The database can be one of the hardest parts of a web app to scale. Many projects end up using ad-hoc caching systems that are complex, error-prone, and expensive to build. What if you could drop in a ready-built caching system to enable better throughput and latency with no code changes to your application?
Join developers Aspen Smith and Nick Marino to see how you can change one line of config in your app and use ReadySet to scale up your query performance by orders of magnitude today.
GraphQL Galaxy 2021GraphQL Galaxy 2021
143 min
Building a GraphQL-native serverless backend with Fauna
Workshop Free
Welcome to Fauna! This workshop helps GraphQL developers build performant applications with Fauna that scale to any size userbase. You start with the basics, using only the GraphQL playground in the Fauna dashboard, then build a complete full-stack application with Next.js, adding functionality as you go along.
In the first section, Getting started with Fauna, you learn how Fauna automatically creates queries, mutations, and other resources based on your GraphQL schema. You learn how to accomplish common tasks with GraphQL, how to use the Fauna Query Language (FQL) to perform more advanced tasks.
In the second section, Building with Fauna, you learn how Fauna automatically creates queries, mutations, and other resources based on your GraphQL schema. You learn how to accomplish common tasks with GraphQL, how to use the Fauna Query Language (FQL) to perform more advanced tasks.

Node Congress 2022Node Congress 2022
98 min
Database Workflows & API Development with Prisma
Workshop Free
Prisma is an open-source ORM for Node.js and TypeScript. In this workshop, you’ll learn the fundamental Prisma workflows to model data, perform database migrations and query the database to read and write data. You’ll also learn how Prisma fits into your application stack, building a REST API and a GraphQL API from scratch using SQLite as the database.
Table of contents:
- Setting up Prisma, data modeling
- Exploring Prisma Client to query the database
- Building REST API routes with Express
- Building a GraphQL API with Apollo Server