Google chart visualization provide multiple varieties of charts to addressing your data visualization needs. The good things about the Google chart are it had lots of customization option and also it is absolutely free to integrate and use with your web application. Google chart includes lots of inbuilt customization options, these options allow you have the better visualization. Even though it doesn’t have any Tornado chart in its library. But we can customize the google bar chart into Tornado Chart with some work around.
As I got unique requirement from one of the projects, which is a rating and review kind of stuff developed with HTML5 & Jquery for frontend and Laravel 5 & SQL for the backend services.
Mission
Here mission is to show the user’s top 3 positive & negative ratings in a single chart. That Chart contains most liked components on its right and most disliked element on its left along with its average rating and element name as a label. While creating it with the google bar chart the challenge we faced is to make positive and negative values bar at the same level as shown in the figure below.
Mission Accomplished
While implementing google bar chart with negative values it’s not displayed as expected. so we need a workaround to make the chart look like as expected. By default, it displays the chart as shown below with positive and negative values at different levels of the y axis.
Default google chart with negative values
Work Around in Google Bar Chart
To make this default bar chart to visualize like a required Tornado chart (Butterfly Chart) we need to do some work around. I will explain those option attribute added to the default chart option.
you can refer the JS part of the code snippet below in which the variable “option” inside “drawbarChart” function holds the additional options for chart visualization.
If you refer that variable in which we added the “isStacked” attribute to make the negative and positive values at the same level
isStacked: true,
we are getting data in ascending order from backend which holds smaller value at the first. But as per the requirement, we need to show the top rated value at first in the google Tornado chart. For invert the chart value we added the another attribute to the option “vAxis” object.
vAxis: {
direction: -1 ,
}
Code Snippet
See the Pen Customize Google Barchart into Tornado Chart (Butterfly Chart) by icodefy (@icodefy) on CodePen.
You can find the working code snippet above. Our comment box is open. Drop your valuable comments