The first issue I see is that you're doing two google.load calls, each for a different version, which is recommended against. The other potential issue is that you have a 'table' variable that is never defined. Once you fix those issues, everything should work. If it does not, post back here and I'll take another look.
On Tue Aug 19 2014 at 4:42:07 AM ma <[email protected]> wrote: > I am writing to seek help, to be able to solve the "a.Xe is not a > function" error, when I render the charts API. > > I am able to get the pie chart displaying on the client-side but I am > unable to get the table and the category filter box. I tried searching > online for this error but I am was unable to any suitable solutions. > > Here is my code: > <asp:Content runat="server" ID="BodyContent" > ContentPlaceHolderID="MainContent"> > > <script src="// > ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" > type="text/javascript"> </script> > <script type="text/javascript" src="//www.google.com/jsapi"></script> > <script type="text/javascript"> > google.load('visualization', '1.1', { packages: ['controls'] }); > function drawVisualization(dataValues, chartTitle, columnNames, > categoryCaption) { > if (dataValues.length < 1) > return; > > var data = new google.visualization.DataTable(); > data.addColumn('string', columnNames.split(',')[0]); > data.addColumn('number', columnNames.split(',')[1]); > data.addColumn('number', columnNames.split(',')[2]); > data.addColumn('number', columnNames.split(',')[3]); > > for (var i = 0; i < dataValues.length; i++) { > data.addRow([dataValues[i].Type, dataValues[i].TD, > dataValues[i].TK, dataValues[i].CR]); > } > > // Define a Pie chart > var pie = new google.visualization.ChartWrapper({ > 'chartType': 'PieChart', > 'containerId': 'PieChartContainer', > 'options': { > 'width': 500, > 'height': 350, > 'legend': 'right', > 'title': 'chartTitle', > 'chartArea': { 'left': 50, 'top': 15, 'right': 0, > 'bottom': 0 }, > 'pieSliceText': 'label', > 'tooltip': { 'text': 'percentage' }, > 'series': { 5: { 'type': "Bar" } }, > 'vAxis': { > 'gridlines': { > 'count': (49000 - 0) / 2000 + 1 //31 > }, > 'viewWindow': { > 'min': 0, > 'max': 49000 > } > } > }, > 'view': { 'columns': [0, 1, 2, 3] } > }); > > > // Define a category picker control for the Gender column > var categoryPicker = new google.visualization.ControlWrapper({ > 'controlType': 'CategoryFilter', > 'containerId': 'control1', > 'options': { > 'filterColumnLabel': columnNames.split(',')[1], > 'filterColumnIndex': '1', > 'ui': { > 'labelStacking': 'horizontal', > 'allowTyping': false, > 'allowMultiple': false, > 'caption': categoryCaption, > 'label': columnNames.split(',')[1] > } > }, > }); > > categoryPicker.setDataTable(data); > pie.setDataTable(data); > table.setDataTable(data); > pie.draw(); > categoryPicker.draw(); > table.draw(); > > return; > > new > google.visualization.Dashboard(document.getElementById('PieChartExample')) > .bind([categoryPicker], [pie, table]) > > .draw(data); > > // new > google.visualization.Dashboard(document.getElementById('PieChartExample')).bind([categoryPicker], > [pie, table]).draw(data); > } > > </script> > > > <div id="PieChartExample"> > <table> > <tr style='vertical-align: top'> > <td > > > <div style="float: left;" id="control1"></div> > <div style="float: left;" id="PieChartContainer"></div> > </td> > </tr> > <tr> > <td > > <div style="float: left;" id="chart2"></div> > </td> > </tr> > <tr> > <td style='width: 600px'> > > </td> > </tr> > </table> > </div> > > </asp:Content> > > I am getting data dynamically from the sql server and I am able to call > the data to the drawVisualisation function, as the following below: > <script > type="text/javascript">google.load('visualization','1.0',{'packages':['corechart','controls']});google.setOnLoadCallback(function(){drawVisualization([{"Type":"BS","TD":2717,"TK":3876,"CR":7},{"Type":"CO","TD":2195,"TK":8218,"CR":50},{"Type":"TO","TD":10420,"TK":46141,"CR":86},{"Type":"CM","TD":10365,"TK":21771,"CR":203},{"Type":"MB","TD":12651,"TK":45467,"CR":118}],'Name > Example','Type, TD, TK, CR','Type Set Example');});</script></form> > </body> > > Any hint/guide would be very helpful to diagnose where I may be going > wrong in the code. > > 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 [email protected]. > To post to this group, send email to > [email protected]. > Visit this group at > http://groups.google.com/group/google-visualization-api. > For more options, visit https://groups.google.com/d/optout. > -- 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 [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/google-visualization-api. For more options, visit https://groups.google.com/d/optout.
