chartWrapper and dataView

[pb]

Hi,

I would like to filter data that is coming in from a sourceURL, i
don't seem to understand the concept of needing to use setView() to
bring imported data into a dataView. Can anyone give a clear and
simple example of how this is done please? Amazed that this is shown/
written anywhere clear enough in the docs.

Help is always appreciated in advance.

pb

[asgallant]

Do these help?

http://code.google.com/apis/chart/interactive/docs/datatables_dataviews.html#datatablesdataviews

http://code.google.com/apis/chart/interactive/docs/reference.html#DataView

http://code.google.com/apis/ajax/playground/?type=visualization#simple_data_view

http://code.google.com/apis/ajax/playground/?type=visualization#another_data_view

[leglera]

I am actually struggling with the same thing - I cannot get a data view to work with a source url. 

The links asgallant posted do not help - does anyone have an example of a sourceurl that feeds a data view?

thanks,

ABL

[asgallant]

Essentially, the #setView method takes an object as a parameter.  The object can have either or both of 'rows' and 'columns' properties.  Each property is an array of row or column indices to include in the view, ie:

wrapper1.setView({columns:[0, 1, 2]}); // use the first three DataTable columns

wrapper2.setView({rows: [0, 1, 2, 5]}); // use the first, second, third, and sixth rows

I have some live examples here: http://jsfiddle.net/asgallant/gzmn3/ 

[leglera]

asgallant,

That is very helpful. I did finally figure out a more complicated
method to get the view from the datasource URL - this is much easier.

FYI - the setView feature I cannot find anywhere in the Google
Developer site. Are there other references where it might reside?

Thanks

ABL

[asgallant]

The #setView method belongs to the ChartWrapper class (and nothing else, to my knowledge).  The documentation for it really could use some examples, though.

[Malik Al-Malik]

Hi asgallant,

I've been following your posts for a while and they have been extremely helpful so far. I'm doing something similar but a bit of a mix of this and your example here, where you use the categoryFilter to filter the columns in the datatable driving a chart.

I'm building a Dashboard that has multiple charts (using ChartWrapper) from the same DatasourceUrl (Googlespreadsheet) but different sheets in that spreadsheet. Anyhow, I'm not able get the the "columnsTable" to take the returned data from query in the chartwrapper.

I've adapted my code to match your example

google.load('visualization', '1', {packages: ['controls']});
google.setOnLoadCallback(drawChart);


function drawChart () {
 
  var Chart = new google.visualization.ChartWrapper({
    chartType:'LineChart',
    dataSourceUrl:'https://docs.google.com/a/google.com/spreadsheet/ccc?key=1uWxegqnxB0ZxAl3FmiNuI00A09Vbir_W9RqxE-pGnRQ',
    containerId:'chart_div',
    query:'SELECT A,B,C,D,E where B is not null',
    options:{
     title: 'Calls Offered',
     curveType: 'function',
     theme:'maximized',
          width: 550,
          height: 300
    }
  });
 
  var data = Chart.setView({[0,1,2,3]});


    var columnsTable = new google.visualization.DataTable();
    columnsTable.addColumn('number', 'colIndex');
    columnsTable.addColumn('string', 'colLabel');
    var initState= {selectedValues: []};
    // put the columns into this data table (skip column 0)
    for (var i = 1; i < data.getNumberOfColumns(); i++) {
        columnsTable.addRow([i, data.getColumnLabel(i)]);
        // you can comment out this next line if you want to have a default selection other than the whole list
        initState.selectedValues.push(data.getColumnLabel(i));
    }
    // you can set individual columns to be the default columns (instead of populating via the loop above) like this:
    // initState.selectedValues.push(data.getColumnLabel(4));
   


   
    var columnFilter = new google.visualization.ControlWrapper({
        controlType: 'CategoryFilter',
        containerId: 'colFilter_div',
        dataTable: columnsTable,
        options: {
            filterColumnLabel: 'colLabel',
            ui: {
                label: 'Columns',
                allowTyping: false,
                allowMultiple: true,
                allowNone: false,
                selectedValuesLayout: 'belowStacked'
            }
        },
        state: initState
    });
   
    function setChartView () {
        var state = columnFilter.getState();
        var row;
        var view = {
            columns: [0]
        };
        for (var i = 0; i < state.selectedValues.length; i++) {
            row = columnsTable.getFilteredRows([{column: 1, value: state.selectedValues[i]}])[0];
            view.columns.push(columnsTable.getValue(row, 0));
        }
        // sort the indices into their original order
        view.columns.sort(function (a, b) {
            return (a - b);
        });
        Chart.setView(view);
        Chart.draw();
    }
    google.visualization.events.addListener(columnFilter, 'statechange', setChartView);
   
    setChartView();
    columnFilter.draw();
}

