In today’s world, decisions are driven by data. Data is the new oil, and it’s evident the role that data plays in the world today.

However, data alone doesn’t do us much good. Insight is the real tool. The ability to quickly generate insights from seemingly meaningless data is a skill that grows in importance every single day.

Business intelligence skills represented in professions like data science and data analysis are in high demand. As a data scientist, your job is to derive insight from data and see things most people can’t and present it in a digestible format.

That’s where charts come in.

Charts are an integral part of working with data. They help condense large amounts of data into an easy-to-understand format. The data visualizations powered by charts tend to easily display insights to someone looking at the data for the first time, as well as represent findings to others who don’t get to see the data in it’s raw form.

A problem arises when we try to automate the process of deriving insights and displaying them with charts.

For most organizations, their data is everywhere (and of course) very unique. This makes building meaningful interfaces or dashboards to represent this data cumbersome.

This is where Cube.js shines.

Cube.js is an open source analytics framework that provides visualization agnostic frontend SDKs and API backed by analytical server infrastructure. This is fancy speak for “we help you visualize data with whatever frontend framework you like and give you a robust server to support it all.”

Note: I know it says analytics only, but hey, why stop there.

In this tutorial (as the title suggests), we will be building a Nuxt.js Dashboard Application to display insights from a database with Cube.js and Highcharts.

Our finished application will look like this:

Exciting!

Have a look at the GitHub repo.

Understanding Cube.js

Cube.js is an open source modular framework to build analytical web applications. It is primarily used to build internal business intelligence tools.

The best thing about Cube.js is it’s ability to minimize developer effort when building custom and large-scale analytics features. It was built to to work with large-scale data sets and makes building analytics a delight by providing any (if not all) the required infrastructure.

Cube.js has a pretty straightforward workflow:

• Install Cube.js CLI with npm or Yarn
• Connect to Your Database
• Define Your Data Schema
• Visualize Results

We’ll cruise through each step before we can get to building our dashboard in Nuxt.

To get through the article smoothly, you will need an LTS version of Node.js — either Yarn or npm and PostgreSQL installed on your device before hand. It’s also worth mentioning that you will need to have a basic understanding of JavaScript and Vue.js.

Let’s get started.

Installing the Cube.js CLI

Run yarn global add cubejs-cli to install the Cube.js CLI. This is used for various Cube.js workflows.

Connect your database

We’re going to use a SQL data dump of World country, language, and city data for our database.

Run the following commands in your terminal do download the dump and add it to a new database you define:

createdb sample-data
curl https://raw.githubusercontent.com/malgamves/nuxt-dashboard/master/world.sql > world.sql
psql --dbname sample-data -f world.sql

We then setup a new Cube.js project with the -d flag to specify that we’re using a PostgreSQL database.

Run the following command in your terminal to do so:

cubejs create database -d postgres

When your project setup is done, a new folder called database will be created. Navigate to it and edit your .env file.

Your .env file will look like this:

CUBEJS_DB_HOST=<Host Name>
CUBEJS_DB_NAME=<Database Name>
CUBEJS_DB_USER=<Postgres User>
CUBEJS_DB_PASS=<Postgres Password>
...

if you’re working locally, CUBEJS_DB_HOST should be localhost unless you changed your config.

Similarly, CUBEJS_DB_NAME will be sample-data, as that is the new database we created from our data dump. Then, per your credentials, give CUBEJS_DB_USER and CUBEJS_DB_PASS their appropriate values.

After editing your .env file, restart your Cube.js server by running yarn dev in your terminal. You can then open up http://localhost:4000 in your browser.

Cube.js has a web app that helps us explore or data, define data schemas and model the data.

You can imagine this as some sort of sandbox to play around with possible visualizations before building out our custom ones.

Cube.js has various ways of deploying your backend. This guide is a good resource. For now, we’ll do this locally.

Define Data Schema

If you’re not already there, navigate to http://localhost:4000.

Under the Schema tab, tick all three boxes under public, click the + and then select Generate Schema.

This generates a cube.js schema to model raw data into meaningful business definitions.

All that’s left is to visualize our data now.

#nuxt #cube #highcharts #web-development #developer