Meet the Experts: Visualize Your Time-Stamped Data Using the React-Based Giraffe Library

Session date: Jan 20, 2021 08:00am (Pacific Time)

Giraffe is the open source React-based 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.

Kristina Robinson, the engineering manager for the Giraffe team at InfluxData, will dive into:

• The basics of using the Giraffe library including how to query your data with Flux
• Specific Giraffe visualization types for dashboards (e.g. single number, table and graph)
• How to incorporate visualizations in your own custom apps

Don’t miss this opportunity to listen, learn and ask your questions live. This hour-long webinar will include a live presentation, exclusive content and Q&A time with the speaker.

Additional resources:

• Giraffe GitHub Repository
• Quick Start Guide
• Design Demos
• Annotated CSV Reference
• Band Chart: Static Group By Applied
• Band Chart: Static All String Columns
• Gauge Graph
• Graph Line: Single Stat
• Graph with Single Stat
• Heatmap

Click here for presentation 

Watch the Webinar

Watch the webinar “Visualize Your Time-Stamped Data Using the React-Based Giraffe Library” by filling out the form and clicking on the Watch Webinar button on the right. This will open the recording.

[et_pb_toggle _builder_version=”3.17.6” title=”Transcript” title_font_size=”26” border_width_all=”0px” border_width_bottom=”1px” module_class=”transcript-toggle” closed_toggle_background_color=”rgba(255,255,255,0)”]

Here is an unedited transcript of the webinar “Visualize Your Time-Stamped Data Using the React-Based Giraffe Library”. This is provided for those who prefer to read than watch the webinar. Please note that the transcript is raw. We apologize for any transcribing errors.

Speakers:

• • Caitlin Croft: Customer Marketing Manager, InfluxData
  • Kristina Robinson: Software Engineering Manager, InfluxData

Caitlin Croft: 00:00:00.171 Hello, everyone. Once again, my name is Caitlin Croft. I work here at InfluxData. I’m very excited to have you here today. Kristina Robinson, who’s part of our engineering team, will be talking about our React-based visualization library. Once again, another friendly reminder. Please feel free to post any questions you may have for Kristina in the Q&A box, I will be monitoring it, and we’ll be answering questions at the end of the webinar. So without further ado, I’m going to hand things off to Kristina.

Kristina Robinson: 00:00:36.919 Good morning, everyone. I’m super excited to be here. I’m on the application UI team. We work with the Giraffe library all the time. So we’re going to start off this talk with - why are we even talking about Giraffe? What is it? How Giraffe powers the visualizations of our InfluxDB dashboards and data explorers in all our versions of InfluxDB. So if you go and look at a dashboard, and you’re creating a chart, a graph, or any kind of visualization, it’s Giraffe that’s powering that. Developers can reuse our InfluxDB visualizations in external applications, such as websites or phone apps, or other custom applications.

So that’s what we’re going to talk about in this talk. We have a lot of people who come to us and say, “Gosh, that looks beautiful inside your UI, but I have my own custom application, website, phone app, and I’d really love to just have that little graph that’s available on the dashboard. Can I just get that little graph and have that pulled out and used in my other application?” So the answer is, “Yes. You can.” And Giraffe is the library that you’re going to use to do that. So we’re going to walk through how you would do that kind of thing today.

Kristina Robinson: 00:02:03.065 So what is Giraffe? Giraffe is our own custom-developed charting and mapping software. It is a JavaScript library. It uses the React framework. It is open-source, so it is available in our GitHub repository, which we’ll provide those links at the end of the seminar. And so we ask for contributions. You can change things if you want. And it takes annotated CSV as input. So what is annotated CSV you may ask? Well, that is what our InfluxQL and Flux queries return. Any time that you create an InfluxQL and Flux query, whether it’s through direct Flux through the CLI or whether it’s using our UI and you’re building the query builder and create a query, it goes against our Influx database. What comes back is in the form of annotated CSV. Annotated CSV is streamable, which is one of the reasons why we use that form, unlike JSON, where you have to have that whole blob of information defined in an object and then returned. So for you’re using large forms of data, when you’re really talking about passing back-and-forth a large stream of data, you want something that’s streamable.

Caitlin Croft: 00:03:27.588 So a little bit about annotated CSV. Everyone is familiar with CVS, which is comma-delimited files, but annotated CSV basically comes with some headers up at the top, and it has information about grouping, about the data set, and the default result set that comes back. So the group contains true/false entries for every entry along there, based on whether or not the data is grouped by that particular piece of data. And the data set describes what the data type is. So are you passing FLOATs, integers, longs, strings. And then the default is the result table, as I mentioned. So if you’d like more information about annotated CSV, we do have a reference guide. And we have an example here that I’m just going to show you.

