Chart is a graphical representation of data. Charts can be read more quickly than the underlying data they are created from and are easy to understand. The most common type of charts are Bar Chart, Column Chart, Pie Chart and Line Chart. We are going to review each one of them here using data from MySql database. The data is received in JSON format from the Java Servlet which is our back-end and then rendered using ExtJs MVC framework of model, store, view and controller.

Ext.chart.Chart is the most important class here for rendering charts.
To display a chart you have to configure one or more series. Series are responsible for the visual representation of the data points contained in the Store. Now in the case of a Bar Chart or Line Chart you also have to define the axes. Axes are the lines that define the boundaries of the data points that a Chart can display such as horizontal "x" axis, and a vertical "y" axis.

When the data appearing in a chart contains multiple variables, the chart may include a legend. A legend contains a list of the variables appearing in the chart and an example of their appearance. This information allows the data from each variable to be identified in the chart.

To render any type of chart we need data. In these example we receive our data in JSON from from the MySQL database with the help of Java Servlets. Here is a sample JSON data used in the examples below

So let's go ahead and create the Java web service that will provide the ExtJs store with data. The data in our case is the Top 100 cities in United States by population and we fake the last year population as 85% from the current year for our demo.

Now let's move on to our front end programming. Here we create a container and then render the chart inside that. We have buttons to switch between various different types of charts such as Bar Chart, Column Chart, Pie Chart and Line chart. We have to create views for each type of chart but share the same model, store and controller.