In a world where every organization has big data, a simplified approach to data analysis has never been more sought after. Thankfully, open source charting libraries like Chart.js and Apache ECharts are robust enough to handle big-data analytics. Tools like Power BI, Snowflake, and Cube also help simplify analytics by making it easier for organizations to use their data to make decisions.
In this article, you’ll learn how to use Apache ECharts, Cube, and React to build an e-commerce analytics dashboard.
On completing this tutorial, you will have built a React application that displays charts of different metrics in an e-commerce store.
The result should look like this:
What Is Apache ECharts?
ECharts is primarily used for building data applications, but it also works well for applications that require a lot of visualized data points. It’s free to use, and its source code is open source, which means it’s flexible and has longevity.
It’s also incredibly customizable by allowing color and size alteration to fit your application’s needs. However, rendering happens on the client side. So if the device that renders the chart is low on memory, the visualization will be slower. Rendering is faster if you use Google Charts, but all your data doesn’t live on your own server like it does with ECharts, which means it can be viewed by Google or any other third party.
Why Integrate with Cube?
ECharts integrates seamlessly with Cube, offering superb visualizations for data returned by Cube’s API. All you need is your data and to build a few queries and feed the resulting API through an ECharts chart.
Implementing an ECharts Dashboard with React and Cube
The following sample project has three main components:
- A relational database (PostgresSQL in this tutorial, but you can use MySQL, MongoDB, or any other database supported by Cube)
- A Cube schema
- Setting up ECharts in React
To follow along, you should have Docker installed.
Setting Up Cube
To set up Cube using Docker, change the directory into the desired location and run the following command:
This command downloads the Cube Docker image and opens port 4000 to the Cube Playground. You can navigate to localhost:4000 in your browser to see the playground.
From here, you’re supposed to select the database type and parameters This article will use a hosted Postgres database offered by Cube. Choose Postgres as the database type and use the parameters below to complete your Cube instance setup:
Generating a Data Schema with Cube
Cube comes with a schema builder that lets you build your desired queries. These queries help you ask analytical questions about your data like the following:
- How many orders were made this month?
- What’s the total number of products sold?
To proceed, select all the tables under the public schema in the Schema tab of the Cube playground.
After selecting your target tables, click the Generate Schema button. A prompt will appear letting you know that the schema files have been created, and you can start building charts.
Click on the Build button.
Overview of the Cube Playground
The Cube Playground consists of three tabs.
- The Build tab, for building charts from a data schema
- The Dashboard App tab, for viewing charts generated in the Build tab
- The Schema tab, for selecting the tables where the data will be used to build charts
The code snippet below shows a data schema for a users table. It contains a
count measure and three dimensions that correspond to columns in the users table:
Cube lets you combine measures and dimensions to ask questions like “Which companies do our users work for?”:
Or “Where are our users based?”:
Setting Up ECharts in a React Project
To set up ECharts in a React project, create a new React project in your desired directory and start the dev server using the command below.
Now, install the required dependencies:
Basic App Setup
Now that you have your dependencies in place, create the components folder using this command:
Replace the content of App.js with the following:
You don’t have to set the
REACT_APP_CUBEJS_TOKEN on your development environment as it is strictly used in production. If you do want to set it, you need to sign a JWT on https://jwt.io or using your favorite tool with the
CUBEJS_API_SECRET as the secret key. You can find the
CUBEJS_API_SECRET in the .env file of the Cube back-end set up which is automatically created by Cube.
The dashboard will contain four charts:
- An area chart containing the revenue growth over the previous year
- A line chart containing orders over the last thirty days
- A stacked bar chart containing the orders by status over time
- A bar chart containing orders by product category name
To get started creating these charts, create the necessary chart files and loader:
Add the following to
AreaChart.jsx and add the following:
The first part of the file contains a React hook that fetches data from the Cube back end as seen below:
The object within this hook can be obtained from the Cube playground as a JSON query.
The second part of
AreaChart.jsx shows the returned state being used for conditional rendering:
The third part of
AreaChart.jsx transforms the returned data to a form that the chart can render. The chart answers the question “How many users joined each year?” and the
userCreationDate will be isolated from the returned data:
Finally, the chart data and metadata are declared in an options object and fed to the ReactECharts component:
To see the chart on the browser, update the content of
App.js to include it.
Add the following content to the remaining files as specified below.
App.js to include the new charts:
Adding Interactivity to Your Dashboard
For a dashboard to be user-friendly, users should be able to sort, filter, and export data. In this section, you’ll add date filters to your stacked bar chart to add some interactivity to it.
Navigate to the
StackedBarChart.jsx component and import the following:
Then define the start date, end date, and JSON query hooks:
Afterwards, add a function that will handle updating the date:
Then update the content of
Card.Body with the following:
If you check your chart in the browser, you should be able to see the date form on the chart and be able to update the date yourself.
Apache ECharts and Cube offer a robust way of building analytics applications and dashboards. In this tutorial, you learned how to build an analytics dashboard from scratch using React, Apache ECharts, and Cube. You also learned how to add a date range form to your charts, giving you a way to filter data.
Cube is a headless API layer that connects your database through any of 3 APIs, including REST, GraphQL, and SQL, to your front-end code so you can build data applications faster. This simplifies the process of adding analytic elements to your existing applications. With Cube you can create an API layer, manage access control, aggregate data, and cache queries for increased performance and integrate Apache ECharts with ease.