Hi All,
Em been trying to implement drill down feature using google chart dashboard.
Drill down mean if i have category on click of bar it should go down to
name .I am trying with below code with category filter..but its not working
can anyone help me out in this area as em new to this.
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript"
src="https://www.google.com/jsapi";></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
google.load('visualization', '1.0', {'packages':['controls']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart () {
var data = google.visualization.arrayToDataTable([
['Category', 'Name', 'Value'],
['Foo', 'Fiz', 5],
['Foo', 'Buz', 2],
['Bar', 'Qud', 7],
['Bar', 'Piz', 4],
['Cad', 'Baz', 6],
['Cad', 'Nar', 8]
]);
var aggregateData = google.visualization.data.group(data, [0], [{
type: 'number',
label: 'Value',
column: 2,
aggregation: google.visualization.data.sum
}]);
var category_picker1 = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'category_picker_div1',
'options': {
'filterColumnLabel': 'Category',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': true
}
}
});
var topLevel = true;
// Create a Column chart, passing some options
var chart1 = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'ColumnChart_div',
// 'dataTable': aggregateData,
'options': {
'height': 400,
'width': 600
}
});
function draw (category) {
if (topLevel) {
// rename the title
// options.title = 'Top Level data';
// draw the chart using the aggregate data
chart1.draw(aggregateData);
}
else {
var view = new google.visualization.DataView(data);
// use columns "Name" and "Value"
view.setColumns([1, 2]);
// filter the data based on the category
view.setRows(data.getFilteredRows([{column: 0, value:
category}]));
// rename the title
// options.title = 'Category: ' + category;
// draw the chart using the view
chart1.draw(view);
}
}
google.visualization.events.addListener(chart1, 'select', function () {
if (topLevel) {
var selection = chart1.getChart().getSelection();
// drill down if the selection isn't empty
if (selection.length) {
var category = aggregateData.getValue(selection[0].row, 0);
topLevel = false;
draw(category);
}
}
else {
// go back to the top
topLevel = true;
chart1.draw();
}
});
chart1.draw();
//Create a dashboard.
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard_div'));
// Establish dependencies, declaring that 'filter' drives
'pieChart',
// so that the pie chart will only display entries that are let
through
// given the chosen slider range.
dashboard.bind([category_picker1],[chart1]);
// chart1.draw(data);
// Draw the dashboard.
//chart1.draw();
dashboard.draw(data);
}
/*
function _log(data) {
console.log(data);
} */
</script>
</head>
<body>
<div id="dashboard"/>
<!--Divs that will hold each control and chart-->
<div id="category_picker_div1"></div>
<div id="ColumnChart_div"></div>
<!--Div that will hold the pie chart-->
</div>
</body>
</html>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.
