How to implement drill down deature in google chart

[prajna alva]

Hi All,

I am very new to google chart.I wanted help in building drill down feature in google chart can anyone help me by providing a sample code.

Thank youu in advance

Regards,

Prajna P A lva

[Andrew Gallant]

There are many ways to accomplish a drilldown chart; which is the best way is probably going to depend on how your data is structured.  Here's an example based on aggregating the lower level data to top level categories: http://jsfiddle.net/asgallant/3okhfcLp/

[prajna alva]

Hi,

I would like to see in dahboard.say drill down from year to month then weeks and then days..so on.

Thank you for your previous reply

Regards,

Prajna 

[Andrew Gallant]

You can take the same concept from my example and apply it for your needs; just group the data by week/month/year, or whatever you need.

[prajna alva]

can u show me some sample using chart wrapper as em drwing in dashboard.

Thank you

Regards,

Prajna

[prajna alva]

  

         

       //Drill down

         

         // create a dummy chart to serve as a placeholder

           var dummy3 = new google.visualization.ChartWrapper({

               chartType: 'Table',

               containerId: 'dummy_div3',

               options: {

               width: '100px'

              // },

               //view: {

                  // rows: []

               }

           });

           // create event handler for updating the chart

           google.visualization.events.addListener(dummy3, 'ready', function () {

               // get the filtered DataTable

            var newData3 = dummy3.getDataTable();

               // group Y by X

            var grouped3 = google.visualization.data.group(newData3, [4], [{

                   type: 'number',

                   label: 'Value',

                   column: 6,

                   aggregation: google.visualization.data.sum

               }]);

               

            var topLevel = true;

            

            var chart = new google.visualization.ChartWrapper({

            'chartType': 'ColumnChart',

                 'containerId': 'ColumnChart_div',

           'options':  {

                'height': 400,

                'width': 600

           }

            }); 

               

            function draw (category) {

                if (topLevel) {

                    // rename the title

                  //  options.title = 'Top Level data';

                    // draw the chart using the aggregate data

                    chart.draw(grouped3);

                }

                else {

                    var view = new google.visualization.DataView(data);

                    // use columns "Name" and "Value"

                    view.setColumns([5, 6]);

                    // filter the data based on the category

                    view.setRows(data.getFilteredRows([{column: 4, value: yearvalue}]));

                    // rename the title

                  //  options.title = 'yearvalue: ' + yearvalue;

                    // draw the chart using the view

                    chart.draw(view);

                }

                google.visualization.events.addListener(chart, 'select', function () {

                    if (topLevel) {

                        var selection = chart.getSelection();

                        // drill down if the selection isn't empty

                        if (selection.length) {

                            var category = grouped3.getValue(selection[4].row,4);

                            topLevel = false;

                            draw(category);

                        }

                    }

                    

                    else {

                        // go back to the top

                        topLevel = true;

                        // set the DataTable for the chart

                       // chart.setDataTable(grouped3);

                        chart.draw();

                    }

                    

                

                    // set the DataTable for the chart

           // chart.setDataTable(grouped3);

            // draw the chart

          // chart.draw();

        

            });

this what em trying