Caitlin Croft: 00:04:29.613 So this is what the data type looks like. This would be one of the first lines in here. And you can see that it starts with this hashtag datatype, and then it has just a series of entries behind that. And so it’ll tell you the result set that’s going to come back is going to be in this format. It’s going to have a string, a long, a dateTime, et cetera, all the way along. Then, we have an example of group. And group says, “The dataset that follows, is it grouped by the string, the long, the date time, and the next date, time, etc.?” So for every entry across here, you’ll see a true or false entry. Then, the next one is the default. Default always has this result name and then it’ll have a series of commas after it. That says, “This is the beginning of the result set.” So then every other entry below that is - so the result set will tell you what the names are of all of the data fields. And then here we have an example.

Kristina Robinson: 00:05:41.838 This is our data example right here. So for the first entry here, we’re always going to have an empty set because that is for the default. And the result table, we don’t have any values for that. But then for start, stop, time, here’s our start time, here’s our stop time, and then our data set time, and then our value is 29.9, and then we have a value. The field is going to be value and then the measurement is temperature. And example, index .HTML, location, browser. That’s how you would read - and this is just some more examples here. So this is how you would read annotated CSV. And this is important because if you are trying to troubleshoot something and you want to see what your data looks like - this is the format that it’s going to be in.

Kristina Robinson: 00:06:32.351 So what are all the different types of plots and - we call them plots. So what are the visualizations that Giraffe provides? So we’re just going to go through these in alphabetical order. These are the ones that are available through our UI. We have a band plot. A band plot is a line chart that has a band. An upper and lower band. So it shows you these are function values that you can define. So, for example, this could be the average value. The upper limit could be max, and the lower could be minimum. So these are just functions that you are going to define. And you can use any aggregated function that Flux provides. So these are three different data sets. So this is CPU one, two, and three. And each one has a high, a low, and a middle that you define in the customizations. You can also do a GROUP BY. And so before you even look at the chart, you can apply some grouping, and it will make a bit of difference in how things look because everything will be - it will not be grouped by the individual CPU type, it’ll be grouped by the values. So those are two different ways you can use the band chart.

Kristina Robinson: 00:08:00.011 Gauge. Gauge is a simple measurement - a single measurement, and it has a minimum and a maximum. And there are thresholds that you can define. The thresholds you define, you can assign a color. So for each color, you would define - here’s from zero to 50, 50 to 100, 100 to 150. And you can define what that color is. And so that’s how gauges are. And then you also have the outer area here, which you can define by the tick style. So where you want these numbers to appear and whether you want decimal places. All of that is configurable.

Kristina Robinson: 00:08:44.829 Here’s a plain line graph. So this is probably the most common graph that’s used. And you can see it just has an X and Y value. Along the bottom, here is time, typically. And then along your upper column here you can format this with percentages and dollar signs and decimal numbers. All of these are configurable. Here’s a line graph with a single stat on top of it. So you have your line graph behind it. And then you can determine what you want as the single stat here using a function. You can use minimum, maximum, last, average, whichever function you like. Any of the aggregated functions.

Kristina Robinson: 00:09:29.929 This is a heatmap. This is an X Y scatter graph of a specific type. The heat map just shows color bands, and you define the color based on thresholds of the different Y-axis.

Kristina Robinson: 00:09:45.829 This is our histogram. Histograms are basically stacked bar charts.

Kristina Robinson: 00:09:52.405 Here’s a scatter, which is very similar to the heat map, except that for every line of data, every series of data, it will give it a different type of symbol. So it’s kind of hard to tell on this map, but this is a little dot. This is a little diamond. There’s little triangles. So for the X Y scatter, you can define what you want the symbol to be for the given data series.

Kristina Robinson: 00:10:22.392 This is single stat. Also, used pretty commonly on dashboards. Here, I just showed that you can put the dollar sign in here, as well as how many decimal points you want to use.

Kristina Robinson: 00:10:35.219 And table. Table is also used very frequently. A table just shows you all of the different values. And you can determine which values you want displayed up here through configuration options and also through your underlying Flux query. So that’s a quick run-through of all of our Giraffe types - the plot types.

