Draw separate barchart for subcategories using google visualization - google-visualization

Question

I am trying to draw a bar chart using google visualization. I have 11 categories, out of those eleven categories 4 of them have subcategories. The Subcategories are different for different categories. For example:
a) Video
i. Subcategories: Netflix, YouTube, Vimeo, Vine,
DailyMotion
b) Email & Messaging
i. Subcategories: gmail, hotmail,
yahoomail
. . .
My requirement is, when onclick of one category on bar chart, the subcategories will display as another bar chart.
Can this be possible using google visualization? Please let me know.
Or is there any other way i can handel this?

Answer 1

Here is a really simple example of what you can do:
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Category', 'Value'],
['Videos', 1000],
['Mail', 1170]
]);
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
google.visualization.events.addListener(chart, 'select', function(){
var selection=chart.getSelection();
if(selection.length == 1){
var row = selection[0].row;
var col = selection[0].column;
var cat = data.getValue(row,0);
drawSubChart(cat);
}
})
chart.draw(data, {});
}
function drawSubChart(cat){
var arr = [['SubCategory', 'Value']];
if(cat == 'Videos'){
arr.push(['Youtube', 700], ['DailyMotion', 300]);
}else if(cat == 'Mail'){
arr.push(['Gmail', 600], ['Hotmail', 570]);
}
var data = google.visualization.arrayToDataTable(arr);
var chart = new google.visualization.BarChart(document.getElementById('chart_div2'));
chart.draw(data, {});
}
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>
<div id="chart_div" style="width: 500px; height: 300px;"></div>
<div id="chart_div2" style="width: 500px; height: 300px;"></div>