Tutorial #1 G2 (The Grammar of Graphics)

What Will I Learn?

How to use G2 js (The grammar of graphics)
How to create bar chart using g2
Example codes using g2

Requirements

Knowledge of HTML
Knowledge of JavaScript

Difficulty

Intermediate

Tutorial Contents

Introduction
Import G2 js
Create bar chart

Introduction

G2, The Grammar of Graphics, is a data-driven visual language developed by the AntV Team. This javascript library can create different kinds of charts and graphs with a high level of usability and scalability and this will render your charts/graphs using canvas. G2 is a great tool to help developers for data visualization on their applications. In this tutorial, we will cover on how create a bar chart.

"With G2, users can describe the visual appearance of a visualization just by one statement." - AntV Team

Import

Before we can use the library, we have to import a javascript file on our application. We can just use a CDN or download the file in our local machine.

CDN: https://gw.alipayobjects.com/os/antv/assets/g2/3.0.5-beta.5/g2.min.js

Then, add the javascript file in our application using the script tag.

<script src="https://gw.alipayobjects.com/os/antv/assets/g2/3.0.5-beta.5/g2.min.js"></script>

Create Bar Chart

In this tutorial, we will create a bar chart that will display the number of users per age.

First, we need to get/initialize the data for the bar chart. For that, we will just create a sample array of users with their corresponding age.

var data = [
        {"name" : "John", "age" : 20},
        {"name" : "Mary", "age" : 23},
        {"name" : "Susan", "age" : 22},
        {"name" : "Bernard", "age" : 19},
        {"name" : "Joe", "age" : 20},
        {"name" : "Elen", "age" : 22},
        {"name" : "George", "age" : 22},
        {"name" : "Michael", "age" : 21},
];

Then, we have to group this array of users by age with a new count attribute. In this example, we will use the data-set library by AntV. But you can also use a vanilla javascript function to group the users by age.
To use the data-set library, we have to import another javascript file.

<script src="https://gw.alipayobjects.com/os/antv/assets/data-set/0.8.5/data-set.min.js"></script>

Then use the library to transform the data.

var dataSet = new DataSet();
var newData= dataSet.createView('test')
            .source(data)
            .transform({
                  as: [ 'count' ],
                  groupBy: [ 'age' ],
                  type: 'aggregate'
            });

Or you can use vanilla javascript:

var result = [];

data.forEach(function (element) {
       var existingElement = result.filter(function (item) {
              return item.age === element.age;
        })[0];

        if (existingElement) {
             existingElement.count++;
         } else {
               var newData = {
                    age : element.age,
                    count : 1
                }
                result.push(newData);
           }
});

Before we can create the chart, we have to create first an html container where we can display it.

<div id="container"></div>

Then, we can initialize/create the G2 chart.

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

After that, we have to set the data source for the chart.

chart.source(newData);

Then, we have to set the syntax for the position of the columns or what should be displayed on x and y axis of the chart.

chart.interval().position('age*count'); // (x*y)

Lastly, RENDER the bar chart.

chart.render();

Result:

Demo

Posted on Utopian.io - Rewarding Open Source Contributors

Tutorial #1 G2 (The Grammar of Graphics) - Create Bar Chart