Kristina Robinson: 00:10:57.980 So let’s get into the Giraffe itself. The JavaScript library. There are two pieces that we need to worry about. One, getting our data into Giraffe. Obviously, we’ve talked about what type of data is used as input. Caitlin, this is my question that the first person who answers gets a prize.

Caitlin Croft: 00:11:26.270 Okay. Awesome.

Kristina Robinson: 00:11:30.313 Do we have an answer yet?

Caitlin Croft: 00:11:31.707 Doesn’t look like there are any answers right now. Do we want to give people a little bit more time? Oh, let’s see. Lots of annotated CSV.

Kristina Robinson: 00:11:43.324 That’s right. That’s exactly right. Annotated CSV is the input that we’re going to use to feed into our Giraffe. So there are two ways that you can get data. You can use a Flux Query and send it directly through an API, or we have a JavaScript client that is inside InfluxDB. So we have our own library that we have kind of packaged together that takes care of doing a lot of the back-and-forth. If you’re familiar with REST API’s, and sending them over HTTP, you will know a lot of the back-and-forth that you have to do in order to set things up. So we’ve made it a little bit easier by using InfluxDB client. The Direct API, we have a number of APIs available. You can use, basically, any language you want, as long as it’s an HTTP request. Send it across and be able to handle back annotated CSV.

Kristina Robinson: 00:12:45.613 So once you get the data, then you have the basics of, what do you do with it? Well, we’re going to talk a little bit about how Giraffe is structured and the basics of a visualization. First, we have the concept of a plot. So we have a React element that we have created and it’s called a plot. And that basically just defines and says, “This is going to be a visualization.” Next, we have a property that we pass into the plot that’s called config. Config is a property that is a structure and it contains two elements. One is the CSV data itself, that you’ve returned back when you went to go get the data, and another object called layers. Layers is a property. Right now, we only have - although it is expecting an array and is capable of processing an array, we’re only passing one object right now because we only have one layer defined in Giraffe for all of our graphs. And the layer defines - it is an object that has a lot of different properties. And those properties are things like, what plot type is this? Is this a line graph? Is this a gauge? Is this a table? So you actually put in the type inside a property of this layer. And then depending on which plot type you choose, there’ll be a lot of other configurations. All of these are defined in our README in the Giraffe library. So we have things like, for example, an X - a line graph needs an X, a Y, and a time. So let’s get into a little bit of sample code.

Kristina Robinson: 00:14:38.374 So I’m going to talk about getting in the data first. Remember, I said we have two different ways of getting the data in. This first one is using direct API. We’re just calling the rest API directly. And I apologize. This is kind of squished code because I tried to get it all on one page, but I’ll walk through what this is. So the first thing is we’re going to define a body. We are going to be using just standard - using, for example, Axios using a GET, a FETCH, a POST. Something like that. So we’re just going to have a body and a header. So in the body, we have our query that we’re going to define. This is a Flux query. Then, we have to set a couple of things to tell it that we want to get back annotated CSV. So, for example, we set a delimiter, a quote character, a commentPrefix, and annotations. These are the three hashtag headers that are coming across at the top of your file. And then the type is Flux. So when we pass this body over at the back end, we recognize that, “Oh, okay. You want annotated CSV back. Perfect. We know how to do that.” Next, we’re going to set the headers. The headers are where we do our authentication authorization. So here’s where you’re going to pass in your Influx token. Influx tokens are generated inside the UI and they have a variety of permissions. You can either use an all-access token, or you can use - in this case, we’re just reading information in so you can actually specify, “I need read permission for,” the specific bucket that you’re going to be pulling information from. So that’s the token that you would pass in here. And just say we’re going to send across the application JSON. So you’re just telling the header, “Okay. This is the format we’re passing it over.”

Kristina Robinson: 00:16:39.446 The request itself, you’re going to need to specify which cloud you are a member of. So up at the top, when you log in, you have chosen which cloud provider you’re using, whether it’s Google or Amazon or Azure, and that gives you a different URL prefix. So you will have to specify an environment variable the beginning of your URL. And then we have this API V2 query, which is the endpoint that we say, “I’m going to give you a Flux query and you’re going to give me back this information.” You do need to pass over your org - this is your org ID. No. This is your org name. Sorry. This is your org name. So a lot of people, when they sign up for it, they say, “Here’s my email address and my org ID.” It might be your company name. If it’s a personal one, it might be your email. So whatever you signed up, whatever your organization is. And I’ll show you where to find that in the UI when we go to the live demo. And here we just do POST, and headers, and stringify. And then we just send over our request. So that is basically all the code that you need to send over.

