Hi I'm having an issue with Column chart, I'm using the code below . It works well if I remove the last Item ( var timestamp= new Date( 2013 , 2 , 5 , 12 , 29 , 37 ) ; alert(timestamp); data.setCell(inc, 0, timestamp); data.setCell(inc, 1 , 8165 ); data.setCell(inc, 2 , 0 ); data.setCell(inc, 3 , 0 ); inc = inc + 1 ; ). If I include the above lines at the end of my chart, Several, Columns disappear.
Thanks in advance for your support. My Code : <html> <head> <script type="text/javascript" src="https://www.google.com/jsapi";></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChartTcTimeline); function drawChartTcTimeline() { var data = new google.visualization.DataTable(); data.addColumn('datetime', 'Time'); var tcname = "BookSearch" ; data.addColumn('number', tcname); var tcname = "SearchingByCategorie" ; data.addColumn('number', tcname); var tcname = "BookReservation" ; data.addColumn('number', tcname); data.addRows(15 ); var inc = 0; var timestamp= new Date( 2013 , 1 , 11 , 1 , 13 , 43 ) ; data.setCell(inc, 0, timestamp); data.setCell(inc, 1 , 8280 ); data.setCell(inc, 2 , 8312 ); data.setCell(inc, 3 , 12726 ); inc = inc + 1 ; var timestamp= new Date( 2013 , 1 , 12 , 1 , 42 , 3 ) ; data.setCell(inc, 0, timestamp); data.setCell(inc, 1 , 8230 ); data.setCell(inc, 2 , 8374 ); data.setCell(inc, 3 , 12752 ); inc = inc + 1 ; var timestamp= new Date( 2013 , 1 , 13 , 1 , 54 , 42 ) ; data.setCell(inc, 0, timestamp); data.setCell(inc, 1 , 8424 ); data.setCell(inc, 2 , 8474 ); data.setCell(inc, 3 , 12752 ); inc = inc + 1 ; var timestamp= new Date( 2013 , 1 , 14 , 1 , 22 , 55 ) ; data.setCell(inc, 0, timestamp); data.setCell(inc, 1 , 8231 ); data.setCell(inc, 2 , 8276 ); data.setCell(inc, 3 , 12660 ); inc = inc + 1 ; var timestamp= new Date( 2013 , 1 , 15 , 1 , 25 , 11 ) ; data.setCell(inc, 0, timestamp); data.setCell(inc, 1 , 8446 ); data.setCell(inc, 2 , 8488 ); data.setCell(inc, 3 , 12933 ); inc = inc + 1 ; var timestamp= new Date( 2013 , 1 , 16 , 1 , 23 , 14 ) ; data.setCell(inc, 0, timestamp); data.setCell(inc, 1 , 8357 ); data.setCell(inc, 2 , 8411 ); data.setCell(inc, 3 , 12725 ); inc = inc + 1 ; var timestamp= new Date( 2013 , 1 , 17 , 1 , 21 , 52 ) ; data.setCell(inc, 0, timestamp); data.setCell(inc, 1 , 8307 ); data.setCell(inc, 2 , 8327 ); data.setCell(inc, 3 , 12706 ); inc = inc + 1 ; var timestamp= new Date( 2013 , 1 , 18 , 1 , 23 , 6 ) ; data.setCell(inc, 0, timestamp); data.setCell(inc, 1 , 8228 ); data.setCell(inc, 2 , 8393 ); data.setCell(inc, 3 , 12713 ); inc = inc + 1 ; var timestamp= new Date( 2013 , 1 , 19 , 1 , 20 , 53 ) ; data.setCell(inc, 0, timestamp); data.setCell(inc, 1 , 8459 ); data.setCell(inc, 2 , 8319 ); data.setCell(inc, 3 , 12761 ); inc = inc + 1 ; var timestamp= new Date( 2013 , 1 , 20 , 1 , 22 , 1 ) ; data.setCell(inc, 0, timestamp); data.setCell(inc, 1 , 8234 ); data.setCell(inc, 2 , 8262 ); data.setCell(inc, 3 , 12634 ); inc = inc + 1 ; var timestamp= new Date( 2013 , 2 , 5 , 11 , 55 , 59 ) ; alert(timestamp); data.setCell(inc, 0, timestamp); data.setCell(inc, 1 , 0 ); data.setCell(inc, 2 , 0 ); data.setCell(inc, 3 , 0 ); inc = inc + 1 ; var timestamp= new Date( 2013 , 2 , 5 , 12 , 29 , 37 ) ; alert(timestamp); data.setCell(inc, 0, timestamp); data.setCell(inc, 1 , 8165 ); data.setCell(inc, 2 , 0 ); data.setCell(inc, 3 , 0 ); inc = inc + 1 ; var options = { title: 'Test Cases TimeLine', hAxis: {viewWindowMode: 'pretty'}, sortColumn: 0, bar: {groupWidth:20 } }; var view = new google.visualization.DataView(data); var chart = new google.visualization.ColumnChart(document.getElementById('testcasestimeline_div')); // Listen for the 'select' event, and call my function selectHandler() when // the user selects something on the chart. // google.visualization.events.addListener(chart, 'select', selectHandler); chart.draw(view, options); } </script> </head> <body> <!--Div that will hold the pie chart--> <div id="testcasestimeline_div" style="width:800; height:300"></div> </body> </script> </html> On Saturday, May 22, 2010 4:23:32 PM UTC+2, FrankP wrote: > > I am having issues with creating a column chart with a datetime > access. The data is coming in via XML and being converted to a > javascript date. The date object is valid in the js code and the code > has no errors. The dates in the XML are also sequential hourly values > spanning a 25 hour period. > > I have tried a couple date formats in the XML and both convert to > valid date objects. Here are the I currently have in the XML: <dt>Fri > May 21 2010 11:00:00 PM</dt> or <dtb>May 21, 2010 23:00:00</dtb> > > The column chart builds fine when the datetime is a string so I am > certain it is an issue with the datetime. When I change the code to > use a datetime column and a date object I receive the following > error: "inconsistent data type accross series on vertical axis" > > Here’s the code less the XML calls: > > var data = new google.visualization.DataTable(); > data.addColumn('datetime', 'Hour'); > data.addColumn('number','Watts/SF'); > data.addRows(x.length); > /* XML call's removed */ > for(i=0;i<x.length;i++) { > //dt=x[i].getElementsByTagName("dt")[0].firstChild.nodeValue; > > var dt = > x[i].getElementsByTagName("dt")[0].firstChild.nodeValue; > alert(dt); > data.setValue(i,0, new Date(dt)); > var myVal = x[i].getElementsByTagName("value") > [0].firstChild.nodeValue; > > data.setValue(i,1,myVal*1); > } > > var chart = new > google.visualization.ColumnChart(document.getElementById('elChart')); > chart.draw(data, {width: 1200, height: 750, title: 'Electric > Consumption', titleFontSize: 32, > hAxis: {title: 'Hour', titleColor:'red'} > }); > > Any ideas or known issues with the datetime format? Thanks > > -- > You received this message because you are subscribed to the Google Groups > "Google Visualization API" group. > To post to this group, send email to > [email protected]<javascript:>. > > To unsubscribe from this group, send email to > [email protected] <javascript:>. > For more options, visit this group at > http://groups.google.com/group/google-visualization-api?hl=en. > > -- 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?hl=en. For more options, visit https://groups.google.com/groups/opt_out.
