Thanks for your reply. I understood what you mean but what is quite strange is that just 2 bars out of 3 disappear when adding the 2 last lines... Well, I tried modifying the chartwidth and the bar.grooupwidth but unfortunately that didn't change anything. I've attached two screenshots (with and without the two last rows). I assume that there is no chance to mitigate this issue without adjusting my data. Right?
On Thursday, March 7, 2013 7:44:35 PM UTC+1, asgallant wrote: > > The last two rows, with the dates "new Date( 2013 , 2 , 5 , 11 , 55 , 59 > )" and "new Date( 2013 , 2 , 5 , 12 , 29 , 37 )" are too close together. > The API determines the available group width for each row of data and uses > the smallest one for all rows of data; since these two rows are so close > together (~35 minutes apart on a scale of 3.5 weeks) the available space > for them is very small. You can mitigate this effect somewhat by making > the chart wider and/or setting the bar.groupWidth option to "100%", but > perhaps the best option would be to adjust your data slightly. As an > example, if you group your data by day instead of allowing the time of day > to play a factor in the chart, then you won't encounter this problem on the > scale of your chart as it is now (though you could conceivably encounter it > again if you make the chart go over a much longer time period [say, several > months or a year]). > > On Thursday, March 7, 2013 12:05:51 PM UTC-5, Morsi Tlili wrote: >> >> 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]. >>> To unsubscribe from this group, send email to >>> [email protected]. >>> 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.
<<attachment: graph with the two last rows.png>>
<<attachment: graph without the two last rows.png>>
