DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports
Events Video Library
Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
View Events Video Library
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Integrating PostgreSQL Databases with ANF: Join this workshop to learn how to create a PostgreSQL server using Instaclustr’s managed service

Mobile Database Essentials: Assess data needs, storage requirements, and more when leveraging databases for cloud and edge applications.

Monitoring and Observability for LLMs: Datadog and Google Cloud discuss how to achieve optimal AI model performance.

Automated Testing: The latest on architecture, TDD, and the benefits of AI and low-code tools.

Related

  • Chart.js Line Chart Tutorial: Visualize Route Elevation Data
  • Using Technical Analysis Indicators to Send Buy-or-Sell Trading Signals to a Chatroom
  • Create Charts in an Angular 7 Application Using Chart.js
  • Create Charts in ReactJS Using Chart.js

Trending

  • Multi-Tenancy With Keycloak, Angular, and SpringBoot
  • Running End-To-End Tests in GitHub Actions
  • Demystifying Enterprise Integration Patterns: Bridging the Gap Between Systems
  • How to Configure Istio, Prometheus and Grafana for Monitoring
  1. DZone
  2. Data Engineering
  3. Data
  4. Cube.js and Chart.js Example With Dynamic Dataset

Cube.js and Chart.js Example With Dynamic Dataset

Cube it up. Get started with creating dynamic visualizations with Cube.js.

Artyom Keydunov user avatar by
Artyom Keydunov
·
Oct. 04, 19 · Tutorial
Like (5)
Save
Tweet
Share
20.97K Views

Join the DZone community and get the full member experience.

Join For Free

white-cement-cubes

6a^2 boi

I've already covered building a static dashboard with Cube.js and Chart.js in this tutorial. Now, I’m going to show you how to dynamically change the underlying chart’s data based on the user’s input. We’ll let the user pick a date range and, based on that, reload the chart. When a user picks a new set of dates, a new request will be sent to the Cube.js server. The Cube.js server will generate new SQL code, execute it against the database, and send the result back to the client. And finally, the client re-renders a chart with the new data.

Here is a Codesandbox demo of what we are going to build. You can click Open in Editor to check the source code.

Codesandbox demo
You may also like: Cube.js: Ultimate Guide to the Open-Source Dashboard Framework.

Setting up a Backend

We are going to use our sample e-commerce Postgres dataset. Use the following commands to download it and import it into the ecom database.

$ curl http://cube.dev/downloads/ecom-dump.sql > ecom-dump.sql
$ createdb ecom
$ psql --dbname ecom -f ecom-dump.sql


Next, install Cube.js CLI if you don’t have it already and generate a new application.

$ npm install -g cubejs-cli
$ cubejs create chartjs-dynamic-data -d postgres


Cube.js uses environment variables for configuration. To configure the connection to our database, we need to specify the database type and name. In the Cube.js project folder, replace the contents of the .env file with the following:

CUBEJS_API_SECRET=SECRET
CUBEJS_DB_TYPE=postgres
CUBEJS_DB_NAME=ecom


Now, start the development server and open the localhost:4000 in your browser.

$ npm run dev


You can generate a schema for the tables in the ecom database under the Schema tab. We’re going to use data from only one table — orders. Once you generate this schema, you can play around with the data in the Explore section.

Selecting data in the Explore section

Selecting data in the Explore section

There are multiple ways to deploy Cube.js: Docker, serverless, and Heroku. You can read about all of them here. In this tutorial, we are going to use the Cube.js application deployed to Heroku here.

Simple Chart

We’ll build our frontend on the Codesandox for simplicity. It will load the data from the Cube.js backend deployed on Heroku. You can check out the final source code and the demo app here. Feel free to fork it and play around.

We are using the Vanilla template from Codesanbox and are not going to add any framework, such as React or Vue, to keep things simple. The first step is to include the Cube.js client and Chart.js libraries. Insert the following code inside the <head> tag.

<script src="https://unpkg.com/@cubejs-client/core@0.10.16/dist/cubejs-client-core.umd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>


To initialize the Cube.js client, you need to pass an API URL along with the Secret.

