Stacked Column Annotations Google Charts

Question

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 free charts.

Annotation function call is :--

    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();
});
}

Regards.

WhiteHat WhiteHat · Accepted Answer · 2017-01-24T15:42:52

there isn't a standard option, but you can use null for blank annotations

when loading, try the following to show annotations for every third row...

    for (var i = 0; i< json[0].data.length; i++){
        var annotation1 = null;
        var annotation2 = null;
        var annotation3 = null;
        if ((i % 3) === 0) {
          var annotation3 = json[3].data[i];
          var annotation2 = json[2].data[i];
          var annotation1 = json[1].data[i];
        }
        data.addRow([
          json[0].data[i],
          json[3].data[i],
          annotation3,
          json[2].data[i],
          annotation2,
          json[1].data[i],
          annotation1
        ]);
    }

Stacked Column Annotations Google Charts

1 Answers