Kristina Robinson: 00:17:57.577 This is some sample code for how to get - use the InfluxDB client. Again, I mentioned InfluxDB client takes care a lot of the back-and-forth. Setting the header, setting the body, all that kind of good stuff. So you just need to set some constants. Here’s your you URL, your token, what bucket you want to use, your org ID. You pull in this package, the InfluxDB client package. And then you’re going to use some standard calls to actually set up the connection to the database. This query right here is where you’re going to pass in a constant of whatever Flux query you write. And then you can tell it, “Okay. Go query those lines.” This particular set of code will actually go through each line of CSV and get it all together into one object and then make a JSON object out of it. I mentioned earlier that CSV is streamable. So it is streaming one line at a time. And so it’s going to go through the whole stream before returning it. You don’t have to structure it this way. You can structure it getting a line at a time and processing that. But for simplicity’s sake, I just showed how to get all of the data back.

Kristina Robinson: 00:19:21.317 Now we’ve gotten our data into our Giraffe plot, how do we actually work with the plots? So I’ve got some example code here. First of all, we’re going to import the plot from the Giraffe library. Then, each plot requires the config property, as I mentioned. So here’s my config object and it has a table of CSV. This is where I’ve actually used a helper function from Flux, which takes a big, huge JSON object of CSV and will convert it into the object table that the configuration requires. Also, some of our visualizations will allow you to directly pass in a Flux response. The lineLayer property determines which plot type and the plot properties. So here we go with a lineLayer. This is passed in with the config. Again, I said this is an array. But for right now, we’re only going to pass in one. So here’s our single object. And we have an X and a Y and it’s type. So we have, “Please use the time value. the time column, for my X, my value as my Y, and plot it as a line.” And that would create a simple line plot for you.

Kristina Robinson: 00:20:47.353 So why do we even - how do we actually call Giraffe from external applications? So you can use any React or JavaScript application to just import our Giraffe library. We have several sample codes available for you in our GitHub Giraffe repo. I created a table of contents, and you can go through and pull based on plot type to take a look at the different samples. We’ve also got samples using both a direct API method, as well as the InfluxDB client. We’ve got some node server React client examples. We’ve got some direct React client examples. So all of those are available. You can also test Giraffe directly through an HTML page, and that requires no React or JavaScript installation. And you basically have your annotated CSV, and you can just put everything - plunk everything into a HTML page if you like. And we do have an example of that in our QuickStart guide. And this is a quick note. We did have one customer who was trying to use Giraffe with server-side rendering and right now we do not support that.

Kristina Robinson: 00:22:06.733 All right. So let’s actually do a start to finish Giraffe app. How would that work, where we could create an app outside using Giraffe but pull something that’s running inside InfluxDB? So here I’ve kind of created the bare bones of an example that you could use at home. So I chose to use a community template. So I said you could go to the settings, templates, and pull in this SpeedTest file. So this is a community template that was created by one of our members. And what it does, you have to actually install the SpeedTest CLI on your local machine and run it and use Telegraf and get some data. So that’s real simple. It gives you a bucket. It gives you the Telegraf client. It gives you a dashboard. It gives you everything that you need to just basically get some real, quick data ready to run. The next thing, once you’ve got Telegraf running and you actually have some data in there, is you can navigate to your dashboards and clone an example to render a single plot. So instead of what they have on right now, they have multiples, you can just clone a sample one and play with it on your own. And then from there, you can actually clone down one of the sample projects that’s inside Giraffe and you can just ping it against this little dashboard and you’re done. You have everything ready to go. And if you think, “Gosh, it cannot possibly be that simple,” I will show you.

Kristina Robinson: 00:24:00.178 So this is going to be a live demo portion where I actually do exactly what I just talked about. So I’m going to close down my - right here. Ugh! I don’t want to do that. Okay. So we’re going to just minimize this real quick. I’m going to navigate over to my login. Okay. So if I go to settings and templates, and if I were to paste in that YML file and look up template, it would install this SpeedTest template, which is right here. You can see there’s four resources. It has a Telegraf file, a dashboard, a bucket, as well as a label. So I’ll just show you real quickly that those things are here. So here’s my SpeedTest bucket. Duck over to my board. Here’s my board. And go to Telegraf, and you can see here it’s a Telegraf client. You don’t have to do anything to the Telegraf client. It’s ready to go. It does say that you do have to have some environment variables setup. So I do have those environment variables set up over here in my terminal. But I’m going to just copy to clipboard and then go back and get my terminal back. I’m going to just make this a little bit bigger. Okay. So now I’m going to paste in that instruction. And that’s going to basically run a Telegraf instance with the configuration SpeedTest against my Influx account. And you’ll see here that it has successfully connected. And give it a second, and it will start buffering metrics. So this is how I actually pull information into my buckets. And obviously, I’ve already been doing that because you saw I had some data in my buckets. So that’s the Telegraf piece.

