Menu

30 Minutes to Build a Visualization Widget Using Vue.JS

By Vishwasrao Salunkhe | Open Web

Aug 10
VueJS Widget Building

In this blog post, we will explore the “new kid in the block” in the javascript UI framework space. We are talking about Vue.JS. VueJS provides a slightly different approach to the usual View focussed javascript UI frameworks and does seem to have a slight edge over others. In this post, we will do a quick Vue.JS tutorial and also show you how to build a Vue.JS widget using a simple visualization component.

Introduction to Vue.JS

The folks behind Vue.js call it a “Progressive Framework”.  Progressive, because it allows developers to incrementally build an application. Like ReactJS, this is also a view centric framework, but for inexperienced front end developers like me, Vue.JS offers a much smoother journey for developer adoption.

As a progressive framework, it is designed to be very developer friendly, in terms of incrementally adding features to the app and managing complexity. It follows the same components based approach as ReactJS but supports a faster and lighter virtual DOM implementation.

In this post, I will show you a glimpse of Vue.JS and take you through the steps to build a visualization widget.

Hello World from Vue.JS

Let’s first build the customary hello world app.

Before You Begin

Make sure that you have NodeJS and NPM tool installed on your system. If you are unfamiliar with NodeJS then you can check out our NodeJS Learning Guide.

I have used Ubuntu for building these demos so the steps below are applicable for most UBUNTU/Linux based distros.

Step 1 : Install Vue CLI

We will follow the CLI approach to build the project. This approach augurs well with the toolchains that are used for building production apps.

$ npm install -g vue-cli

Step 2: Scaffold the project

Using Vue CLI, we can scaffold the initial project as follows

vue init <template-name> <project-name>

You will have to select a template name

Currently available templates include:

  • webpack – A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.
  • webpack-simple – A simple Webpack + vue-loader setup for quick prototyping.
  • browserify – A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.
  • browserify-simple – A simple Browserify + vueify setup for quick prototyping.
  • pwa – PWA template for vue-cli based on the webpack template
  • simple – The simplest possible Vue setup in a single HTML file

For this example, we are going to use the webpack template.

vue init webpack hellovue

This will take you through an interactive questionnaire to setup your project folder.


Step 3: Install Node Dependencies

Change the current directory to your newly created project folder and install the node module dependencies.

cd hellovue
npm install

Step 4: Run Development Server

Once the dependencies are installed, you can now run the development server which can host the Vue.JS default landing page.

npm run dev

You can now fire up a browser with the address as localhost:8080 and see the page.


Step 5: Edit the code to change the welcome message

Check out this video to see the VueJS code structure and follow along to see how to change the default welcome message. If you have already followed the above steps then you can skip over to 2:50 to see how to edit the code and set your own welcome message.

 

Congrats ! Now you know how to launch a VueJS project and make your custom welcome screen. Next up, we will build a VueJS based visualization widget.

Building a Gauge VueJS Widget for Data Visualization

So now that you have the idea of how to build a basic VueJS application, let’s try something more interesting.

We are going to build a Vuejs widget, in the form of a cool looking gauge visualization.

VueJS Widget Gauge Visualization

This widget is part of ECharts and you can see the original demo here.

Excited to see it working under VueJS? Then let’s get started. The source code is already available on GitHub.  You can clone it and follow along the steps given below.

Step 1: Install vue-echarts

We have to first install the vue-echarts package

npm install vue-echarts-v3

Note: I am using npm 5 so no need to use option –save for your package installation anymore. For old npm use below command

npm install --save vue-echarts-v3

Step 2: Import the echarts library

Import the echarts library under Hello.vue file.

import IEcharts from 'vue-echarts-v3/src/full.vue'

Step 3: Embed IEcharts under <template> and bind the data.

You can check out the modified file from GitHub that contains the changes required to embed echarts. Pay attention to the <template> tag.


Step 4: Define the data attributes and the random number generator as a data source to update the gauge.

In the Hello.vue file, line 30 to 78 contains the additional properties defined for the chart rendering. The actual data rendered by the chart is generated via the random function (line 64 to 66).

refreshData () {
this.gauge.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
}

And the code to initialize this random data generation is defined in line 71 to 74

this.refreshData();
setInterval(function(){
this.refreshData();
}.bind(this),3000);

 


Step 5: Run the application

With all the updates saved in the file, you can now run the application.

npm run dev

Time to upskill yourself with VueJS

Here is a screen capture of the fully functioning gauge widget under VueJS.

Even though this is a randomly generated data, you can already imagine the possible scenarios where we can use this gauge. The most suitable use case could be to display an IoT sensor data.

If you are exploring VueJS for any project then please share your thoughts and let us know how you would compare it with the likes of ReactJS and others. I will be back with a few more demos very soon.

 

Follow

About the Author

Vishwas works on cutting edge, enterprise IT application development around Cloud, Java, and NodeJS. He is an open source enthusiast and loves to fiddle with some of the emerging technologies such as IoT and Blockchain.

>