StackedBar Chart annotation labels

686 views
Skip to first unread message

Bori Konstantinov

unread,
Jan 5, 2016, 3:11:59 PM1/5/16
to Google Visualization API
Hi all,

I have a question regarding annotation labels on a StackedBar Chart. I currently have annotated stack bar where the labels are on the inside. But I may have situations where a bar segment may be pretty small, and hence the label might not actually fit inside the segment. In this situation, I am looking to have the label appear right above that specific segment with a line pointing from that label to the segment, so it's clear what segment that label is for.

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

      // Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

        // Create the data table.
        var data = google.visualization.arrayToDataTable([
        [ 'Discount Amount',
          'No Discount', { role: 'annotation' } ,
          '1% - 10%', { role: 'annotation' } ,
          '11% -24%', { role: 'annotation' } ,
          '25-49%', { role: 'annotation' } ,
          '50%+', { role: 'annotation' } ,
          'Unsure', { role: 'style' },{ role: 'annotation' } ],
        ['Overall average discount',14, '14%', 15, '15%', 10,'10%', 10, '10%', 13, '13%', 39,'opacity: 0.2','39%'],
        ['NetApp', 13,'13%', 9, '9%', 13, '13%', 13, '13%', 35, '35%',1, 'opacity: 0.2','1%'],
        ['EMC', 7, '7%', 13, '13%', 7, '7%', 7, '7%', 13, '13%', 53, 'opacity: 0.2','53%'],
        ['Synology',33, '33%', 33,'33%',0,'',0,'',17,'17%',17, 'opacity: 0.2','17%'],
        ['Dell',0,'',0,'',0,'',20,'20%',0,'',80, 'opacity: 0.2','80%']
      ]);

      var options = {
        title: 'Discount threshold',
        width: 1000,
        height: 600,
        legend: { position: 'top', maxLines: 6 },
        bar: { groupWidth: '50%' },
        isStacked: 'percent',
        colors: ['#00CDCD', '#EEAD0E', '#FF00FF', '#32CD32', '#CD0000', '#808080'],
        hAxis: { textPosition: 'none', gridlines:{color:'transparent'}},
        annotations: { position: 'top'}
      };

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>

  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div"></div>
  </body>
</html>

This code produces the attached bar graph. As you can see, there is a very small segment on the NetApp row (very last segment) which I've hard-coded to have a 1% percentage. This segment is obviously too small  have the percentage fit inside, so I would like to have a appear above that segment with a line connecting. I know of the 'annotation.alwaysOutside' configuration I can enable, but that applies that to all the labels, but I'm only concerned with the label that fit the above description. Would this require some sort of secondary helper function? Any suggestions?

Thank you very much!

Daniel LaLiberte

unread,
Jan 5, 2016, 3:24:05 PM1/5/16
to Google Visualization API
Hi Bori,

We acknowledge several deficiencies in the layout of annotations, and in bar and column charts especially.  We plan to fix these in the coming months by doing something like what you suggest, drawing a line between an annotation that doesn't fit inside a bar, connecting it with its bar.  Until then, I can't suggest any reasonable workaround for your particular case.

Before the general solution, we might offer an intermediate solution that would let you specify the location or offset of your annotation on a per-annotation basis.  It would be awkward, but would satisfy many special cases.

--
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-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@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/860784da-beba-4052-b74d-9501a99e2441%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.



--

Bori Konstantinov

unread,
Jan 5, 2016, 3:38:22 PM1/5/16
to Google Visualization API
Aw, that's too bad. Thank you very much for the quick response, Daniel!

Cheers.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.



--
Reply all
Reply to author
Forward
Message has been deleted
0 new messages