Kristina Robinson: 00:26:48.612 And now, we’re going to go to the interesting piece. So we’re going to go over to Giraffe. This is the Giraffe repo. Here’s my QuickStart. I’m going to go to a listing of sample code. So here is a listing of all the samples that we have available right now. This is intended to be a live, living document. So we will continue to provide additional samples as we come along. So the one that I’m going to use today is, I’m going to use this direct API. It’s a single React app. It doesn’t require me to run a node server behind it. So single React app. It’s directly going. And it has three different plot types that it can show me. So what I’m going to do is I’m going to go over here, and I’m going to copy this, and then I’m going to go back over to my terminal. All right. And I’m going to make this bigger, and I’m going to clone that down.

Kristina Robinson: 00:28:12.877 All right. So now if I look at the README for this little guy… Oops. We didn’t have that merged in. Okay. Oh, I had some extra little things in here on a different branch but that’s okay. We’ll look at that in a minute. And then I’m going to go back over here and run my VS code. Okay. So here we go. Demos. This is the code I’ve just downloaded. And it provides something called a .env.sample. So this is how React is going to be able to pull in environment variables if you’re not familiar with that. So what I have to do is I have to set up my token, my org ID, my bucket, and my URL. So I’m going to do that real quick. And the way I’m going to do that is I’m going to go over here. Here’s a little shortcut for getting your org. So this is org ID. You can also get it from inside here. Come on. Ah, users. There we go. About. And here is your organization ID. But you’ll see it’s the same number right there. That is the same number.

Kristina Robinson: 00:29:53.589 And you need to be careful that you’re doing org ID versus organization. Organization, you can see right here underneath - so this is your user ID. And then right underneath here in the greyed-out section - it’s kind of hard to see - but for me, it’s just the same thing. My email and my organization name are the same thing. So I’m going to go back over to… This wants org ID. So I’m going to go ahead and paste that in. My bucket is just called SpeedTest. My Influx URL, I am going to have to change this part to match - this is the GCP Cloud, and that is not where I’m located, I don’t think. So let me go back. I’m not. I’m in Azure. So I’m going to copy this part of the URL. Put that in there right there.

Kristina Robinson: 00:31:04.565 Okay. The last thing I need is my token. And to get tokens, we’re going to go to - let’s see - data. Tokens. Now, I have an all-access token. So I don’t need to create a new token. I can reuse this one. But you can always generate a rewrite token that’s specific for a bucket, if that is your preference. Put this to clipboard and paste. And there’s my lovely, long - and I need to do a Save As. And I’m going to save this at .env. So, yes. So now with this .env file defined, React can find my environment variables. And you also need to be sure when you do this that you do not have conflicting environment variables set up in your environment. So now I’m ready to go down into this particular directory. And I can do yarn install.

[silence]

Kristina Robinson: 00:32:32.602 And this shouldn’t take too long. Yep. That’s done. And now I’m going to do a yarn start. But before I do that - oh. One important thing. One important thing we’ve got to do. I need to change my Flux query because this has just a sample query in it. So I’m going to go in and change the Flux query. And I happen to know - and this is the [inaudible] change that I put there. I happen to know that it’s in the configuration index. So where do I get this Flux query from? Let’s go back over to my dashboard. So for any dashboard that you want, let’s say I want this. So this is a single stat with a line graph, okay? I’m just going to do the line graph portion of it. This is the graph that I want to pull out. So I want this to appear in my own React app. So the way I do that is I’m going to do configure for this cell. I’m going to grab the Flux from inside there. And if you don’t see it, you can always go to query builder or edit. If it says query builder, it says, “Go to script editor.” But mine automatically does this. And yours, I believe it does it automatically. Okay. So I’m going to replace this. I don’t want this base query. And instead, what I’m going to do, is I’m just going to return my string. Now, this is hardcoded as SpeedTest, which is fine, or because I used an environmental variable for my bucket, I could so a string replace and do a bucket ID if I wanted to. But I don’t need to because I’m just going to leave it exactly the way I copied it. So now the Flux query is going to be the [inaudible] query for the cell that I want to retrieve. And I’m going to save this. Go back over to my terminal. I don’t think I have to change anything. No, I don’t. And then yarn start.

