2

I simply want to "center" the annotation in the bars in this chart. You can see how the data appear at the end of the bar. Can that percentage be centered in the bar?

Try as I might, I cannot figure it out. I found a block of code that was described as a hack, but it would have to be customized for each chart. I use this code to generates lots and lots of charts. Any help would be wildy appreciated!

enter image description here

function drawVisualizationstack(qid,cdata, w,h,l,cw,pos,stacked,questioncase) {   
    pos='top';
    var data = new google.visualization.DataTable();
var e;       
for (var k=0;k<cdata.length;k++) {
    e=cdata[k];

    if (e[0]=='column') {
            if (e[2]=="tooltip") {
                data.addColumn({type:'string',role:'tooltip','p':{'html':true}});
                //data.addColumn({type: 'string', role: 'annotation','p':{'html':true}});
            }
            else if (e[2]=="annotation") {
                data.addColumn({type: 'string', role: 'annotation', p: {html: true}}); 
            }
        else {
            if (e[2]=="All") e['2']="All";
            data.addColumn(e[1],e[2]);
        }
    }   
    else {                                        
                    if (e==="" || e===undefined) {mclog('UNDEFINED DATA ROW FOR ' + qid);}
                    else {
                        data.addRow(e);
                    }
                }
    }
h=h*.75;   
var chartHeight=h-65;
var options = {
    width:500,
    height:h,
    isStacked:true,
    chartArea:{height:chartHeight,left:l,width:cw},
    backgroundColor:'transparent',
    bar:{groupWidth:'80%'},
    tooltip: {isHtml:true},
    legend:{position:'none'},
    hAxis: {title: 'Percentage',minValue:0,maxValue:100},
    hAxis: {textPosition: 'none',ticks: [0]},
    colors: ['#5d5d5d', '#002e32', '#0e1a40', '#364940', '#a9b861', '#404000', '#504000', '#604000', '#003070', '#687000'] //set default colors for charts
}}},
true,italic: true,color: '#871b47',auraColor: '#d799ae',opacity: 0.8}}
     }
var chart = new google.visualization.BarChart(document.getElementById('questchart_'+qid));
jQuery("base").attr('href',document.location);
chart.draw(data,options);

}

WhiteHat
  • 59,912
  • 7
  • 51
  • 133
David Weisser
  • 117
  • 1
  • 10
  • 2
    there are no standard options for placement of the [annotations](https://developers.google.com/chart/interactive/docs/roles#what-roles-are-available) – WhiteHat Mar 11 '16 at 15:14
  • So, the hack, it's the only way? I've *seen* other charts where the label is centered. It seems crazy that in such a complex environment, there's no straightforward option for this - but, that probably just describes my ignorance more than anything. Thank you WhiteHat. – David Weisser Mar 11 '16 at 15:19
  • using a hack is the only way i know, didn't see the one you mention, did I miss something? you can modify the chart's SVG, once the `'ready'` event has fired. similar to [this answer](http://stackoverflow.com/a/35848832/5090771), which modifies the _contents_ of the labels. but placement will be much more difficult than content... – WhiteHat Mar 11 '16 at 15:28
  • Hmm. The "hack" I mentioned is in [this answer.](http://stackoverflow.com/questions/31889316/wrong-position-of-annotations-in-a-stacked-bar-chart-google-chart-api?rq=1). It will be a wrestling match to get it implemented methinks. – David Weisser Mar 12 '16 at 14:07
  • 1
    the one you found looks safer / easier, doesn't involve messing with the dom... – WhiteHat Mar 12 '16 at 14:18
  • I'm so outside my league here, but maybe I can make this work....Thanks again WhiteHat! – David Weisser Mar 12 '16 at 19:59

0 Answers0