I believe the columns are as narrow as they are because if all of the columns had values, that's what would be required. So it looks like you would need to hide the empty rows. If you select just "IN" in your dropdown, then you see wider columns.
On Thu, Aug 13, 2015 at 11:48 AM, Christian Alexander <[email protected]> wrote: > I hate to bring back an old thread, but I noticed that the columns on the > chart are rather narrow- is this because I need to group and not hide the > other columns? > > On Monday, August 10, 2015 at 4:53:00 PM UTC-4, Daniel LaLiberte wrote: >> >> Hi Christian, >> >> I'm not sure about the error you are seeing, but there are a couple bugs >> involving animation that might be the cause. I got your example code to >> work by disabling the animation: >> https://jsfiddle.net/dlaliberte/crc91kho/ >> >> On Mon, Aug 10, 2015 at 4:29 PM, Christian Alexander <[email protected]> >> wrote: >> >>> Hey Everyone, >>> >>> When I'm attempting to draw a column chart, I'm receiving a strange >>> error- 'One or more participants failed to draw' followed by 'g is >>> undefined'. I stepped into the call stack through Firebug, but I wasn't >>> able to understand the minified Javascript. >>> >>> My code is below : >>> >>> <script type="text/javascript" src="https://www.google.com/jsapi >>> "></script> >>> <script src=" >>> https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js >>> "></script> >>> <script type="text/javascript"> >>> var queryObject; >>> >>> google.load('visualization', '1.0', {'packages':['controls']}); >>> google.setOnLoadCallback(drawChart); >>> >>> function drawChart(){ >>> $.ajax({ >>> type: 'POST', >>> url: 'initialize.jsp', >>> dataType: 'JSON', >>> success:function(data){ >>> queryObject = data; >>> }, >>> error:function(xhr,type){ >>> alert('Error in JSP'); >>> } >>> }).done(function() { >>> var data = new google.visualization.DataTable(); >>> var db = null; >>> data.addColumn('string', 'source'); >>> data.addColumn('string', 'system'); >>> data.addColumn('string', 'day'); >>> data.addColumn('string', 'direction'); >>> data.addColumn('number', 'messages'); >>> data.addColumn('number', 'packages'); >>> for(var i = 0 ; i < queryObject.volumeDetails.length ; i++){ >>> var source = queryObject.volumeDetails[i].source; >>> db = source; >>> var direction = queryObject.volumeDetails[i].direction; >>> var system = queryObject.volumeDetails[i].system; >>> var day = queryObject.volumeDetails[i].day; >>> var messages = queryObject.volumeDetails[i].messages; >>> var packages = queryObject.volumeDetails[i].packages; >>> data.addRow([source, system, day, direction, messages, >>> packages]); >>> } >>> >>> var dashboard = new >>> google.visualization.Dashboard(document.getElementById('TSL_space_div')); >>> >>> var chart = new google.visualization.ChartWrapper({ >>> chartType: 'ColumnChart', >>> options: { >>> title: db + ' Volume', >>> width: 450, >>> height: 450, >>> animation: { >>> startup: true, >>> duration: 1000, >>> easing: 'out' >>> }, >>> vAxis: { >>> title: 'Volume' >>> }, >>> legend: { >>> position: 'top' >>> } >>> }, >>> view: { >>> columns: [2,4,5] >>> }, >>> containerId: 'TSL_chart_div' >>> }); >>> >>> var directionFilter = new >>> google.visualization.ControlWrapper({ >>> controlType: 'CategoryFilter', >>> containerId: db + '_direction_filter_div', >>> values: ['In', 'Out'], >>> options: { >>> 'filterColumnLabel': 'direction', >>> ui: { >>> 'orientation': 'vertical', >>> 'caption': 'Select. . .', >>> 'label': 'Direction' >>> } >>> } >>> }); >>> >>> dashboard.bind(directionFilter,chart); >>> dashboard.draw(data); >>> } >>> ); >>> } >>> </script> >>> >>> The directionFilter is drawing, but the chart fails to draw. The data >>> table, in JSON format, is below : >>> >>> >>> {"cols":[{"id":"","label":"source","pattern":"","type":"string"},{"id":"","label":"system","pattern":"","type":"string"},{"id":"","label":"day","pattern":"","type":"string"},{"id":"","label":"direction","pattern":"","type":"string"},{"id":"","label":"messages","pattern":"","type":"number"},{"id":"","label":"packages","pattern":"","type":"number"}],"rows":[{"c":[{"v":"TSL"},{"v":"GIPLD"},{"v":"2015-08-04"},{"v":"OUT"},{"v":39},{"v":41}]},{"c":[{"v":"TSL"},{"v":"OPSYS"},{"v":"2015-08-04"},{"v":"OUT"},{"v":6},{"v":6}]},{"c":[{"v":"TSL"},{"v":"PCIS"},{"v":"2015-08-01"},{"v":"IN"},{"v":14},{"v":14}]},{"c":[{"v":"TSL"},{"v":"GIPLD"},{"v":"2015-08-03"},{"v":"OUT"},{"v":46},{"v":46}]},{"c":[{"v":"TSL"},{"v":"TFCS"},{"v":"2015-08-03"},{"v":"OUT"},{"v":30},{"v":30}]},{"c":[{"v":"TSL"},{"v":"LH"},{"v":"2015-08-03"},{"v":"OUT"},{"v":20},{"v":20}]},{"c":[{"v":"TSL"},{"v":"OPSYS"},{"v":"2015-08-04"},{"v":"IN"},{"v":475270},{"v":475270}]},{"c":[{"v":"TSL"},{"v":"PCIS"},{"v":"2015-08-04"},{"v":"IN"},{"v":77},{"v":77}]},{"c":[{"v":"TSL"},{"v":"PCIS"},{"v":"2015-08-03"},{"v":"IN"},{"v":148},{"v":148}]},{"c":[{"v":"TSL"},{"v":"GIPLD"},{"v":"2015-08-02"},{"v":"OUT"},{"v":6},{"v":6}]},{"c":[{"v":"TSL"},{"v":"LH"},{"v":"2015-08-02"},{"v":"OUT"},{"v":3},{"v":3}]},{"c":[{"v":"TSL"},{"v":"EH"},{"v":"2015-08-04"},{"v":"OUT"},{"v":1},{"v":1}]},{"c":[{"v":"TSL"},{"v":"OPSYS"},{"v":"2015-08-03"},{"v":"OUT"},{"v":10},{"v":10}]},{"c":[{"v":"TSL"},{"v":"LH"},{"v":"2015-08-04"},{"v":"OUT"},{"v":3},{"v":3}]},{"c":[{"v":"TSL"},{"v":"OPSYS"},{"v":"2015-08-02"},{"v":"IN"},{"v":114},{"v":114}]},{"c":[{"v":"TSL"},{"v":"OPSYS"},{"v":"2015-08-02"},{"v":"OUT"},{"v":3},{"v":3}]},{"c":[{"v":"TSL"},{"v":"CDC"},{"v":"2015-08-04"},{"v":"OUT"},{"v":11},{"v":11}]},{"c":[{"v":"TSL"},{"v":"TFCS"},{"v":"2015-08-02"},{"v":"OUT"},{"v":3},{"v":3}]},{"c":[{"v":"TSL"},{"v":"CDC"},{"v":"2015-08-03"},{"v":"OUT"},{"v":24},{"v":24}]},{"c":[{"v":"TSL"},{"v":"EH"},{"v":"2015-08-02"},{"v":"OUT"},{"v":3},{"v":3}]},{"c":[{"v":"TSL"},{"v":"EH"},{"v":"2015-08-03"},{"v":"OUT"},{"v":2},{"v":2}]},{"c":[{"v":"TSL"},{"v":"OPSYS"},{"v":"2015-08-03"},{"v":"IN"},{"v":425272},{"v":425272}]},{"c":[{"v":"TSL"},{"v":"TFCS"},{"v":"2015-08-04"},{"v":"OUT"},{"v":21},{"v":21}]}]} >>> >>> I'm not sure what 'g' is referring to or why it's undefined- the >>> containerId is correct for the chart, so I'm not too sure what else it >>> could be. >>> >>> Help is greatly appreciated! :) >>> >>> Regards, >>> >>> Christian >>> >>> -- >>> 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] 5CC, Cambridge MA >> [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. > -- 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.
