Visualizing Time-Series Data with ECharts and InfluxDB
How to set up a basic React app, query data from InfluxDB Cloud and use the queried data to populate results using Apache ECharts.
Jul 12th, 2022 4:00am by
Feature image via Pixabay.
InfluxData sponsored this post.
Kovid Rathee
Kovid is a data and infrastructure engineer working as a senior consultant at Servian in Melbourne, Australia. Previously he worked as an assistant professor at an engineering college and as a full-stack developer before moving into the data space, where he has been working for the past eight years. He enjoys writing about data engineering, infrastructure-as-code, DevOps and site reliability engineering.
What Is InfluxDB?
As mentioned above, InfluxDB has a set of features with official client libraries for the most popular languages and frameworks. You can query your data using well-designed and mature query languages, like InfluxQL and Flux. However, the fastest way to ingest data into InfluxDB is the lightweight, text-based protocol InfluxDB Line Protocol.
InfluxData is the creator of InfluxDB, the leading time series platform. More than 1,900 customers use InfluxDB to collect, store, and analyze all time series data at any scale. Developers can query and analyze their time-stamped data to predict, respond, and adapt in real-time.
Learn More
The latest from InfluxData
What Is Apache ECharts?
Apache ECharts is an open source JavaScript library based on zrender. It allows you to render a wide variety of charts using progressive rendering and stream loading. You can render your charts either in Canvas or SVG formats. Apache ECharts is especially known for its low memory footprint, making it a great choice for mobile apps.Setting up InfluxDB
Creating a free InfluxDB Cloud account is simple. You can either sign up for an account with an email and password pair, or you can use Google or Microsoft Single Sign-On (SSO):
Create a Bucket
Once you’ve logged into your cloud account using the login method of your choice, you need to create a bucket with some sample data. Click on Create Bucket on the right-hand side of the console, and you’ll see the following pop-up prompting you to assign a name to the bucket:
Import Sample Data
This tutorial uses a dataset that captures a five-minute average memory usage for five instances over a few hours. You can find all of the data for this tutorial in this GitHub repository, or you can get the sample data and paste it into the text box that opens once you click the Enter Manually option. Alternatively, you can upload a file with data stored in the InfluxDB Line Protocol format.
Click the Write Data button after pasting the data to be uploaded using the Line Protocol method in the following window:
As mentioned previously, the dataset contains memory usage data for five instances averaged over five minutes for the duration of a few hours. The raw data will look something like the following in InfluxDB Line Protocol:
`mem,host=host5 used_percent=8.22 1650881400
mem,host=host5 used_percent=1.7 1650911400
mem,host=host5 used_percent=7.36 1650941400
mem,host=host5 used_percent=6.82 1650971400`
Create a New API Token
Now, navigate to the API Tokens tab, and create an API token so that you can access the data from your app. Then, you’ll be prompted with the API token, as shown here:
Store the token in a config file since you won’t be able to view the token again. If you do end up losing this information, you can request a new token later on in the process.
In a production setting, you would be better off rotating the tokens every now and then. You can use a tool like Vault for that purpose.
Clone the GitHub Repository
After loading the data and creating the token, you’re ready to connect with the InfluxDB Cloud database. To connect, clone the GitHub repository:git clone https://github.com/kovid-r/influxdb-echarts-react
Before installing the Node.js application, you’ll need to change the following variables in the src/App.js file:
`const token = INFLUXDB_API_TOKEN;
const org = INFLUXDB_ORGANIZATION;
const url = INFLUXDB_URL;
const bucket = INFLUXDB_BUCKET;`
You can find the name of the organization for the INFLUXDB_ORGANIZATION variable and the cluster URL for the INFLUXDB_URL variable under the Name and Cluster URL sections respectively in your organization settings, as shown in the image below:
To retrieve the name of the bucket, navigate to Load Data in the left panel and click on Buckets and InfluxDB will list all the buckets in your organization:
Using ECharts with InfluxDB
The React app in the GitHub repository uses the following dependencies to enable you to work with InfluxDB and Apache ECharts together:- ECharts for React: a npm package that interacts with the ECharts native library.
- Reactive Extensions Library for JavaScript (RxJS): enables reactive programming using observables. This makes it easier to write asynchronous or callback-based code.
- Node.js client library: for InfluxDB along with the Flux query language.
// fetches all the data in the influxdb-echarts-react bucket
const fluxQuery = `from(bucket: "influxdb-echarts-react")|> range(start: 0)`;
// function that uses RxJS Observables to get a stream of data from InfluxDB
functionfetchData() {
queryApi.queryRows(fluxQuery, {
next: (row, tableMeta) => {
const o = tableMeta.toObject(row);
setChartData((v) => [...v, o]);
},
error: (error) => {
window.console.error(error);
window.console.log('\nFinished ERROR');
},
complete: () => { setCompleted(true);
window.console.log('\nFinished SUCCESS');
},
});
}
package.json file resides. This file will help you with installing all the above-mentioned dependencies when you use the Node.js package manager to install your app. Using npm ci, perform a clean install and start your application using the following commands:
npm ci && npm start
After a couple of seconds, you’ll be able to see the following message on your terminal screen:
Once the installation is complete, log onto localhost:3000 to view two out-of-the-box charts that you’ll learn about in the next section. Feel free to play around with the app by loading your own sample data and changing the chart types.
Plotting the Data on ECharts
In Apache ECharts, there are hundreds of charts that you can explore, but this tutorial focuses on two of those: multiline charts and bar charts. Apache ECharts also provides you with an in-browser option preview section where you can try out other things before making them a part of your app. A line chart is a chart with multiple lines, each representing average memory usage at fixed intervals for one of the five instances in the sample data. A bar chart consists of data for only one instance, showing average memory usage at fixed intervals.Multiline Chart
A multiline chart plots the memory usage of all five instances simultaneously. The five different colors here have been populated using a color palette. If you don’t specify colors, Apache ECharts will color the default values for you.
Following is the function that’s responsible for generating this chart:
function Chart({ chartData })
{ return (
<> <ReactECharts
option = {{
title: {
text: 'Line Chart for All Hosts from 1 to 5'
},
color: colorPalette,
tooltip: {
trigger: 'axis'
},
grid: { left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: { type: 'category',
boundaryGap: false,
data: arr
}
yAxis: {
type: 'value'
},
series: [
{ name: 'Host 1',
type: 'line',
data: chartData.filter(function (chartData) {
return chartData.host === "host1"; }).map((val) => val._value)
},
{ name: 'Host 2',
type: 'line',
data: chartData.filter(function (chartData) {
return chartData.host === "host2"; }).map((val) => val._value)
},
{ name: 'Host 3',
type: 'line',
data: chartData.filter(function (chartData) {
return chartData.host === "host3"; }).map((val) => val._value)
},
{ name: 'Host 4',
type: 'line',
data: chartData.filter(function (chartData) {
return chartData.host === "host4"; }).map((val) => val._value)
},
{ name: 'Host 5',
type: 'line',
data: chartData.filter(function (chartData) {
return chartData.host === "host5"; }).map((val) => val._value)
}
]
}}
/>
</>
);
}
Bar Chart
In this example, the bar chart plots the memory usage of one of the host machines, Host 2. As you can see in the sample data and the image below, the range of memory usage for Host 2 is between ~45 and ~65, and the chart automatically resizes to a range of 0 to 70.
The code for both the line and the bar chart goes in the same function, which has the following general structure:
function Chart({ chartData }) {
return (
<>
<ReactECharts
// code for line chart
/>
<ReactECharts
// code for bar chart
/>
</>
);
}
Conclusion
Often combined, search, aggregation and visualization are crucial for getting the most out of time-series data. Charting and graphing are pivotal to any time-series data analysis use case. Apache ECharts provides you with a simple and efficient way to plot charts and graphs.
InfluxData is the creator of InfluxDB, the leading time series platform. More than 1,900 customers use InfluxDB to collect, store, and analyze all time series data at any scale. Developers can query and analyze their time-stamped data to predict, respond, and adapt in real-time.
Learn More
The latest from InfluxData
YOUTUBE.COM/THENEWSTACK
Tech moves fast, don't miss an episode. Subscribe to our YouTube
channel to stream all our podcasts, interviews, demos, and more.
