CODEWITHSUNDEEP
javajavascriptgoogle-apigoogle-visualization
Arunprasath
Arunprasath

Reputation: 561

How to display the axis value using annotation in bottom of bar in stacked column chart of google api chart?

Here i am using stacked columnchart. In this chart i am trying to display annotation value. annotation value display in top of bar. but i need value displayed in bottom of bar.

Actual: enter image description here

Excepted: enter image description here

<%@page contentType="text/html" pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
        <head>
            <title>Line chart for DAR</title>
            <script type="text/javascript" src="https://www.google.com/jsapi"></script>
            <script type="text/javascript">
                google.load("visualization", "1", {packages: ["corechart"]});
                google.setOnLoadCallback(drawChart);
                function drawChart() {
                    var data =new google.visualization.DataTable();
                    data.addColumn({type: 'string', label: 'label'});
                    data.addColumn({type: 'number', label: 'No visits'});
                    data.addColumn({type: 'number', label: 'All members'});                
                    data.addColumn({type: 'number', role: 'annotation'});
                    data.addRows([['<2', 25, 23, 23],
                            ['2-5', 36, 37, 37],
                            ['6-8', 18, 19, 19],
                            ['9-11', 25, 26, 26],
                            ['12-15', 25, 24, 24],
                            ['16-19', 25, 21, 21],
                            ['20-34', 25, 22, 22],
                            ['35-49', 25, 28, 28],
                            ['50-64', 25, 29, 29],
                            ['65-74', 25, 30, 30],
                            ['75+', 25, 25, 25]
                    ]);
                    var options = {                            
                        isStacked: true,
                        vAxis: {
                            baselineColor: '#fff',
                            gridlineColor: '#fff',
                            textPosition: 'none'
                        },                            
                        tooltip: {
                            trigger: 'none'
                        },
                        series: {
                            0: {
                                color: '#4169E1'
                            },
                            1: {
                                color: '#87CEFA'
                            }
                        }

                    };
                    var chart = new  google.visualization.ColumnChart(document.getElementById('columnchart_div'));
                    chart.draw(data, options);
                }
            </script>
        </head>
        <body>
            <div id="columnchart_div" style="width: 900px; height: 500px;"></div>
        </body>
    </html>

Upvotes: 2

Views: 3286

Answers (2)

Milind Morey
Milind Morey

Reputation: 2114

use string type annotation for each stack

click here to see answer example in jsfiddle ,you cannot align it bottom but, we can assign annotations to each stack bar

Upvotes: 0

manuelpgs
manuelpgs

Reputation: 1372

I had a similar needs and my solution was a custom JavaScript function.

My case is a bit different, but it is a good approach to do what you need. For example, see the below function (I write some comments).

    function fixAnnotationPos(){

    //the text tag
    var textTags = document.getElementsByTagName("text");

    //bucle for each text tag
    for (var i = 0; i < textTags.length; i++) {

      // the attributes text-anchor, x and y are in each text tag of my annotation  
      if (textTags[i].hasAttribute("text-anchor") && textTags[i].hasAttribute("x") && textTags[i].hasAttribute("y")) {

            var textanchor = textTags[i].getAttribute("text-anchor");
            var x = textTags[i].getAttribute("x");
            var fill = textTags[i].getAttribute("fill");                                                

            //in my case, only the annotations text have a attribute with
            // name: text-anchor and value: end
            // in your case, it can be different and maybe you need make exta validations
             // my recomendations is see the tags and attributes in your SVG graph to make the correct validations. 
             if (textanchor == 'end') {

                // now, I can change the X position and other styles easy.
                // this can inspire you to do more stuff
                x = parseInt(x)
                textTags[i].setAttribute("x", x + 86);
                textTags[i].setAttribute("fill", "#bfbfbf");
                textTags[i].setAttribute("font-weight", "bold");
                textTags[i].setAttribute("font-size", "13");


            }
        }
    } 

}

Finally, you need call this function inside of method: drawChart in the end line, just after draw the graph:

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

            fixAnnotationPos();

Here a quick example with your code. See how the annotate text changed position:

example in jsbin

Upvotes: 1

Related Questions