[silence]

Kristina Robinson: 00:35:17.544 Oh. It didn’t work. Load live demos. Oh, there we go. It’s just taking a minute. Okay. And there we go. Now, you’ll notice here that there’s no data value found. So let’s go back to my Flux query and you’ll see one more thing. So here is a range. So this is expecting the UI to pick a range for you. Since we don’t have the UI in the standard program, we will have to specify the start and stop time. So this is one change you will have to make to your Flux depending on how it’s copied. So if you have your Flux with this V dot, that’s a variable that’s defined inside the InfluxDB platform. So any place that you see a V dot, you will have to determine within your own application what value you want to pass in there. So in this case, I’m just going to hardcode, and I’m going to say, “Well, I just want the last 30 days.” So my start time is just going to be the last 30 days. And there we go. So there’s my line graph, my scatter graph, and my gauge. And my gauge is too big. The number is too big. It goes past 50. So I would need to change my threshold values. Go in and actually modify the configuration for the gauge so that it correctly has the min and max values, et cetera. So you can always go in and make changes to the code. This is just sample code and it had some predefined min and maxes, et cetera. But that’s all you need to - this is now a standalone - I’m running it on localhost 3000. It’s a standalone app. I could put this into any React app, anything using the sample code that I downloaded.

Kristina Robinson: 00:37:24.829 All right. That is the end of the demo. Put it back over to here and it’s time for Q&A.

Caitlin Croft: 00:37:40.983 Awesome. Thank you, Kristina. And just to let everyone know there’s a bunch of really helpful links that Kristina has provided in her slides, and those will be added to the webinars landing page today. So you’ll be able to find those as well. All right. So the first question is if annotated CSV is streamable, does that mean Giraffe is backed by WebSockets, or is it still pulling just with less overhead?

Kristina Robinson: 00:38:12.331 It does do a pull. So it does do a straight HTTP request, and it pulls back the chunk of data. And the way that the platform returns those chunks of data, it depends on the data size, but I believe that it returns it using - well, that’s a good question. I actually don’t know the answer to that. I’ll have to go ask. I’ve never dealt with something that was so big that it had to do any pulling. But, yeah, I’m not sure. That’s a platform question.

Caitlin Croft: 00:38:49.968 Okay. Maybe we can find out and we can reach out to Tony -

Kristina Robinson: 00:38:53.609 Absolutely.

Caitlin Croft: 00:38:54.157  -and we can let him know. He also had another question. Does Giraffe support InfluxDB 1.8 or is it just 2.0?

Kristina Robinson: 00:39:03.680 It is actually in all versions of our InfluxDB Giraffe is available and is what is driving everything.

Caitlin Croft: 00:39:14.203 Okay. Does the data get refreshed for every five seconds, similar to what we do in the InfluxDB Data Explorer?

Kristina Robinson: 00:39:23.617 Okay. So the way that this particular sample was written, it doesn’t have refresh logic in it. However, there are some of the samples - some of the sample codes that do show you how to do refresh logic. So the refresh logic is totally front end, totally UI-driven. So the platform will only refresh the data when you ask for it. So if you want to refresh it every five seconds, you want to refresh it every four hours, I mean, it’s up to you. We don’t put a limitation on how often you refresh it because we don’t know what your data is. If your data doesn’t change very often, then you wouldn’t want to pull very often. If it changes at the microsecond level, then you would want to pull every few seconds. So that information would actually have to be - the logic behind that would be controlled in whatever application is controlling Giraffe. Giraffe inherently does not - it just makes one call and then you have to - because it’s in React, if the state changes, it will re-render. So it’s up to you to refresh the data behind the scenes and then re-render it. And we have some sample code that actually sets a window time out interval, and you can play with that and see, “This is what it looks like every 5 seconds, every 10 seconds, every 1 minute.” But that’s all handled in the [inaudible] code.

Caitlin Croft: 00:40:51.994 Great. How would you include the units of a value? For example, PSI.

