Connecting Data to a Data Visualization Dashboard with Vue

This is a continuation article in a series of data visualization examples utilizing the JavaScript framework Vue.js, ZingChart and ZingGrid. We highly recommend starting from the first article to follow along more easily.

In our previous article, we walked through an example of how to create a data visualization dashboard with ZingChart and ZingGrid. We’re continuing this example by connecting our dashboard to real data, and handing the data management and fetching from the server to ZingGrid.

If you’d like to follow along, a finished example from our last article is the best place to start. You can grab that code from the Github repository under the part-2-complete branch: https://github.com/zingsoftinc/vue-dashboard

Creating a REST API for our dataset

We’ll start by creating a REST API server to host our transactions data. We recommend using json-server to quickly deploy endpoints in less than a minute flat!

First install the JSON server via NPM:

$ npm install -g json-server

We can then run the server directly from our transactions.json
file with:

json-server --watch /path/tp/transactions.json

We can see if the endpoint is working by making a GET call to http://localhost:3000/transactions to obtain a full list of our data.

Utilizing ZingGrid to manage the data

In the previous article of this series, we handled data flow from the App.vue down to each component, and obtained the data from a single file.

Diagram of data flow from the App.vue down to each component

In this article, we’re utilizing ZingGrid’s REST API feature to obtain our dataset from a remote data source. We’ll then communicate the data to all other components on the page, via the main parent App.vue.

Diagram of data flow from the App.vue using a REST API

Connecting ZingGrid to a remote data source

ZingGrid works out of the box with most REST API endpoints. We simply configure our data with zg-data and zg-param components.

<zg-data>
 <zg-param name="src" value="'http://localhost:3000/transactions"></zg-param>
 <zg-param name="searchKey" value="search"></zg-param>
 <zg-param name="loadByPage" value="true"></zg-param>
</zg-data>

Let’s breakdown each zg-param attribute:

• src — the location of the REST API endpoint where our data resides.

• searchKey — when using the built-in search functionality on ZingGrid, we specify the query parameter needed to search in the REST API. In our example, json-server has the query parameter of search.

• loadByPage - Load by page enables paginated queries on your REST API. This helps reduce the amount of data being transferred by only requesting what is in view. Suppose /transactions has a total of 2000 entries, and ZingGrid has a paginated view of 10 entries. Without loadByPage, we would be downloading all 2000 entries initially, instead of the 10 that are just in view!

Connecting our calendar filter to ZingGrid

In order to utilize an external component to handle our data in conjunction with ZingGrid, we need to be a little creative.

First we pass the start and end dates from our calendar to ZingGrid in our App.vue file.

<v-date-picker mode="range" v-model="range"/>
<transaction-details-grid :start="range.start" :end="range.end" />

In our TransactionDetailsGrid, we create a new computed property queryString to reflect a query string with timestamp values, to be appended to our ZingGrid’s data component.

json-server has equality operations built in the REST API. For our calendar, we want to create a date range around each timestamp.

computed: {
  queryString() {
    return `timestamp_lte=${this.end.getTime()}&timestamp_gte=${this.start.getTime()}`;
    }
  }

Finally, we modify our src being passed to ZingGrid, and append our queryString value to it.

<zg-param name="src" :value="'http://localhost:3000/transactions?' + queryString"></zg-param>

Now every time our calendar date-range is updated, ZingGrid re-fetches the data!

Connecting our charts to our data

We now need to connect the data obtained from ZingGrid to our charts.

We hook into ZingGrid’s event system to notify our Vue application when data changes, is filtered, or is searched upon.

We attach event listeners to ZingGrid, and pass a localized callback to emit an event back up to App.vue.

const getData = () => {
  const data = this.$refs.myGrid.getData({
    rows: 'visible'
  });
  return this.$emit('ondatachange', data);
};

this.$refs.myGrid.addEventListener('data:load', getData);
this.$refs.myGrid.addEventListener('grid:search', getData);
this.$refs.myGrid.addEventListener('grid:filter', getData);

Back up in App.vue, we listen for the ondatachange in our TransactionDetailsGrid, and update our local transactions data.

<transaction-details-grid
 :start="range.start"
 :end="range.end"
 @mouseover="handleEntryHover"
 @ondatachange="updateData" />
updateData(data) {
 // We perform a copy of our data so we can modify it locally.
 this.transactions = JSON.parse(JSON.stringify(data));
},

https://glitch.com/~vue-dashboard-live-data

Our dashboard should be fully functional, with our new remote dataset! Note that filtering and searching in ZingGrid also modify the state of the charts and what values are being represented. This allows for powerful data exploration with ZingGrid and ZingChart, with the ability to sift through large sets of data. You can view the finished product here: https://glitch.com/~vue-dashboard-live-data

That concludes our series for how to create a data visualization dashboard with Vue! If you’d like to see more Vue data visualization content, feel free to ask away in the comments!

A pioneer in the world of data visualization, ZingChart is a powerful Javascript library built with big data in mind. With over 35 chart types and easy integration with your development stack, ZingChart allows you to create interactive and responsive charts with ease.