I am trying create an Dependent Category filter and charts. I have State Category Filter & City Category filter. On selection on State filter I have to filter the City category filter and the chart.

I have built two DataTable – State DataTable & City DataTable like below

State DataTable:

City DataTable:

I am following this question to understand Combining two types of Category Filter in Google Charts API

But Data format seems to be different, I would like to understand how I can build an two charts from these two DataTables and filter City Category filter on the selection of State Filter.

Below are piece of code I am working

var stcolumnTable = new google.visualization.DataTable();
stcolumnTable.addColumn('number','colIndex');
stcolumnTable.addColumn('string','colLabel');
var st_initState={st_selectedValues:[]};

var cycolumnTable = new google.visualization.DataTable();
cycolumnTable .addColumn('number','colIndex');
cycolumnTable .addColumn('string','colLabel');
var cy_initState={cy_selectedValues:[]};

for(var i=1 ; i < state_dtbl.getNumberOfColumns(); i++){
   columnTable.addRow([i,state_dtbl.getColumnLabel(i)]);
   initState.selectedValues.push(state_dtbl.getColumnLabel(i));
};

for(var i=1 ; i < city_dtbl.getNumberOfColumns(); i++){
   columnTable.addRow([i,city_dtbl.getColumnLabel(i)]);
   cy_initState.cy_selectedValues.push(city_dtbl.getColumnLabel(i));
};

Passing Column values to Category filter like

var statepicker = new google.visualization.ControlWrapper({
        controlType: 'CategoryFilter',
        containerId: 'state_div',
        dataTable: stcolumnTable,
        options: {
          filterColumnLabel: 'colLabel',
          ui: {
            labelStacking: 'vertical',
            allowTyping: false,
            allowMultiple: true
            }
          },
    // Define an initial state, i.e. a set of metrics to be initially selected.
    state: {'selectedValues': [0, 1]}
    });  

var cityepicker = new google.visualization.ControlWrapper({
        controlType: 'CategoryFilter',
        containerId: 'city_div',
        dataTable: cycolumnTable,
        options: {
          filterColumnLabel: 'colLabel',
          ui: {
            labelStacking: 'vertical',
            allowTyping: false,
            allowMultiple: true
            }
          },
    // Define an initial state, i.e. a set of metrics to be initially selected.
    state: {'selectedValues': [0, 1]}
    });

Although I am following this example Combining two types of Category Filter in Google Charts API I am not very clear to use setChartView() in my scenario. And I am not sure how to draw the chart and do the functionality in google.visualization.events.addListener()
Any help with code snippet will be a good learning for me.