Kristina Robinson: 00:41:00.000 So I’ll just show you here. So let’s just go in to - let’s say, for example, that this is PSI. I mean, why not? So what we’re going to do is we’re going to go to Custom, and down here, you have all these different labels. So if, for example, the Y label - so my X-axis is time. Typically, you’re working with the Y-axis. So the Y axis, it says, “Do I have any units?” And you can say, “I want scientific notation. I want none. I want binary.” And you can just change that. And then, for example, if this were PSI, then I could do that and it would put - you can see here, there’s this label now. So now it does PSI. So we are working on - so we can do dollar signs in front of it. Oh, let’s see. That would be in French. So a dollar sign would want to be in front. That’s a prefix. So we just allow you to put anything, any text, in front or behind there on the axes, and you can specify - so here’s, for example, the single stat. So because this is a dual graph, there’s two. So it would say PSI here. And you can say how many decimal places that you want. If we didn’t want any decimal places, we could say this is zero. So 57 PSI because PSI usually don’t worry about decimal places too much. So that’s, for example, how you would handle that. So it’s all handled in the customization.

Caitlin Croft: 00:42:46.613 Awesome. What does the yield name, and then in parentheses or in quotes, in the Flux query doing?

Kristina Robinson: 00:42:57.348 Oh. Okay. So this right here it is the function that single stat is using to - so because this is a two-parter, right, so I have to not only define what is going to be on the line graph, but I also have to be - what’s going to be the single stat, we use last as the function to return what the single number is going to be. That’s what last is doing there. If you were to look at the raw CSV, the raw table data here, so you can see here that it says, “I’m going to define this,” and it gives me a - this is my list here. So it gives it a name. So this is actually just naming the yield and then this custom single set goes and looks for this particular thing in order to pull out what number to display. So name deals are really helpful, for example, in band charts because it band charts you have to have three different ones. You have to have three different yields, and they have to be named different things. So that’s where, if I just - for example, if I just show you and say this is band chart at the top here. So you see how it says upper column, main column name, and lower column name, you would have to do three different yields and give them upper, lower, and middle. And you can do that most easily with query builder. Because here you can say, “What functions do you want?” I want mean, I want max, I want min.” And you put in the aggregation - this window here and you submit that. Come on. Why aren’t you submitting? Uh, oh. I’ve frozen. [laughter] Zoom doesn’t like me. [laughter]

Caitlin Croft: 00:45:07.406 [crosstalk].

Kristina Robinson: 00:45:09.372 Exactly. So mean, max, and min are the names that you would put here, mean, max, and min, and that would give you your chart.

Caitlin Croft: 00:45:17.032 Perfect. So a named yield would replace a set of map statements? I’m not quite sure…?

Kristina Robinson: 00:45:29.568 All the named yield is doing is it’s just giving a name to the ResultSet. That’s all it’s doing. So not every chart needs it and only certain charts care about whether or not you have a name defined or not.

Caitlin Croft: 00:45:47.376 Is Giraffe internally made to handle large data sets? For example, supporting dynamic downsampling of results based on draw canvas size?

Kristina Robinson: 00:45:59.406 Yes. It is, yes. It is. We do a lot of performance work behind the scenes with Giraffe, and we’re continually improving it to try to work with really large datasets and we test constantly with really large datasets.

Caitlin Croft: 00:46:16.843 Have you had experience storing data on the client and only making incremental queries?

Kristina Robinson: 00:46:24.530 If you mean caching data, we do some caching of the data inside the UI inside InfluxDB. So if you have made a set of queries, and you go and you are constantly hitting it and there’s no change on the back end, the front end starts doing some caching so that you’re - it’s not as an expensive of a query.

Caitlin Croft: 00:46:53.068 How do I [crosstalk] -?

Kristina Robinson: 00:46:54.348 I hope that answers your question.

Caitlin Croft: 00:46:56.652 I’m sure they’ll let us know. Our community is very helpful that way. How do you filter weekdays and weekends? How do you create a central dashboard for multiple data sets?

Kristina Robinson: 00:47:10.010 Okay. So filtering weekends and weekdays. So I’m not a Flux expert. [laughter] But if you mean along here, if you mean along the Y-axis here, we don’t currently have the ability, that I know of, to filter out weekdays or weekends down here. Now, we are doing some work right now on some customization that you can do on the Y - on X and Y axis, but I don’t believe weekdays and weekend days were part of that customization. Now, you could write your Flux query to exclude the data, but in terms of displaying it, we don’t have a way to exclude weekends right now. And I’m sorry, what’s the second part of the question? You’re on mute Kaitlyn.

Caitlin Croft: 00:48:17.647 Sorry.

Kristina Robinson: 00:48:18.662 That’s all right.

Caitlin Croft: 00:48:19.088 How to create a central dashboard for multiple data sets.

