This is the link to the jsfiddle (though I have no idea why it does not display anything) -> http://jsfiddle.net/MisterObama/thw6g/1/
On Friday, October 23, 2015 at 5:36:18 PM UTC+2, Sergey wrote: > > It looks like the stacked option didn't register. Not sure why that would > be; my guess is that you're not converting your options properly. If you > could post the code that generates this chart (preferably in a jsfiddle), > that would be helpful. > > On Fri, Oct 23, 2015 at 11:30 AM Chris Cole <[email protected] > <javascript:>> wrote: > >> >> Thank you! What you have said works nicely, but I think I found one more >> problem ruining the display... it looks as if some space is arbitrarily >> created where it shouldn't, here it is: >> >> >> <https://lh3.googleusercontent.com/-KP13BPvXh6k/VipSdTT6ckI/AAAAAAAAD2s/9zzNxuUQrZo/s1600/Screen%2BShot%2B2015-10-23%2Bat%2B17.29.12.png> >> >> How possibly is that? >> >> >> On Friday, October 23, 2015 at 5:00:35 PM UTC+2, Sergey wrote: >> >>> Hi, >>> >>> In order for the bar.groupWidth option to register, you need to run your >>> options through the options converter. To reduce the height of the labels, >>> you'll need to change their font size, which you can do using the >>> domainAxis.textStyle.fontSize option. Here's an example of a Bar chart >>> using both these options and the options converter: >>> http://jsfiddle.net/hr56z87y/ >>> >>> On Fri, Oct 23, 2015 at 10:51 AM Chris Cole <[email protected]> wrote: >>> >> I am drawing a barchart with data from [here][1], but I am not able to >>>> set the bars' labels' width and reduce the spacing between each bar. How >>>> do >>>> I do that? >>>> >>>> The result (You can find corresponding HTML page of the result >>>> attached): >>>> >>>> >>>> <https://lh3.googleusercontent.com/-SruMhJlbbRk/VipJD8MqHcI/AAAAAAAAD2c/_n-vMcvzNHY/s1600/Screen%2BShot%2B2015-10-23%2Bat%2B14.03.47.png> >>>> >>>> This is my code: >>>> >>>> function drawVisualization() { >>>> var chart = new google.charts.Bar(document.getElementById( >>>> 'columnchart_material')); >>>> >>>> >>>> var data = new google.visualization.DataTable(); >>>> data.addColumn('string', 'Country'); >>>> data.addColumn('number', 'Migrants entering a country'); >>>> data.addColumn('number', 'Migrants leaving a country'); >>>> >>>> >>>> loadMigrationData(); >>>> >>>> >>>> function loadMigrationData() { >>>> // console.log(countrySelected.value); >>>> >>>> >>>> d3.csv("NetMigrationRate.csv", function(csv) { >>>> csv = csv.filter(function(row) { >>>> return row; >>>> }) >>>> console.log(csv.length); >>>> >>>> >>>> data.setColumns([csv.length, { >>>> calc: cmToInches, >>>> type: 'number', >>>> label: 'Height in Inches' >>>> }]); >>>> data.addRows(csv.length); >>>> >>>> >>>> var migrants; >>>> for (var index in csv) { >>>> country = csv[index]['Country']; >>>> migrants = csv[index]['Migrants']; >>>> >>>> >>>> var ind = parseInt(index); >>>> data.setCell(ind, 0, country); >>>> >>>> >>>> if (migrants > 0) { >>>> >>>> >>>> data.setCell(ind, 1, migrants); >>>> >>>> >>>> } else if (migrants < 0) { >>>> >>>> >>>> data.setCell(ind, 2, migrants); >>>> } >>>> } >>>> var optionsCount = { >>>> isStacked: "true", >>>> bar: { >>>> groupWidth: "100%" >>>> }, >>>> bars: 'horizontal', >>>> width: 600, >>>> height: 2600, >>>> legend: { >>>> position: "none" >>>> }, >>>> }; >>>> chart.draw(data, optionsCount); >>>> }); >>>> } >>>> } >>>> >>>> >>>> >>>> I have already tried to set >>>> >>>> bar: {groupWidth: "100%"}, >>>> >>>> to increase the bars' width but with no results. >>>> How do I reduce the bar's labels' height and at the same time reduce >>>> the bars' width, in order to beautify the whole chart? >>>> >>>> Thank you in advance helpers! >>>> >>>> [1]: >>>> https://www.cia.gov/library/publications/the-world-factbook/rankorder/2112rank.html >>>> [3]: http://i.stack.imgur.com/tHoke.png >>>> >>>> -- >>>> 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. >>>> To view this discussion on the web visit >>>> https://groups.google.com/d/msgid/google-visualization-api/52910a5d-df84-4b35-9b3b-d2968a0bb246%40googlegroups.com >>>> >>>> <https://groups.google.com/d/msgid/google-visualization-api/52910a5d-df84-4b35-9b3b-d2968a0bb246%40googlegroups.com?utm_medium=email&utm_source=footer> >>>> . >>>> 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] >> <javascript:>. >> To post to this group, send email to [email protected] >> <javascript:>. >> Visit this group at >> http://groups.google.com/group/google-visualization-api. >> To view this discussion on the web visit >> https://groups.google.com/d/msgid/google-visualization-api/e10c0c0e-89bf-4f30-b1a0-9c1c81cdb161%40googlegroups.com >> >> <https://groups.google.com/d/msgid/google-visualization-api/e10c0c0e-89bf-4f30-b1a0-9c1c81cdb161%40googlegroups.com?utm_medium=email&utm_source=footer> >> . >> 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. To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/e53bb781-9699-48c9-9bae-a833370f80fd%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
