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.)
_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.
_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.
_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.
_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.
_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.
_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.
_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.
_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.
_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.
_Scope.width = "";
How to Install this Library in Your Page
- Add GoogleChart Loader Script in your page:
- Add my GoogleChart.js library in your page:
- Add below code as per your convenience:
var ObjGoogleCharts = new GoogleCharts();
var Settings = new ObjGoogleCharts.oSetting();
Settings.type = 'PieChart';
Settings.data = data;
Settings.ByPassConvertToDataTable = true;
Settings.DataTable = data;
Settings.HTMLElementId = 'Your-HTML-Element-Id';
ObjGoogleCharts.fnDrawChart(Settings);
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