google visualization category filter date parsing

Question

I have created a google visualization dashboard based on the fiddle example in answer of this question as,

function drawTable(response) {
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'Sl. No.');
    data.addColumn('string', 'Name');
    data.addColumn('string', 'Date');

    var rows = [];
    for (var i = 0; i < response.rows.length; i++) {
        rows.push([parseInt(response.rows[i][0]), response.rows[i][3], response.rows[i][4]]); 
    }
    data.addRows(rows);

    var table = new google.visualization.ChartWrapper({
        containerId: 'table_div',
        chartType: 'Table',
        options: {

        }
    });

    var control = new google.visualization.ControlWrapper({
        containerId: 'control_div',
        controlType: 'CategoryFilter',
        options: {
            filterColumnIndex: 2,
            'ui': {
              'labelStacking': 'vertical',
              'allowTyping': false,
              'allowMultiple': false
            }
        }
    });

    var dashboard = new google.visualization.Dashboard(document.querySelector('#dashboard'));
    dashboard.bind([control], [table]);
    dashboard.draw(data);
}

function getData() {
    // Builds a Fusion Tables SQL query and hands the result to  dataHandler
    var queryUrlHead = 'https://www.googleapis.com/fusiontables/v1/query?sql=';
    var queryUrlTail = '&key=AIzaSyCAI2GoGWfLBvgygLKQp5suUk3RCG7r_ME';
    var tableId = '1U-snFJDhdO7jhDjKGfNUZG_P4n4UXvKFjU8F_hM';

    // write your SQL as normal, then encode it
    var query = "SELECT * FROM " + tableId;
    var queryurl = encodeURI(queryUrlHead + query + queryUrlTail);

    var jqxhr = $.get(queryurl, drawTable, "jsonp");
}
google.load('visualization', '1', {packages:['controls'], callback: getData});

and its data coming from this fusion table. I want a category filter control as in example fiddle with the selection of date column. And the condition is i want to select the formatted data in MMMM format. ie, as shown in fig. below.

How can I achieve this???

EDIT: I have tried the following formatter code

var monthformatter = new google.visualization.DateFormat({pattern: "MMMM"});
    monthformatter.format(data, 2);

to convert the date format into months. But no use.

Anyways, the same can be achieved from spreadsheet data as shown in this fiddle (Example 2) using google visualization query response. But spreadsheet hangs up for large set of data and the google fusion table gviz query (ie, var query = new google.visualization.Query("https://www.google.com/fusiontables/gvizdata?tq=select * from fusiontableid");) will give only the first 500 rows of data (see example 3 below). That is why i required the example 1 to be worked.

• Example 1
• Example 2
• Example 3

Answer 1

Maybe this is a very bad answer, or simply wrong : But I really dont think that is possible. You want to filter dates based on their month name, but still view the date? However, you can achieve the goal with ControlWrapper holding months - and sort by months based on the date - by adding an extra field :

data.addColumn('string', 'Month');

and format the data like this :

var rows = [];
var months = ["January", "February", "March", "April", "May", "June","July", "August",      "September","October", "November", "December" ];    
for (var i = 0; i < response.rows.length; i++) {
  var month=months[new Date(response.rows[i][3]).getMonth()];
  rows.push([parseInt(response.rows[i][0]), 
             response.rows[i][1], 
             response.rows[i][3], 
             month
            ]); 
}
data.addRows(rows);

Cant take a screenshot, the popup hides everytime.

Here is a forked fiddle (think it was your #2 I looked into) -> http://jsfiddle.net/TkV7v/

As you can see, I have tried to hide the extra column by using a DataView

var view = new google.visualization.DataView(data);
view.setColumns([0,1,2,3]);    
view.hideColumns([3])

But that doesnt work :( Apparently visualization needs the data to filter on to be visible. Could not find a setColumnWidth function or anything like that. Perhaps The month-column can be transformed to a { role: "tooltip" }, havent tried that.

As said above, I do not know how much this answer is worth. Delete it if its useless or anyone else crack the code.

Answer 2

Format your dates with the monthformatter you posted, and then set the control's `useFormattedValue' option to true:

var monthformatter = new google.visualization.DateFormat({pattern: "MMMM"});
monthformatter.format(data, 2);

var control = new google.visualization.ControlWrapper({
    containerId: 'control_div',
    controlType: 'CategoryFilter',
    options: {
        filterColumnIndex: 2,
        useFormattedValue: true,
        ui: {
            labelStacking: 'vertical',
            allowTyping: false,
            allowMultiple: false
        }
    }
});