We are new to angularjs v4. We have a requirement of drilldown charts in google charts. We are using ng2-google-charts directives. We are able to find the select event and u
Like highcharts there isn't any simple way in google charts to make drilldown. But with some tricks it is possible
<input type="button" style="width: auto !important;" value="back" id="btnBack" />
<div id="SkillBar"></div>
Take a back button and a container to draw chart. Now load your visualization library bar charts and create your bar chart
google.charts.load('current', { packages: ['corechart', 'bar'] });
google.charts.setOnLoadCallback(drawAnnotations);
function drawAnnotations() {
google.charts.setOnLoadCallback(drawSkillBar);
function drawSkillBar() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Category');
data.addColumn('number', 'Demand');
data.addColumn({ type: 'number', role: 'annotation' });
data.addColumn('number', 'Supply Overall');
data.addColumn({ type: 'number', role: 'annotation' });
data.addColumn('number', 'Bench and Buffer');
data.addColumn({ type: 'number', role: 'annotation' });
data.addRows([
['Core', 25, 25, 22, 22, 12, 12],
['Invest', 15, 15, 21, 21, 11, 11],
['Others', 10, 10, 12, 12, 9, 9]
]);
var options = {
title: '',
//hAxis: {
// title: 'Time of Day',
//},
//vAxis: {
// title: 'Rating (scale of 1-10)'
//},
is3D: true,
'height': 300,
'width': 600,
colors: ['#3366CC', '#378eb8', '#984ea3'],
legend: 'true',
//focusTarget: 'category',
animation: {
startup: true,
duration: 500,
easing: 'out'
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('SkillBar'));
Create your select handler like this
function selectHandler() {
var selectedItem = chart.getSelection()[0];
if (selectedItem && selectedItem.row != null) {
var value = data.getValue(selectedItem.row, selectedItem.column);
var column = data.getColumnLabel(selectedItem.column)
if (column.toLowerCase() == 'demand') {
$('#btnBack').removeClass('hidden');
drawDemandBar(data.getValue(selectedItem.row, 0), '#3366CC');
}
if (column.toLowerCase() == 'supply overall') {
$('#btnBack').removeClass('hidden');
drawSupplyBar(data.getValue(selectedItem.row, 0), '#378eb8');
}
if (column.toLowerCase() == 'bench and buffer') {
$('#btnBack').removeClass('hidden');
drawOthersBar(data.getValue(selectedItem.row, 0), '#984ea3');
}
}
}
Now draw your chart with select handler event attached
google.visualization.events.addListener(chart, 'select', selectHandler);
chart.draw(data, options);
Thats it.. Now all you have to do is declare three different functions for 3 bars
1. drawSupplyBar() 2. drawDemandBar() 3. drawOthersBar()
you can find full code and working fiddle Here