Here's a function that takes a number n and restricts the PieChart to the
first n rows (or the number of rows in the chart's data, whichever is
lower):
function restrictRows (n) {
var rowCount = pie.getDataTable().getNumberOfRows();
if (n > rowCount) {
n = rowCount;
}
var viewSpec = pie.getView();
viewSpec.rows = Array.apply(null, Array(n)).map(function (x, i) {
return i;
});
pie.draw();
}
On Wednesday, February 12, 2014 8:30:03 AM UTC-5, kotmanp wrote:
>
> 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.
