filter on google stacked bar charts

Brian Flieck

unread,

Apr 5, 2018, 4:02:27 PM4/5/18

to Google Visualization API

Hi, i feel like i've been going to over and over on the google site trying to add the option to filter on the 0 index of my data. what am i doing wrong?

<html>
  <head>
  <META HTTP-EQUIV="refresh" CONTENT="60">
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
    google.charts.load('current', {packages: ['corechart', 'bar']});
    google.charts.setOnLoadCallback(drawStacked);

      function drawStacked() {
        var data = new google.visualization.arrayToDataTable([
        ['folder', 'ready', 'freelanced', 'ready to QA' , 'placeholder' , 'not ready'],
['/Volumes/photorepos/Partners/Christopher_Banks/post/CB_instock/3' , 0, 0, 0, 0, 2],
['/Volumes/photorepos/Partners/Christopher_Banks/post/CB_instock/4' , 0, 0, 0, 0, 1],
['/Volumes/photorepos/Partners/Christopher_Banks/post/CB_instock/5' , 0, 0, 0, 0, 2],
['/Volumes/photorepos/Partners/Christopher_Banks/post/CB_instock/18' , 0, 0, 0, 0, 1],
['/Volumes/photorepos/Partners/Aeropostale/post/instock/1' , 0, 0, 0, 0, 9],
['/Volumes/photorepos/Partners/Aeropostale/post/instock/2' , 0, 0, 0, 0, 32],
['/Volumes/photorepos/Partners/Aeropostale/post/instock/9' , 0, 0, 0, 0, 33],
['/Volumes/photorepos/Partners/Aeropostale/post/instock/13' , 0, 0, 0, 0, 4],
['/Volumes/photorepos/Partners/Maurices/Post/instock/7' , 13, 0, 0, 0, 0],
['/Volumes/photorepos/Partners/Maurices/Post/instock/8' , 40, 0, 0, 0, 1],
['/Volumes/photorepos/Partners/Dress_Barn/Post/instock/RUSH' , 37, 0, 0, 0, 0],
['/Volumes/photorepos/Partners/Dress_Barn/Post/instock/1' , 0, 0, 0, 0, 1],
['/Volumes/photorepos/Partners/Dress_Barn/Post/instock/5' , 0, 0, 0, 0, 1],
['/Volumes/photorepos/Partners/Dress_Barn/Post/instock/7' , 12, 0, 0, 0, 0],
['/Volumes/photorepos/Partners/Dress_Barn/Post/instock/8' , 12, 0, 0, 0, 1],
['/Volumes/photorepos/Partners/NYCompany/post/instock/3' , 0, 0, 0, 0, 1],
['/Volumes/photorepos/Partners/NYCompany/post/instock/5' , 0, 0, 0, 0, 81],
['/Volumes/photorepos/Partners/NYCompany/post/instock/6' , 0, 0, 0, 0, 2],
['/Volumes/photorepos/Partners/HenriBendel/post/instock/6' , 112, 0, 0, 0, 10],
['/Volumes/photorepos/Partners/HenriBendel/post/instock/8' , 20, 0, 0, 0, 6],
['/Volumes/photorepos/Partners/Uniqlo/Post/instock/8' , 88, 0, 0, 0, 1],
]);

        var options = {
        chartArea:{left:"30%",top:"5%",width:"60%",height:"50%"},
       width: 1500,
       height: 1800,
        colors: ['#00a591', '#ECDB54', '#6B5B95', '808080', '#E94B3C'],
        isStacked: true,
        fontSize: 11,
        title: 'Folder Count 04-05-18 03:20:01',
        chartType: 'ComboChart',
        filterColumnIndex: 0
        };
        
        

  var chart = new google.visualization.BarChart(document.getElementById('dual_x_div'));
      chart.draw(data, options);
    };
    </script>
  </head>
  <body>
    <div id="dual_x_div" style="width: 1500px; height: 700px;"></div>
  </body>
</html>Enter code here...

Sean Larson

unread,

Apr 5, 2018, 5:43:21 PM4/5/18

to Google Visualization API

When you say filter, what are you expecting to happen?

Do you mean sort? Or only render data-points which equal a certain value in column 0? Or something else?

If you want to add a dropdown to apply filters, you need to use a dashboard and bind the chart to the filtercontrol

Brian Flieck

unread,

Apr 5, 2018, 6:41:38 PM4/5/18

to google-visua...@googlegroups.com

Filter the rows to display only the ones I want ideally by some keyword

--
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 google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/8af93951-0fa1-439d-a28a-3c8cd1ae3a65%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Brian Flieck bflieck.com

Sean Larson

unread,

Apr 5, 2018, 7:15:32 PM4/5/18

to Google Visualization API

OK. You need to use the method getFilteredRows and apply it to your data object before calling chart.draw(data, options). Like this, getFilteredRows([{column: 3, value: 42}, {column: 2, minValue: 'bar', maxValue: 'foo'}])

You can also do this with a dataView as shown below, all of this is from the https://developers.google.com/chart/interactive/docs/reference

If you want something dynamic and controlled by the user on the front-end, dashboard/categoryFilters are the best choice, or you can try to do it dynmaically by building on the below.

var data = new google.visualization.DataTable();
data.addColumn('string', 'Employee Name');
data.addColumn('date', 'Start Date');
data.addRows(6);
data.setCell(0, 0, 'Mike');
data.setCell(0, 1, new Date(2008, 1, 28));
data.setCell(1, 0, 'Bob');
data.setCell(1, 1, new Date(2007, 5, 1));
data.setCell(2, 0, 'Alice');
data.setCell(2, 1, new Date(2006, 7, 16));
data.setCell(3, 0, 'Frank');
data.setCell(3, 1, new Date(2007, 11, 28));
data.setCell(4, 0, 'Floyd');
data.setCell(4, 1, new Date(2005, 3, 13));
data.setCell(5, 0, 'Fritz');
data.setCell(5, 1, new Date(2007, 9, 2));

// Create a view that shows everyone hired since 2007.
var view = new google.visualization.DataView(data);
view.setRows(view.getFilteredRows([{column: 1, minValue: new Date(2007, 0, 1)}]));
var table = new google.visualization.Table(document.getElementById('test_dataview'));
table.draw(view, {sortColumn: 1});

Brian Flieck

unread,

Apr 21, 2018, 9:02:36 AM4/21/18

to Google Visualization API

Hey Sean, so i have to basicly rewrite my data from what i have it as, and rewrite it declaring the data type first, correct?

Sean Larson

unread,

Apr 21, 2018, 9:11:46 AM4/21/18

to Google Visualization API

I think your arrayToDataTable is fine. You just need to create a data view and call the setRows using the result from getFilteredRows on the 'data' object.

Then when you draw the chart, pass the view object instead of the data object.

Reply all

Reply to author

Forward