Today, we are going to learn how to generate the configuration of Google Charts and implement it in your chart with some easy steps.
Objective and scope of the module
Google has developed a very powerful library for charts, which has around 28 chart types; but to implement those charts in your application, you need to go through their configurations and understand each and every option. Well, this is very huge in number and now here’s the problem. If you want to apply some options on your chart, then you need to do this manually with some R&D from scratch. Google has given so many configurations per chart which we cannot go through in a shorter period of time. So, it’s a quite tedious and time-consuming process to test all those options on your chart.
And, because of the time concern, developers try to find some other chart libraries, but frankly speaking, if you ignore this time-consuming part of the implementation, you will see that you can make your chart very customizable with so many features provided by Google. We need to think in terms of implementation time also. So, let us see how we can achieve this in a shorter period of time and with some easy steps.
To skip this time-consuming and tedious process and implement any chart with some easy steps, I have developed one module using which we can achieve all this just in some clicks. With the help of my configuration generator module, we can apply any listen to options and make our chart very customizable. It makes you finalize your chart by playing with the available options and fine tuning, all you need to do is just keep applying options until you finalize your chart. That’s it.
How to use this module
Please find the video tutorial below where I have explained the demonstration of this module.
Please find the module URL
here.
Key features
- Just select chart type and then all existing options will be available for you to play with it.
- Test any option on your selected chart on the fly.
How it works
In our module, we just need to select the chart of which we want to generate the configuration JSON. Once you select it, all the existing Google Charts settings get rendered on the page with options where you can change their values and add custom values as per your choice. You can test your entered custom values on the fly. Even you can try dummy JSON data on the chart.
We will go step by step for this module.
On the top-right corner, there is a Help menu in which I have mentioned all the explanation of Google Settings Generator, though I am going to explain here too.
Once you select the Chart type from the top-right menu, it will render all the setting properties of the selected chart type in “Key - HTMLControl” format where Key will be Google Chart Settings property name and HTML control will represent any appropriate control which suits that Key. For example - Dropdown list, checkbox, color-picker, textbox, textarea with the default value of respective key. You can change values also and put your own custom values.
Beside every control, it has its proper description also in the Information icon. On mouse hover, you will get the information in a popup which has a detailed description of the respective property. After every Information icon, it has one more option - "Include" checkbox. It says that if you want to try this option, you just need to select this checkbox.
On top of all these settings, you can find "Include All" checkbox option which says that if you want to include all the setting properties into your chart, just select it. On the top menu, you will find 3 more options [Export, Apply, TryDummyData] which appear only on the selection of the chart type.
Export - To export all included properties in JSON format inside Modal Popup.
Apply - To apply all the included properties and draw a new chart with these properties (by this, you can finetune all options),
Once you are done with all the customization and fine tuning, you just need to export your finalized configuration. It will give you Google Chart settings in the JSON format. All you have to do is just copy these settings and pass it in your application under Google Charts implementation script.
It’s done.
If you have found this helpful please hit that Like button and share it on social media.