Google Charts and Grids

Why we use charts

We use graphics and charts because they help make any data

• More effective
• Interesting
• Easy to understand
• Easy to analyze and compare

They also help one to present data in a logical and a consistent way.

E.g. consider the example of Commission earned by individuals.

• The Bar Chart below shows total commission earned by each individual. The commission amount shown here is grouped by individual
• .
  

  FIGURE 1: BAR CHART SHOWING TOTAL COMMISSION EARNED BY INDIVIDUAL

• The same data can be shown in a pie chart like below. Each pie represents the % of commission earned by an individual.
• Pie chart also provides legend for each pie as shown in the right hand section of the figure below and a tool tip representing textual data.

FIGURE 2: PIE CHART SHOWING TOTAL COMMISSION EARNED BY INDIVIDUAL

• Google Tables/ Grids provides customizable and interactive grid which has features like:
  • Columns Sorting
  • Pagination
  • Selecting rows and formatting data (currency, hyperlinks, etc.)

The figure below shows details of all commissions earned by an individual. Data is not aggregated on Individual basis.

FIGURE 3: GOOGLE GRID SHOWING COMMISSION EARNED DETAILS

Combining charts/ grids to show advanced data visualization:

• We can combine the Pie chart/ bar chart with grid to show drill down in data.
• In the below example, we have an event where a user on clicking any pie will see the details of the selected pie (a user in this case) in the grid.
• So on clicking a user say Maria Campbell on Pie chart, the grid will show details of all the commissions earned by her along with other details like Commission Paid Status (Yes/ No), Commission amount and Commission paid date, etc.

FIGURE 4: DATA DRILL DOWN USING CHARTS AND GRIDS

Google Charts Working Flow:

FIGURE 5: GOOGLE CHARTS IMPLEMENTATION FLOW

1. Client wants to visualize data in Charts/ Grids. Sends request to the application server.
2. Application server fetches data from CRM or any other Data source.
3. Application server processes the data.
   1. Convert Data to JSON format.
   2. Specify options for chart. These includes paging/ sorting/ custom formatting for Grids. Also for charts, options like x-axis details, y-axis details, legends, etc. can be specified.
4. Call Google Visualization API (JS) which will accept the data and options as specified in Step 3.
5. Google API now creates Charts/ Grids based on options and renders on the browser.

Why use Google Visualization API for Grids and Charts:

1. Very simple steps to configure Grids and Charts.
2. Wide variety of options are available for Charts: Bar charts, Area Charts, Pie charts, Tree maps, Donuts, Column charts, etc.

See the full list in details: https://developers.google.com/chart/interactive/docs/gallery

1. Google API are cross-browser compatible, with support for all major browsers as Charts use SVG for drawing.
2. Detailed documentation and examples are available
3. Biggest reason: It is free for use. Refer Terms : https://developers.google.com/terms/

For Comments: