{"id":17518,"date":"2015-02-20T17:25:06","date_gmt":"2015-02-20T11:55:06","guid":{"rendered":"https:\/\/2thenew.online\/blog\/?p=17518"},"modified":"2015-02-26T12:34:54","modified_gmt":"2015-02-26T07:04:54","slug":"vertical-labels-with-google-chart-api","status":"publish","type":"post","link":"https:\/\/2thenew.online\/blog\/vertical-labels-with-google-chart-api\/","title":{"rendered":"Vertical Labels with Google Chart API"},"content":{"rendered":"

While working with Google charts, we usually face issues with long labels on the horizontal axis.<\/p>\n

The chart displays\u00a0well, however the X-axis labels are not completely\u00a0visible and displays the numbers like this:\u00a024\/3.. 25\/3.. 26\/3.. 27\/3.. 28\/3.. 30\/3.. 31\/3.. instead of
\n24\/3\/2006, 25\/3\/2006, 6\/3\/2006, 27\/3\/2006, 28\/3\/2006, 30\/3\/2006, 31\/3\/2006<\/p>\n

The usual practice that we all apply is that we\u00a0shorten the labels and create a legend to explain what the labels actually represent.<\/p>\n

This blog will help you with an alternate solution to this issue by using\u00a0vertical labels.<\/p>\n

Here you go:<\/p>\n

Step 1 : Include Google API in your head tag :<\/p>\n

[java]google.load("visualization", "1", {packages: ["corechart"]});
\ngoogle.setOnLoadCallback(drawMyChart)[\/java]<\/p>\n

Step 2 : Create a DIV, where you want to draw your chart :<\/p>\n

[java]<div id="myChart"><\/div>
\n[\/java]<\/p>\n

Step 3 : Create a data for your ComboChart :<\/p>\n

[java]var data = google.visualization.arrayToDataTable([
\n [‘Month’, ‘Bolivia’, ‘Ecuador’, ‘Madagascar’, ‘Papua New Guinea’, ‘Rwanda’, ‘Average’],
\n [‘2004\/05\/01’, 165, 938, 522, 998, 450, 614.6],
\n [‘2005\/06\/01’, 135, 1120, 599, 1268, 288, 682],
\n [‘2006\/07\/01’, 157, 1167, 587, 807, 397, 623],
\n [‘2007\/08\/01’, 139, 1110, 615, 968, 215, 609.4],
\n [‘2008\/09\/01’, 136, 691, 629, 1026, 366, 569.6]
\n]);
\n[\/java]<\/p>\n

Step 4 : Define options for your chart :<\/p>\n

[java] var options = {
\n title: ‘Monthly Coffee Production by Country’,
\n height: 350,
\n seriesType: "bars",
\n vAxis: {
\n title: "Cups"
\n },
\n hAxis: {
\n title: "Month",
\n slantedText: true, \/* Enable slantedText for horizontal axis *\/
\n slantedTextAngle: 90 \/* Define slant Angle *\/
\n },
\n ‘chartArea’: { ‘width’: ‘82%’, height: ‘60%’, top: ‘9%’, left: ‘15%’, right: ‘3%’, bottom: ‘0’} \/* Adjust chart alignment to fit vertical labels for horizontal axis*\/
\n};
\n[\/java]<\/p>\n

Add parameter options with ‘slantedTextAngle’ : 90 degree to show label vertically<\/p>\n

Step 5: Add above 2 block of codes inside ‘drawMyChart’ function, and then draw your Combo Chart:<\/p>\n

[java]function drawMyChart(){
\nvar data = …
\nvar options =
\n …
\n}<\/p>\n

var chart = new google.visualization.ComboChart(document.getElementById(‘chart_div’)); \/* Define your ComboChart object *\/
\nchart.draw(data, options); \/* draw the chart using above define ‘data’ and ‘options’ *\/<\/p>\n

}[\/java]<\/p>\n

The\u00a0chart looks like this now:<\/p>\n

\"vertical-labels-with-google-charts-w800\"<\/a><\/p>\n

Hope this helps everyone!<\/p>\n

Reach out to me for any queries at\u00a0mansi[at]intelligrape[dot]com<\/p>\n","protected":false},"excerpt":{"rendered":"

While working with Google charts, we usually face issues with long labels on the horizontal axis. The chart displays\u00a0well, however the X-axis labels are not completely\u00a0visible and displays the numbers like this:\u00a024\/3.. 25\/3.. 26\/3.. 27\/3.. 28\/3.. 30\/3.. 31\/3.. instead of 24\/3\/2006, 25\/3\/2006, 6\/3\/2006, 27\/3\/2006, 28\/3\/2006, 30\/3\/2006, 31\/3\/2006 The usual practice that we all apply is […]<\/p>\n","protected":false},"author":79,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":52,"footnotes":""},"categories":[7],"tags":[1648,4842,55,1649,1650],"class_list":["post-17518","post","type-post","status-publish","format-standard","hentry","category-grails","tag-google-charts","tag-html","tag-javascript","tag-vertical-labels","tag-x-axis"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t