jQWidgets Charts for Vue Framework
By: Shanika Wickramasinghe
Tags: JavaScript, Vuejs, Charts, Jqwidget

Currently, Vue is the most progressive framework for Single page applications. It has a flexible way of adding a variety of charts to web components. In addition to that, there are various ways to display the data in a chart. This article will give a glimpse of using jQWidgets chart component for the Vue framework.

Vue Installation:

We need node.js v=> 8 to install the Vue CLI. Check the node version by node –v else you can upgrade the node version with npm install npm@latest –g.

CLI stands for command line interface and Vue CLI Provides a full rapid Vue.js development.

To install CLI,

To create a Vue project using CLI type below in Vue CLI,

This will start the creation of the project, which will then present an option to pick default preset or manually select features. Select the features for the project manually. Once the project is created run on a server.

Our project will run at localhost:8080.

Folder Structure of Vue Project:

Once the project is created, we will have a project structure as shown below.

You can get the configuration of the package.json file from the source code below. All the needed modules are included.

After package.json is ready, type npm install in your CLI.

Creating a Simple Chart Application

To create simple chart application using jqWidget, import JqxChart in scripts of App.vue class.

Also, add JqxChart to the components section of App.vue.

Use <template> section to define chart properties. These properties define the chart style, title, axis values and legend.

Setting Chart Properties:

Set properties of <JqxChart/> component which can be defined in return object of data function.

For the data to be set dynamically use “url: field”, also set datatype if data eg: JSON

Setting Chart Series:

Charts types and their properties are set in seriesGroup. Eg: Line series or Bubble series.

After you have done these setting, to view the chart on the page, run the Vue CLI development server, and check out, localhost:8080

Using these properties and settings, we get below chart with series type line.

With the creation of this simple chart, we will take a look at different chart series and their settings.

Series like “Line and Area Series”, Column and Bar Series”, and “Scatter charts” are commonly used whereas “Pie and Donut Series”, Waterfall, “Polar and Spider Series”, etc. are used to display specific data.

Types of Chart:

1) Column and Bar Series: This is a column chart which displays the size of the measured data. According to properties and setting, we can create column series, stacked column series, 100% stacked column series and Column Range series. Here is the list of properties and their settings we can have for these series types.

a. Column Series: It is a basic column Series type column and columnSeriesOverlap options as false.

b. Stacked Column Series: To show the data in stacked columns set series type as “stackedcolumn”.

c. 100% Stacked Column Series: In this series we show the data in terms of percentage, the series type is stackcolumn100, we need to set columnGapPercentage and seriesGapPercentage.

d. Column Range: We can set the columns in the range of x/y axis, below is the example of seriesGroups with series type columnrange and with spline line.

Example of Column Range Series

Column charts have a flexible approach to set different colors for a column using conditions like setting negative values with different colors. They can also be used with a data set of missing values and series with labels.

2. Waterfall series: This is used to display the cumulative effect of sequential data. For this chart series type is set as a waterfall.

Waterfall series

3. Candlestick Chart: These are used to represent financial data, with high, low, open, and closed volumes per period. The series group type is “candlestick”. This example shows a range selector at the bottom of the chart, it sets a range of data used in the x-axis to display the candlestick series.

Candlestick series

4. Funnel and Pyramid series: These are basically column charts with series type as the column. To define the funnel or pyramid shapes, columnsTopWidthPercentage and columnsBottomWidthPercentage settings are used.

Funnel Series

Pyramid Series

Extra Features:

Vue charts can be combined with other features. Below is the list of features we can use.

1) Zooming: We have an option to create rangeSelector to select the range of x-axis to display the chart. This zooms the chart for the selected range, also the axis values are adjusted accordingly.

2) Logarithmic axis: Axis value can be set in terms of logbase by setting the property of logarithmicScale as true and logarithmicScaleBase with 10 or 2.

3) Live updates: Charts can be used in scenarios where the data keeps changing every second. We can have a mounted function to set the time interval in ms.

4) Different styles can be used to set the axis, legend, title, grid lines, etc. This enhances the chart features. Custom features can also be added using custom methods and events.

5) Charts can be printed and exported as an image and can be integrated with tabs and grids.

Summary:

jqWidgets Chart for Vue delivers advanced and customizable features for next-generation cloud enabled web application. Charts are a device, platform and browser independent with plug-in free data visualization. It supports multiple data source and handles large datasets. Various types of series are also supported. Few of them are described in this article.