Please find the code below:
I would like to add Number input field (for example some text box), which
will take the number of rows that shd be considered from table (sorted
based on any of the columns) and draw the pie chart accordingly for only
those rows.
In the below example, suppose, i sort table based on "Donuts eaten"
(ascending) and provide 2 in the textbox input, then the pie chart and the
table should have been plotted only for "Aaron" and "John" rows.
Now suppose, second time, i sort the table based on Name (ascending A-Z)
and provide 4 as the input in the textbox, then pie chart and table should
have been plotted only for rows "Aaron", "Elisa", "Jessica" and "John"
rows
Can someone please help?
JS:
google.load('visualization', '1', {packages: ['controls']});
google.setOnLoadCallback(drawChart);
function drawChart() {
// Prepare the data
var data = google.visualization.arrayToDataTable([
['Name', 'Gender', 'Age', 'Donuts eaten'],
['Michael', 'Male', 12, 5],
['Elisa', 'Female', null, 7],
['Robert', 'Male', null, 3],
['John', 'Male', 54, 2],
['Jessica', 'Female', 22, 6],
['Aaron', 'Male', 3, 1],
['Margareth', 'Female', 42, 8],
['Miranda', 'Female', 33, 6]
]);
// Define a slider control for the Age column.
var slider = new google.visualization.ControlWrapper({
controlType: 'NumberRangeFilter',
containerId: 'control1',
dataTable: data,
options: {
filterColumnLabel: 'Age',
ui: {
labelStacking: 'vertical'
}
}
});
// Define a category picker control for the Gender column
var categoryPicker = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'control2',
options: {
filterColumnLabel: 'Gender',
ui: {
labelStacking: 'vertical',
allowTyping: false,
allowMultiple: false
}
}
});
// Define a category picker control for the Name column
var categoryPicker2 = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'control3',
dataTable: data,
options: {
filterColumnLabel: 'Name',
ui: {
label: 'Exclude these names',
labelStacking: 'vertical',
allowTyping: false,
allowMultiple: true,
selectedValuesLayout: 'belowStacked'
}
}
});
// Define a Pie chart
var pie = new google.visualization.ChartWrapper({
chartType: 'PieChart',
containerId: 'chart1',
options: {
width: 300,
height: 300,
legend: 'none',
title: 'Donuts eaten per person',
chartArea: {
left: 15,
top: 15,
right: 0,
bottom: 0
},
pieSliceText: 'label'
},
// Instruct the piechart to use colums 0 (Name) and 3 (Donuts Eaten)
// from the 'data' DataTable.
view: {
columns: [0, 3]
}
});
// Define a table
var table = new google.visualization.ChartWrapper({
chartType: 'Table',
containerId: 'chart2',
options: {
width: '300px',
'showRowNumber': true
}
});
// Create a dashboard
var dash = new
google.visualization.Dashboard(document.getElementById('dashboard'));
// Establish bindings, declaring the both the slider and the category
// picker will drive both charts.
dash.bind([categoryPicker], [categoryPicker2]);
google.visualization.events.addListener(categoryPicker2, 'statechange',
updateCharts);
google.visualization.events.addListener(dash, 'ready', updateCharts);
// Draw the entire dashboard.
dash.draw(data);
var runOnce = google.visualization.events.addListener(slider,
'statechange', function() {
// bind the slider to the dashboard and redraw
dash.bind([slider], [categoryPicker2]);
dash.draw(data);
// remove this event listener since we only need it to run once
google.visualization.events.removeListener(runOnce);
});
slider.draw();
function updateCharts () {
var values = categoryPicker2.getState().selectedValues;
var filterView = categoryPicker2.getDataTable();
var rows = [];
var tmp;
for (var i = 0; i < values.length; i++) {
tmp = filterView.getFilteredRows([{
column: 0,
value: values[i]
}]);
for (var j = 0; j < tmp.length; j++) {
rows.push(tmp[j]);
}
}
var view = new google.visualization.DataView(filterView);
view.hideRows(rows);
table.setDataTable(view);
pie.setDataTable(view);
table.draw();
pie.draw();
}
}
HTML:
<div id="dashboard">
<table>
<tr style='vertical-align: top'>
<td style='width: 300px; font-size: 0.9em;'>
<div id="control1"></div>
<div id="control2"></div>
<div id="control3"></div>
</td>
<td style='width: 600px'>
<div style="float: left;" id="chart1"></div>
<div style="float: left;" id="chart2"></div>
</td>
</tr>
</table>
</div>
--
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/groups/opt_out.
