Thanks for posting your code, but this can't be your entire code because the call of the drawVisualization must include arguments that provide the data and columns. I tried to make up some data that looks like what you expect, and I don't see the problem you are reporting, so it might be there is a problem with the data you are using. If you could set up your own jsfiddle page with all the code you are using, then I could be sure to have everything necessary to reproduce the problem.
On Wed, Jun 11, 2014 at 12:11 PM, ma <misbah.ali...@gmail.com> wrote: > 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. > -- Daniel LaLiberte <https://plus.google.com/100631381223468223275?prsrc=2> - 978-394-1058 dlalibe...@google.com <dlalibe...@google.com> 5CC, Cambridge MA daniel.lalibe...@gmail.com <daniel.lalibe...@gmail.com> 9 Juniper Ridge Road, Acton MA -- 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.
