<center>
![g2.PNG](https://res.cloudinary.com/hpiynhbhq/image/upload/v1521033721/jm9ihxtiwng0cdwggzgi.png)
</center>

#### 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](https://github.com/antvis). 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:
<center>
![g2.PNG](https://res.cloudinary.com/hpiynhbhq/image/upload/v1521037872/nkcnj7crabbwtfhib9x5.png)
</center>
    
[Demo](https://jsfiddle.net/mervinvillaceran/dmo0bjt5/)

<br /><hr/><em>Posted on <a href="https://utopian.io/utopian-io/@gentlemanoi/tutorial-1-g2-the-grammar-of-graphics-create-bar-chart">Utopian.io -  Rewarding Open Source Contributors</a></em><hr/>