Stacked Column Annotations Google Charts

[Abhayman Anand]

While creating a stacked column chart using google charts, the annotations are getting overlapped due to large amount data. Is there anyway to get it adjusted. Like displaying only for every 3rd column. I know this concept works fine with highcharts but I was looking for googlecharts.

function drawVisualization() {

var json;

$.getJSON('end.json', function (json) {

var data = new google.visualization.DataTable();

            data.addColumn('string', 'Time');

            data.addColumn('number', 'Run 3');

data.addColumn({ type: 'number', role: 'annotation' });

data.addColumn('number', 'Run 2');

data.addColumn({ type: 'number', role: 'annotation' });

data.addColumn('number', 'Run 1');

data.addColumn({ type: 'number', role: 'annotation' });

for (var i = 0; i< json[0].data.length; i++){

                data.addRow([json[0].data[i], json[3].data[i],json[3].data[i],json[2].data[i],json[2].data[i],json[1].data[i], json[1].data[i]]);

}

     

var options = {

title: "End to End Processing",

tooltip: {isHtml: true},

legend:{position:"right"},

isStacked:true,

height:window.innerHeight,

width: window.innerWidth,

bar: {groupWidth: '3'},

focusTarget: 'category',

     vAxis: {

viewWindowMode:'explicit',

viewWindow: {

max:60,

min:0

},

gridlines :{count:6},

title:'Time in mins',

format: 'short' 

},

        hAxis: {

format: 'd/m/y', 

textStyle : {

fontSize: 9  

},

slantedText: true, 

slantedTextAngle: 270

},

annotations: {

textStyle: {

color: 'black',

fontSize: 11,

fontStyle: 'bold'

},

stemLength: 20,

displayAnnotationsFilter: true,

legendPosition: 'newRow'

},

series: {

0:{color:'lightgreen'},

1:{color:'black'},

2:{color:'#1E90FF',},

3:{ type: 'line', lineWidth: 0, visibleInLegend:false, pointSize: 0}

}

    }

var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));

    chart.draw(data, options);

});

$(window).resize(function(){

 drawVisualization();

});

  }

[Daniel LaLiberte]

We don't have an option to eliminate annotations that overlap, though that is an interesting variation that might not be very difficult to implement.

I've been planning to implement a force-directed adjustment of the annotations so that they don't overlap, but detecting the overlapping annotations would be the first thing we would implement as part of that solution.

--
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/09c349e6-cf1a-4c54-8f84-127860756aa0%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte

dlaliberte@Google.com   5CC, Cambridge MA