Kristina Robinson: 00:48:24.115 A central dashboard for multiple data sets? Well, I’m not exactly sure what you mean, but you can, using a line graph, use multiple data sets. So in a line graph, you can have, for example -

Caitlin Croft: 00:48:41.191 So he added here how to create a gauge that combines - how to create a gauge combining all the data sets.

Kristina Robinson: 00:48:49.740 Oh. Okay. So a gauge specifically right now only supports one data set. So if you want to combine multiple data sets and display them all on the same gauge, like have an inner ring, and a next ring, and a ring after that that shows that we don’t currently support that. So the gauge is just a single data series. Now, you can have a dashboard that shows multiple gauges next to each other and that would be pretty easy to do. You can just clone the individual cell and then say, “Okay. It’s this dashboard, this one, this one, this one,” and have multiple gauges. But we don’t have the ability to display multiple data series on top of a single gauge. A gauge is just not designed to show that information.

Caitlin Croft: 00:49:36.451 Is it possible to change the single stat suffix dynamically? So let’s say the stat is greater than 50 you would have a specific suffix, but if it was less than 50, you would have a different suffix.

Kristina Robinson: 00:49:51.730 That’s a really ask and no we don’t currently have that capability. I’ll definitely take that - take a note of that one.

Caitlin Croft: 00:49:59.332 Okay. How do you set custom alarms based on data set and link the alarm to another data set? So customizing alerts based on a different data set.

Kristina Robinson: 00:50:13.714 Okay. So alerts and notifications a whole another ball of wax. And we are in the process of completely - we’re looking at the whole alerts and notifications. So you want to be able to alert on one data set and then take an action on a separate data set? I believe that was being asked? [crosstalk] -?

Caitlin Croft: 00:50:38.905 Yes. Yeah. They replied with yes.

Kristina Robinson: 00:50:43.520 Okay. So I’m going to have to answer that one offline. It’s a pretty complicated answer. But basically, when you go into your tasks, you would have to build your first piece of the task. You could build your dashboard on the first data set. You save that as a task. Then, look at your second data set that you want to do information on and you save that as a task. Then, you can go in and edit the task, and you can combine pieces of the two separate tasks. And that’s the easiest way to do it if you don’t want to write a lot of raw flux yourself. So saving them as two different tasks. When you go into the Explore, and you say, “This is my first -“ let’s say I want my first data set to be under-sampled, and I submit this, and I get some kind of data set, and then I can do Save As and create a task and give it a name. And then I say, “I want to go over to this different bucket, called SpeedTest downsampled, and call that and submit that and I can a different data set and I save that as a task. Now, once I do that, I can then go into the task menu, and I’ll have two separate tasks that will have the Flux dealing with the two different data sets. And that’s the best way to work with two separate data sets, is to have the raw Flux, to begin with, kind of created for you in the dashboard. And then you can say, “Okay. I want to do a task.” Whether it’s an alert, a dead man, a threshold. And then once that happens, then perform the following notification and here you have the second flux. So that’s kind of a nutshell.

Caitlin Croft: 00:52:30.038 Awesome. So someone also asked if the recording is going to be available? Yes, it will be made available later today. So you’ll just be able to go and check where you registered for the webinar and the recording will be there later today. Is server-side rendering on the roadmap?

Kristina Robinson: 00:52:53.209 It’s not presently, no.

Caitlin Croft: 00:52:57.332 The language you use in the query is DACs, right? I’m pretty sure it’s Flux, isn’t it?

Kristina Robinson: 00:53:04.264 Flux. It’s Flux.

Caitlin Croft: 00:53:05.163 Yeah. Okay. Yeah. Awesome. [crosstalk].

Kristina Robinson: 00:53:08.783 Well, yeah, Giraffe does support InfluxQL as well. Meaning, you can write in InfluxQL. Send that query across. So if you’re using one of the older versions of InfluxDB, you can use InfluxQL as well. But since I was using my cloud account, which is 2.0, then I was using Flux.

Caitlin Croft: 00:53:31.525 Perfect. Well, thank you so much. I think we’ve gone through everyone’s questions. So thank you, Kristina, for a fantastic presentation. So once again, the recording, as well as all the really helpful links that Kristina has provided in her slides, as well as her slides themselves, will be made available later today. So she was really awesome and provided all these really great links. So they will be made available because I know it’s kind of hard to copy those long URLs. And Josh, I will reach out to you for answering Kristina’s question first. So I’ll reach out to you and get some swag out to you. So thank you very much, everyone, for joining today’s webinar. I hope to see you on future webinars.

[/et_pb_toggle]