Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

jQWidgets Charts for Vue.js

DZone 's Guide to

jQWidgets Charts for Vue.js

A discussion of how developers and data scientists can use the jQWidgets library along with Vue.js to create data visualizations.

· Big Data Zone ·
Free Resource

Vue is one of most the responsive and progressive frameworks for Single Page Applications and has lightweight chart components. It has a flexible way of adding a variety of charts to web components. There are various ways to display your data in a chart. This article will go over using jQWidgets chart components in Vue.

Vue Installation

We need node.js v=> 8 to install the Vue CLI. Check the node version by node –v. If you need it, 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, use the below command:

npm i -g @vue/cli

To create a Vue project using CLI, type in the below Vue CLI commands:

Vue create jqwidgets-vue-cli-app

npm install jqwidgets-scripts –-save--dev

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

npm run serve

Our project will run at localhost:8080.

Folder Structure of a Vue Project

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

Folder Structure of a Vue Project

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

{  
  "name": "vue",  
  "version": "0.1.0",  
  "private": true,  
  "scripts": {    
    "start": "vue-cli-service serve",    
    "build": "vue-cli-service build",    
     "lint": "vue-cli-service lint"  
  },  
  {
  "dependencies": {
    "jqwidgets-scripts": "~6.1.0",
    "vue": "^2.5.16"
  },
  "devDependencies": {    
    "@vue/cli-plugin-babel": "^3.0.0-beta.9",    
    "@vue/cli-plugin-eslint": "^3.0.0-beta.9",    
    "@vue/cli-service": "^3.0.0-beta.9",    
    "vue-template-compiler": "^2.5.13"  
    },  
    "babel": {    
    "presets": [ "@vue/app"    ]  },  
    "eslintConfig": {    
    "root": true,    
    "extends": [      
    "plugin:vue/essential",      
    "eslint:recommended" ]  
    },  
    "postcss": { 
    "plugins": { "autoprefixer": {} }  
    },  
    "browserslist": ["> 1%", "last 2 versions", "not ie <= 8" ]
  }

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

Creating a Simple Chart Application

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

<script>
import JqxChart from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue';
</script>

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

components: {
            JqxChart
        },

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

<template>
    <JqxChart style="width: 850px; height: 500px"
        :title="'Fitness and exercise weekly scorecard'"
        :description="'Time spent in vigorous exercise by activity'"
        :showLegend="true" :enableAnimations="true" :padding="padding"
        :titlePadding="titlePadding" :source="sampleData" :xAxis="xAxis"
        :valueAxis="valueAxis" :seriesGroups="seriesGroups" :colorScheme="'scheme05'">
    </JqxChart>
</template>

Setting Chart Properties

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

data: function () {
return {
sampleData: [
// SET SAMPLE DATA
                ],
          padding: { left: 10, top: 10, right: 15, bottom: 10 },
          titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
          xAxis: {
                    dataField: 'Day',
                    unitInterval: 1,
                    tickMarks: { visible: true, interval: 1 },
                    gridLinesInterval: { visible: true, interval: 1 },
                    valuesOnTicks: false,
                    padding: { bottom: 10 }
          },
          valueAxis: {
                    unitInterval: 10,
                    minValue: 0,
                    maxValue: 50,
                    title: { text: 'Time in minutes<br><br>' },
                    labels: { horizontalAlignment: 'right' }
          },
//…

For the data to be set dynamically, use url: field. Also, we can set the data type; in this example, we're using JSON.

url: "GetData/ItemsList.txt"
datatype: "JSON"

Setting Chart Series

Charts types and their properties are set in seriesGroup, e.g. a line series or bubble series, as shown below:

seriesGroups: [{
    type: 'line',
    series: [{
            dataField: 'Swimming',
            symbolType: 'square',
            labels: {
                visible: true,
                backgroundColor: '#FEFEFE',
                backgroundOpacity: 0.2,
                borderColor: '#7FC4EF',
                borderOpacity: 0.7,
                padding: {
                    left: 5,
                    right: 5,
                    top: 0,
                    bottom: 0
                }
            }
        },
        {
            dataField: 'Running',
            symbolType: 'square',
            labels: {
                visible: true,
                backgroundColor: '#FEFEFE',
                backgroundOpacity: 0.2,
                borderColor: '#7FC4EF',
                borderOpacity: 0.7,
                padding: {
                    left: 5,
                    right: 5,
                    top: 0,
                    bottom: 0
                }
            }
        }
    ]
}]

After this is done, to view the chart on the page, run the Vue CLI development server, and go to localhost:8080. To do so, run the below command again:

npm run serve

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

Data visualization

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

Column and Bar Series

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

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

  • Stacked Column Series: To show the data in stacked columns, set the series type to “stackedcolumn.”

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

  • Column Range: We can set the columns in the range of x/y axis. Below is an example of seriesGroups with a series type of columnrange and a spline.

Image title

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.

Waterfall Series

This is used to display the cumulative effect of sequential data. 

Waterfall Series

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 Chart

Funnel and Pyramid Series

These are basically column charts with a series type as the column. To define the funnel or pyramid shapes, thecolumnsTopWidthPercentage and columnsBottomWidthPercentage settings are used.

seriesGroups: [{
    type: 'column',
    columnsGapPercent: 20,
    seriesGapPercent: 20,
    columnsTopWidthPercent: 100,
    columnsBottomWidthPercent: 30,
    series: [{
            dataField: 'SerieA',
            displayText: 'Serie A',
            labels: {
                visible: true
            }
        },
        {
            dataField: 'SerieB',
            displayText: 'Serie B',
            labels: {
                visible: true
            }
        },
        {
            dataField: 'SerieC',
            displayText: 'Serie C',
            labels: {
                visible: true
            }
        }
    ]
}]

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 a 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. Logarithmicaxis: Axis value can be set in terms of log base by setting the property of logarithmicScale as true and logarithmicScaleBase with 10 or 2.

  3. Liveupdates: 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 Charts 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.

Topics:
javascript ,jqwidgets ,big data ,data visualization ,vue.js tutorial

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}