Marium, You have found a bug since Google Charts is responding with a non-useful error message like "c[Me] is not a function". I can't tell how that is happening, but I suspect it is because your datetime values are actually strings rather than dates. In order to provide date or datetime values via a json representation, you need to use the 'string formatted date' which is not the same as whatever string format you choose, but rather a special format that looks like: "Date(yyyy, mm, dd, hh, mm, ss)".
On Tue, May 19, 2015 at 6:52 AM, mariummalik22 <[email protected]> wrote: > I want to draw a table after dashboard's controller and chart, this table > is not linked with any range filter, When I am trying to draw it, it gives > error c[Me] is not a function, what could be the reason of it? > > Code: > > <html> > <head> > <!--Load the AJAX API--> > <script type="text/javascript" src="https://www.google.com/jsapi > "></script> > <script type="text/javascript" src="jquery-1.9.1.min.js"></script> > <script type="text/javascript"> > > // Load the Visualization API and the controls package. > google.load('visualization', '1.1', > {'packages':['controls','table']}); > > // Set a callback to run when the Google Visualization API is loaded. > google.setOnLoadCallback(drawDashboard); > > // Callback that creates and populates a data table, > // instantiates a dashboard, a range slider and a chart, > // passes in the data and draws it. > function drawDashboard() { > > var jsonChartData1 = $.ajax({ > url: "admilldata1.php", > dataType:"json", > async: false > }).responseText; > > var jsonTableData = $.ajax({ > url: "admilltabledata.php", > dataType:"json", > async: false > }).responseText; > > > > // Create our data table. > var chartdata = new google.visualization.DataTable(jsonChartData1); > > > // Create our data table > > > var tabledata = new google.visualization.DataTable(jsonTableData); > > > > // Create a dashboard. > var dashboard = new google.visualization.Dashboard( > document.getElementById('dashboard_div')); > > > // Create a line chart, passing some options > var Chart1 = new google.visualization.ChartWrapper({ > 'chartType': 'AreaChart', > 'containerId': 'chart_div1', > 'options': { > 'width': 1200, > 'height': 350, > 'legend': 'top', > focusTarget:'category', > series: { > > 0: { > labelInLegend: 'Idle Time', > color: 'Blue', > areaOpacity: 0.5 > > > }, > 1: { > labelInLegend: 'StandBy Time', > color: 'Orange', > areaOpacity: 0.6 > }, > > 2: { > labelInLegend: 'Run Time', > color: 'Green', > areaOpacity: 0.6 > }, > > 3: { > labelInLegend: 'Alarm Time', > color: 'Red', > areaOpacity: 0.6 > } > }, > > chartArea: { > left: "5%", > top: "15%", > width: "200%", > height: "50%", > }, > > > vAxis: { > > viewWindow: { > min: 0, > max: 6 > } > } }, > > view: { > columns: [0,1,2,3,4,5] // use columns 0 and 2 > } > > > > }); > > > > > // Create a range slider, passing some options > var RangeSlider = new google.visualization.ControlWrapper({ > 'controlType': 'ChartRangeFilter', > 'containerId': 'filter_div', > 'options': { > displayAnnotations: false, > > 'filterColumnLabel': 'Start Time and Shut Down', > ui: {chartType: 'LineChart', > > chartOptions: { > chartArea: { > width: '100%' > }, > height: 60 > > > } > > } > > > } > }); > > var table = new > google.visualization.Table(document.getElementById('table_div')); > table.draw(tabledata, {showRowNumber: true, alternatingRowStyle: > true}); > > > > > // Establish dependencies, declaring that 'filter' drives > 'LineChart', > // so that the line chart will only display entries that are let > through > // given the chosen slider range. > dashboard.bind(RangeSlider, Chart1).draw(chartdata); > > > // Draw the dashboard. > dashboard.draw(chartdata); > > > > > } > </script> > </head> > <body> > > > > > <!--Div that will hold the dashboard--> > <div id="dashboard_div"> > <!--Divs that will hold each control and chart--> > > > <div id="chart_div1"></div> > > > > <div id="filter_div"></div> > <div id="table_div"></div> > </div> > </body> > </html> > > > JSON of Table Data: > > { "cols": [ {"id":"","label":"Start Time and Shut > Down","pattern":"","type":"datetime"}, > {"id":"","label":"Name","pattern":"","type":"datetime"}, > {"id":"","label":"Label","pattern":"","type":"datetime"}, > {"id":"","label":"Hover","pattern":"","type":"datetime"}, > {"id":"","label":"PointSum","pattern":"","type":"datetime"} ], "rows": [ > {"c":[{"v":"02:00:00","f":null},{"v":"02:50:00","f":null},{"v":"02:30:00","f":null},{"v":"02:15:00","f":null},{"v":"02:20:00","f":null}]} > ] } > > -- > 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. > -- Daniel LaLiberte <https://plus.google.com/100631381223468223275?prsrc=2> - 978-394-1058 [email protected] <[email protected]> 5CC, Cambridge MA [email protected] <[email protected]> 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 [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.