const cubejsApi = cubejs(
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.e30.K9PiJkjegbhnw4Ca5pPlkTmZihoOm42w8bja9Qs2qJg",
  { apiUrl: "https://cubejs-ecom.herokuapp.com/cubejs-api/v1" }
);


Once the client is initialized, we can request data from the backend and visualize it. The load function accepts a query, which is a plain javascript object, and returns a promise. You can learn more about the query format here.

cubejsApi
    .load({
      measures: ["Orders.count"],
      timeDimensions: [
        {
          dimension: "Orders.createdAt",
          granularity: `day`,
          dateRange: [`08/01/2019`,`09/01/2019`]
        }
      ]
    })
    .then(resultSet => {
      new Chart(document.getElementById("chart"), {
        type: "line",
        options: options,
        data: chartJsData(resultSet)
      });
    });


We are loading Orders.count, which is grouped by the created day to plot as a line chart. To make this code work, we need to make a couple of things. First, add the <canvas> tag to the inside of your html <body>.

<canvas id="chart-canvas"></canvas>


Next, we need to define a chartJsData function, which should accept a resultSet returned from Cube.js and format it for Chart.js.

var chartJsData = function(resultSet) {
  return {
    datasets: [
      {
        label: "Orders Count",
        data: resultSet.chartPivot().map(function(r) {
          return r["Orders.count"];
        }),
        backgroundColor: "rgb(255, 99, 132)"
      }
    ],
    labels: resultSet.categories().map(function(c) {
      return c.x;
    })
  };
};

Lastly, we are declaring some additional Chart.js options for nice axes formatting.

var options = {
  scales: {
    xAxes: [
      {
        type: "time",
        time: {
          displayFormats: {
            hour: "MMM DD"
          },
          tooltipFormat: "MMM D"
        }
      }
    ],
    yAxes: [
      {
        ticks: {
          beginAtZero: true
        }
      }
    ]
  }
};


That is all we need to load a static line chart. Next, we’re going to add a date range picker and load data dynamically based on the date range selected by the user.

Dynamic Data

Add Jquery, Date Range Picker, and Moment.js libraries to your <head> tag.

<script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css"/>


Next, let’s wrap the code to render a chart into the drawChart function, which is going to accept two arguments: start date and end date.

var drawChart = function(startDate, endDate) {
  cubejsApi
    .load({
      measures: ["Orders.count"],
      timeDimensions: [
        {
          dimension: "Orders.createdAt",
          granularity: `day`,
          dateRange: [startDate, endDate]
        }
      ]
    })
    .then(resultSet => {
      if (window.chart) {
        window.chart.data = data;
        window.chart.update();
      } else {
        window.chart = new Chart(document.getElementById("chart-canvas"), 
        {
          type: "line",
          options: options,
          data: data
        });
      }
    });
};


Besides making the dateRange dynamic, we’re also saving the current chart into windows.chart so we can update it later when we need to re-render the chart.

Finally, we can add an input to our html body and make it a date range picker:

<input name="dates" />


const START_DATE = "08/01/2019";
const END_DATE = "09/01/2019";

$('input[name="dates"]').daterangepicker(
  {
    startDate: START_DATE,
    endDate: END_DATE
  },
  function(start, end) {
    drawChart(start, end);
  }
);
drawChart(START_DATE, END_DATE);


That is it! Now we have a fully working dynamic and interactive chart. You can select different dates from the date picker and see how the chart is changing.

Final product!

If you have any questions about this tutorial or about Cube.js in general—feel free to ping me in the Slack Cube.js Community.


Further Reading

  • Test Automation Analytics Using Cube.js.
  • High Performance Data Analytics With Cube.js Pre-Aggregations.
  • Designing Better Dashboards for Your Data.



If you enjoyed this article and want to learn more about GraphQL, check out this collection of tutorials and articles on all things GraphQL.

Chart.js Database Data (computing) Chart

Opinions expressed by DZone contributors are their own.

Related

  • Chart.js Line Chart Tutorial: Visualize Route Elevation Data
  • Using Technical Analysis Indicators to Send Buy-or-Sell Trading Signals to a Chatroom
  • Create Charts in an Angular 7 Application Using Chart.js
  • Create Charts in ReactJS Using Chart.js

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends: