Thank you for your reply back. This is my entire code below. I am using the table event handler from the following link -- http://jsfiddle.net/asgallant/FRz59/8/
function drawVisualization(dataValues, chartTitle, columnNames, categoryCaption) { if (dataValues.length < 1) return; var data = new google.visualization.DataTable(); data.addColumn('string', columnNames.split(',')[0], 'Name'); data.addColumn('number', columnNames.split(',')[1], 'Price'); data.addColumn('string', columnNames.split(',')[2], 'Price Type'); data.addColumn('datetime', columnNames.split(',')[3], 'Date'); for (var i = 0; i < dataValues.length; i++) { var date = new Date(parseInt(dataValues[i].Date.substr(6), 10)); data.addRow([dataValues[i].ColumnName, dataValues[i].Value, dataValues[i].Type, date]); } var dateFormatter = new google.visualization.DateFormat({ pattern: 'dd MM yyyy' }); var line = new google.visualization.ChartWrapper({ 'chartType': 'LineChart', 'containerId': 'PieChartContainer', 'options': { 'width': 950, 'height': 450, 'legend': 'none', 'hAxis': { 'format': "dd-MM-yyyy", 'hAxis.maxValue': 'viewWindow.max', 'maxValue': new Date(2014, 05, 30), 'minValue': new Date(2014, 04, 05), 'viewWindow': { 'max': new Date(2014, 05, 30) }, }, 'title': chartTitle, // 'chartArea': { 'left': 100, 'top': 100, 'right': 0, 'bottom': 100 }, 'chartArea': { 'height': '80%', 'width': '90%' }, 'tooltip': { isHtml: true } }, 'view': { 'columns': [{ type: 'string', label: data.getColumnLabel(3), calc: function (dt, row) { var date = dt.getValue(row, 3); return dateFormatter.formatValue(date); } }, 1, { type: 'string', role: 'tooltip', calc: function (dt, row) { return 'Name: ' + dt.getValue(row, 0) + ', Price: ' + +dt.getValue(row, 1) + ', Date: ' + +dt.getFormattedValue(row, 3); } }] } }); var categoryPicker = new google.visualization.ControlWrapper({ 'controlType': 'CategoryFilter', 'containerId': 'control2', 'options': { 'filterColumnLabel': columnNames.split(',')[2], 'filterColumnIndex': '2', 'ui': { 'labelStacking': 'horizontal', 'allowTyping': false, 'allowMultiple': false, 'caption': 'Select Type', 'label': 'Price Type', } } }); // Define a table. var table = new google.visualization.ChartWrapper({ chartType: 'Table', containerId: 'chart2', options: { width: '500px' } }); google.visualization.events.addListener(table, 'ready', function () { var filteredData = table.getDataTable(); // get a list of all the labels in column 0 var group = filteredData.getDistinctValues(0); // build the columns for the view var columns = [1], groupColumns = []; for (var i = 0; i < group.length; i++) { var label = group[i]; // set the columns to use in the chart's view // calculated columns put data belonging to each country in the proper column columns.push({ type: 'number', label: label, calc: (function (name) { return function (dt, row) { return (dt.getValue(row, 0) == name) ? dt.getValue(row, 1) : null; } })(label) }); groupColumns.push({ type: 'number', label: label, column: i + 1, aggregation: google.visualization.data.sum }); } var view = new google.visualization.DataView(filteredData); view.setColumns(columns); var groupedData = google.visualization.data.group(view, [0], groupColumns); line.setDataTable(groupedData); line.draw(); }); new google.visualization.Dashboard(document.getElementById('PieChartExample')).bind([categoryPicker], [line, table]).draw(data); } I am unable to find much difference between the two codes. Please advice, if I am missing something above. Thanks -- 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-visualization-api+unsubscr...@googlegroups.com. To post to this group, send email to google-visualization-api@googlegroups.com. Visit this group at http://groups.google.com/group/google-visualization-api. For more options, visit https://groups.google.com/d/optout.