GoogleCharts Renderer

• Download demo - 110.3 KB
• Download source - 4.3 KB

Introduction

Google has developed a very powerful tool for charts which has around 28 chart types included in it. But to implement those charts in your application, you need to understand the coding standards and follow the same in your application code. But let's suppose if you have multiple charts to be implemented on your page, then you will have to rewrite the same lines of code for count of charts.

Background

Google charts work with DaTaTable Format so we need to provide data in the same format and that is mandatory, but what if you want to pass your data as it is, without any variation? So for easy development and implementation purposes, I have developed one library module where we just need to set some options and we are done.

Apart from this, I have developed one more module where we can generate configuration settings for any chart among available charts from Google charts gallery. So with few clicks, we can play and fine tune the chart settings and make our chart very customizable.

Key Features

• Easy to implement Google charts
• No need to go through Google charts all JavaScript code
• Implement Google chart with some easy steps
• Switch your chart by just changing options
• Convert your raw JSON data into google chart DataTable*

How It Works

This library module internally follows all steps of Google chart JavaScript code, so it's nothing but one JavaScript wrapper library which has encapsulated all complex code and gives you very simple options to implement complex code easily.

Properties and Functions

Google chart draw charts on the basis of options which we passes along with data where data can be either in JSON format or Google DaTaTable Format, but configuration settings are in the form of JSON only. (@Note: here, my GoogleChart Configuration generator comes into the picture. Just copy configuration which you have generated from my configuration generator module and pass it to this property, and that's it.)

// <field name='options' type='Object'>
// This will contains Settings for Chart.
// Default: {};
// </field>
_Scope.options = null;

Any Google Chart needs data in their own DaTaTable Format, we usually have our own customized JSON format either in case of returning from any API or from any Method. So in this case, we don't need to be concerned about what our JSON data format is, just pass it to this option, it has been handled inside plugin.

// <field name='data' type='Object'>
// This will contains your raw JSON Data of key-value pair.
// Default: {};
// </field>
_Scope.data = null;

Among your RAW JSON data, if your have huge numbers of key-value pair JSON, but among those if you want to use only some pairs to be included while drawing the chart, then you just need to pass those columns names or Key names in array format to this option. This option will segregate only mentioned columns names or key names from your RAW JSON data and convert it into Google DaTaTable Format.

// <field name='SelectColumns' type='Object'>
// This will contains Array of Column Names
// which will be use from your raw JSON data
// to draw google chart.
// Default: [];
// </field>
_Scope.SelectColumns = [];

Sometimes, if you want to pass Google Datatable Format directly, you can pass it here. if you will pass RAW JSON data, then it's automatically converted into DataTables inside plugin.

// <field name='DataTable' type='Object'>
// This will contains google Visualization DataTable data.
// Default: {};
// </field>
_Scope.DataTable = null;

Library always expects RAW JSON data. so every time it converts raw json data into Google Datatables Format. But in case you are passing Google Datatables directly, then you need to tell the plugin explicitly to By-Pass conversion process, as require data format is going to pass directly.

// <field name='ByPassConvertToDataTable' type='Object'>
// This will contains google Visualization DataTable data.
// Default: {};
// </field>
_Scope.ByPassConvertToDataTable = null;

There are more than 20 different types of Google charts, among those, which chart you want to draw, this you need to specify here.

// <field name='type' type='String'>
// This will contains chart type.
// (Chose from "ChartType" Enum).
// Default: ChartType.Table;
// </field>
_Scope.type = "";

In Google chart, we need to pass HTMLElement ID inside which, Google chart tool will render the chart or draw the chart, so we need to specify any existing HTML Element ID from our page where chart will be drawn.

// <field name='HTMLElementId' type='String'>
// This will contains Id of targeted HTML Element
// Default: body;
// </field>
_Scope.HTMLElementId = "";

If you want to call any callback function after chart gets drawn, then you just need to pass your callback function name in this option. Your function gets called as soon as your chart gets drawn.

// <field name='fnCallBackAfterDraw' type='Object'>
// This will contains callback function which will call after draw chart
// Default: null;
// </field>
_Scope.fnCallBackAfterDraw = null;

This is a very basic non-mandatory option (it's already there in Google charts settings generator), but still you can use it if you are not going to pass any customized configuration settings and if you want to draw default Google chart.

// <field name='height' type='String'>
// This will contains height in Number or String format.
// e.g. Number 300 will appear 300px height
// String '30%' will appear 30% height
// Default: 500px;
// </field>
_Scope.height = "";

This is a very basic non-mandatory option (it's already there in Google charts settings generator), but still you can use it if you are not going to pass any customized configuration settings and if you want to draw default Google chart.

// <field name='width' type='Number'>
// This will contains height in Number or String format.
// e.g. Number 300 will appear 300px width
// String '30%' will appear 30% width
// Default: 500px;
// </field>
_Scope.width = "";

How to Install this Library in Your Page

1. Add GoogleChart Loader Script in your page:
   JavaScript

   //<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   

2. Add my GoogleChart.js library in your page:
   JavaScript

   //<script type="text/javascript" src="js/GoogleChart.js"></script>
   

3. Add below code as per your convenience:
   JavaScript

   // Initialize Google chart class
   var ObjGoogleCharts = new GoogleCharts(); //mandatory
   
   // create an object of class settings
   var Settings = new ObjGoogleCharts.oSetting(); //mandatory
   
   // Set your chart type
   Settings.type = 'PieChart';//mandatory
   
   // your RAW Json Data
   Settings.data = data;//mandatory
   
   // if u are passing Google Datatable directly then bypass google Datatables Conversion process
   Settings.ByPassConvertToDataTable = true; //optional
   
   // pass google Datatable format Directly
   Settings.DataTable = data; //optional
   
   // Chart going to Draw inside this HTML element
   Settings.HTMLElementId = 'Your-HTML-Element-Id'; //mandatory
   
   // pass your settings to this public function fnDrawChart to Draw Google Chart
   ObjGoogleCharts.fnDrawChart(Settings); //mandatory
   

and it's done. Hurrayyyyyy...

Some Features are on the Road Map

• Drill down functionality
• Callback feature on drill down events
• Return data to drill down event from selected chart area