Tutorial #4 G2 (The Grammar of Graphics)

What Will I Learn?

What is line chart
How to create line chart using g2
Example codes using g2

Requirements

Knowledge of HTML
Knowledge of JavaScript
Knowledge of Graphs

Difficulty

Intermediate

Tutorial Contents

Introduction
Import G2 js
Create line chart

Introduction

In this tutorial, we will learn how to implement or create a line chart using G2 (The Grammar of Graphics) by the AntV Team.

What is Line Chart?

Line Chart, also known as Line Graph, is a kind of chart which displays information as points connected by a line. This chart is used to display a value of something changes over time. And it is often used to visualize a trend of data over time.

Line Chart is useful because they show data and trends very clearly and help to make predictions for the future result of a data.

Import G2 js

Just like my previous tutorials, we need to import first the G2 library in our application to use the chart functionalities. To import the library please see my previous tutorial

We can also use an npm to import the library.

$ npm install @antv/g2

But in this tutorial we will just use the basic way on importing the library by using the html script tag.

Create line chart

So let's start creating our line chart!

First, we need to initialize our data that we will use in our line chart. For this tutorial, we will display an example data that shows how many new website users per year.

var chartData = [
        { year: '2014', users: 210 },
        { year: '2015', users: 196 },
        { year: '2016', users: 250 },
        { year: '2017', users: 223 },
        { year: '2018', users: 243 },
 ];

These data rows represents as the points in our line chart.

Then we will use the chart function in a G2 object from the imported library. This function initialize our chart and it is used to set the element where we want to display our chart or what we called the container of the chart. We can also set the height and the width of the chart.

The chart function will return a chart object that we can use to set other attributes of the chart.

var chart = new G2.Chart({
      container: 'canvas',
      height: 600,
      width: 600
});

container - an element that will display the chart
height - height of the chart
width - width of the chart

To display the data into our chart, we have to set the source data of the chart object by using the source function.

chart.source(chartData);

Then we have set the points of our chart using the point function of the chart object. This function will return a geometric/point object that we will use to set different attributes of a point like position, size, color, shape, etc. In this tutorial, we will just use the position, size and shape functions to display a simple point.

chart.point()
        .position('year*users')
        .size(6)
        .shape('circle');

point - used to set the point of the chart and will return a geometric/point object.
position - used to set the x and y axis of the chart. position(x-axis*y-axis)
year - attribute name of the data and this attribute will be displayed on the x-axis of the chart.
users - attribute name of the data and this attribute will be displayed on the y-axis of the chart.
size - the radius of the point
shape - the shape of the points.

Supported point shapes:
'circle', 'square', 'bowtie', 'diamond', 'hexagon', 'triangle', 'triangle-down',
'hollowCircle', 'hollowSquare', 'hollowBowtie', 'hollowDiamond',
'hollowHexagon', 'hollowTriangle', 'hollowTriangle-down',
'cross', 'tick', 'plus', 'hyphen', 'line'

Next, a line chart will not be complete without a line. So we will use the line function of the chart object to display the line that will connect the points. This function will also return a geometric/line object that is use to set some attributes of a line.

chart.line()
      .position('year*users')
      .shape('dash')
      .color('#0066e3');

line - a function used to display a line that will connect the points and will return a geometric/point object.
position - used to set the x and y axis of the chart. position(x-axis*y-axis)
year - attribute name of the data and this attribute will be displayed on the x-axis of the chart.
users - attribute name of the data and this attribute will be displayed on the y-axis of the chart.
color - the color of the line.
shape - the shape/design of the line.

Supported line shapes: 'line','smooth','dot','dash','spline'

Lastly, RENDER the line chart.

chart.render();

Result:

Demo

Curriculum

Posted on Utopian.io - Rewarding Open Source Contributors

Tutorial #4 G2 (The Grammar of Graphics) - Create Line Chart