Google-chart legend item alignment

2,667 views
Skip to first unread message

Maciej Golkowski

unread,
Apr 5, 2018, 10:12:20 AM4/5/18
to Google Visualization API
I am trying to find a way to display google charts legend items aligned to colour rectangles. Obviously, a number of characters in the item description affect its alignment. Does anybody have an idea for a workaround?

<html>
   <head>
      <title>Space utilisation</title>
      <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
      </script>
      <script type = "text/javascript">
         google.charts.load('current', {packages: ['corechart']});
      </script>
   </head>
   <body>     
      <div id = "container" style = "width: 100%; height: 100%; margin: 0 auto">
      </div>
      <script language = "JavaScript">
         function drawChart() {
            // Define the chart to be drawn.
            var data = google.visualization.arrayToDataTable([
                    ['host','lvm-partition-abcde','lvm-partition-abcgf','lvm-partition-dfgdfgd','lvm-partition-fgh','lvm-partition-abc','lvm-partition-abc','lvm-partition-abc','lvm-partition-abc','lvm-partition-abc','lvm-partition-abc','lvm-partition-ab','lvm-partition-abhfhfgh','lvm-partition-abc','lvm-partition-abc','lvm-partition-abchg','lvm-partition-abfdc','lvm-partition-abdfc','lvm-partition-abfsc','lvm-partition-abc','lvm-partition-abfdsc','lvm-partition-abc','lvm-partition-abc','lvm-partition-abc','lvm-partition-abc','lvm-partition-abc','lvm-partition-abc','lvm-partition-abc','lvm-partition-abc','lvm-partition-abc','lvm-partition-abc','lvm-partition-abc','lvm-partition-abc','lvm-partition-abc','lvm-partition-abc','lvm-partition-abc','lvm-partition-abc','lvm-partition-abc','lvm-partition-abc','lvm-partition-abc','lvm-partition-abc','lvm-partition-abc','lvm-partition-abc','lvm-partition-abc','lvm-partition-abc','lvm-partition-abc','lvm-partition-abc','lvm-partition-abc','lvm-partition-abc','free'],
                    ['host1',1048576,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,904936],
                    ['host2',null,706560,691200,327680,51200,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,43120],
                    ['host3',null,null,null,null,null,409600,266240,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,123096],
                    ['host4',null,null,null,null,null,null,null,1153436,358400,102400,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,50984],
                    ['host5',null,null,null,null,null,null,null,null,null,null,286720,675840,51200,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,651460],
                    ['host6',null,null,null,null,null,null,null,null,null,null,null,null,null,614400,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,314272],
                    ['host7',null,null,null,null,null,null,null,null,null,null,null,null,null,null,614400,51200,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,263072],
                    ['host8',null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,742400,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,186272],
                    ['host9',null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,399360,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,529312],
                    ['host10',null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,645120,552960,358400,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,108736],
                    ['host11',null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,307200,481280,276480,317440,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,282816],
                    ['host12',null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,665600,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,999320],
                    ['host13',null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,460800,532500,430080,614400,512000,512000,51200,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,1986524],
                    ['host14',null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,2828700,512000,389120,102400,102400,null,null,null,null,null,null,null,null,null,null,1164884],
                    ['host15',null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,686080,665600,1309492,null,null,null,null,null,null,null,2438224],
                    ['host16',null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,348160,512000,512000,281600,1173916,256000,51200,1964628]
                    ]);

            var options = {
                            title: 'LVM PARTITION: ', 
                            isStacked:'absolute', 
                            series: {48:{color:'#888'}},
                            legend: { position: "top", maxLines: 9, alignment:'start'  },
                            hAxis: {format:'# mb'}

                };

            // Instantiate and draw the chart.
            var chart = new google.visualization.BarChart(document.getElementById('container'));
            chart.draw(data, options);
         }
         google.charts.setOnLoadCallback(drawChart);
      </script>
   </body>
</html>
screenshot.JPG

Sean Larson

unread,
Apr 5, 2018, 3:55:08 PM4/5/18
to Google Visualization API
Hmm. I think you need to group the series into categories. I am guessing so because you are using a stacked chart.

For example, assume you want to plot a series of "Hosts" and per host you have 5 buckets (some may be null or zero per host). This is different than each host having "n" unique buckets which is what you are currently plotting.

Please let me know if this is closer to what you want, and I can help you from there. If not....Have you tried other types of legend alignments? Or setting the legend to be on left and vertical?

Maciej Golkowski

unread,
Apr 6, 2018, 5:33:58 AM4/6/18
to google-visua...@googlegroups.com
Hi Sean,



I am completely satisfied, how the chart was rendered. My question is about legend items alignment and the nature of it is pure aesthetics :D. I would like them to be aligned per column. I tried other legend positioning and alignment. However, for this number of items, it creates pages eg. 1/3 2/3..., I would like to have an overview of them all on a single page, also if there was an option to sort them by name etc. Someone on StackOverflow suggested:
" only option i can think of would be to manually move all the labels when the chart's 'ready' event fires, or create your own custom legend...", fair enough, but the data array is generated dynamically and to create custom legend each time would be a pain.( at least for me )
legend: { position: "top", maxLines: 9, alignment:'start'  },
maxLines option was not fully documented and apparently only works with top positioning

Thanks

--
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 google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/75182339-d09f-4b96-9e8e-544a24acdab1%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Sean Larson

unread,
Apr 6, 2018, 10:51:38 AM4/6/18
to Google Visualization API
Got it. I also thought about custom aligning every entry, but I am not sure if GC supports that and JQuery does not play nice with SVG elements, so we should tackle this before rendering if there are no mix of attributes that achieve what we want.

You could determine the longest legend string prior to drawing the chart, and based on the length of each string add spaces to make them all an identical length?

But I am thinking it is not a great practice to display so many legend entries? When they hover over each block, doesn't it display the series name and value? If not you can add tooltip attributes in the options variable, or write a custom toolitp, see this link https://www.dropbox.com/s/1szgg7bbe0b0aea/custom%20tooltip.PNG?dl=0

I usually use Excel as a benchmark. What does it look like when you load this data into Excel?


Maciej Golkowski

unread,
Apr 9, 2018, 8:44:16 AM4/9/18
to google-visua...@googlegroups.com
I tried suggestion with adding spaces however, it seems like api trims them :D 
I will just stick to paged legend positioned on the side, oh well.
Thanks for Your response.


--
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 google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/a603daaa-9cb5-4626-906f-328b8a45a8ee%40googlegroups.com.
Reply all
Reply to author
Forward
0 new messages