I suspect the issue is either with t he fact that I'm using a query or the line

  var data = Chart.setView({[0,1,2,3]});

Please help

[Malik Al-Malik]

nevermind, i figured it out.
It turns out, it is the query in the Chartwrapper that appears to be the problem. There may be a better way but I had to send the query in a separate function and use a handleQueryResponse function to putit into a datatable and do everything else

here is the new code

google.load('visualization', '1', {packages: ['controls']});

google.setOnLoadCallback(initialize);

function initialize() {

  var opts = {sendMethod: 'auto'};

  // Replace the data source URL on next line with your data source URL.

  var query = new google.visualization.Query('https://docs.google.com/a/google.com/spreadsheet/ccc?key=1uWxegqnxB0ZxAl3FmiNuI00A09Vbir_W9RqxE-pGnRQ', opts);

  // Optional request to return only column C and the sum of column B, grouped by C members.

  query.setQuery('select A,B,C,D,E where B is not null');

  // Send the query with a callback function.

  query.send(handleQueryResponse);

}

function handleQueryResponse(response) {

  // Called when the query response is returned.

  

  if (response.isError()) {

    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());

    return;

  }

  var data = response.getDataTable();

  

  var Chart = new google.visualization.ChartWrapper({

    chartType:'LineChart',

    dataTable:data,

    containerId:'chart_div',

    options:{

     title: 'Calls Offered',

     curveType: 'function',

     theme:'maximized',

          width: 550,

          height: 300

    }

  });

  

  

    var columnsTable = new google.visualization.DataTable();

    columnsTable.addColumn('number', 'colIndex');

    columnsTable.addColumn('string', 'colLabel');

    var initState= {selectedValues: []};

    // put the columns into this data table (skip column 0)

    for (var i = 1; i < data.getNumberOfColumns(); i++) {

        columnsTable.addRow([i, data.getColumnLabel(i)]);

        // you can comment out this next line if you want to have a default selection other than the whole list

        initState.selectedValues.push(data.getColumnLabel(i));

    }

    // you can set individual columns to be the default columns (instead of populating via the loop above) like this:

    // initState.selectedValues.push(data.getColumnLabel(4));

    

    

    var columnFilter = new google.visualization.ControlWrapper({

        controlType: 'CategoryFilter',

        containerId: 'colFilter_div',

        dataTable: columnsTable,

        options: {

            filterColumnLabel: 'colLabel',

            ui: {

                label: 'Columns',

                allowTyping: false,

                allowMultiple: true,

                allowNone: false,

                selectedValuesLayout: 'aside'

            }

        },

        state: initState

    });

    

    function setChartView () {

        var state = columnFilter.getState();

        var row;

        var view = {

            columns: [0]

        };

        for (var i = 0; i < state.selectedValues.length; i++) {

            row = columnsTable.getFilteredRows([{column: 1, value: state.selectedValues[i]}])[0];

            view.columns.push(columnsTable.getValue(row, 0));

        }

        // sort the indices into their original order

        view.columns.sort(function (a, b) {

            return (a - b);

        });

        Chart.setView(view);

        Chart.draw();

    }

    google.visualization.events.addListener(columnFilter, 'statechange', setChartView);

    

    setChartView();

    columnFilter.draw();

}

Thanks.

Now I just need to figure out how to do this with a bunch or charts from different sheets in the same Spreadsheet using the same filter (same headers).

[joseph mutisya]

Hey aggalant. I have an urgent issue based on this:

http://stackoverflow.com/q/39260180/6780629

could you kindly have a look? cheers