Annotations Google Chart - Stacked Horizontal

Question

Annotations Google Chart - Stacked Horizontal

Navigation

#1 by (1 votes)

1

I'm using Google Chart to develop some charts. I have the following chart working:

<script src="https://www.google.com/jsapi?autoload={%27modules%27:[{%27name%27:%27visualization%27,%27version%27:%271.1%27,%27packages%27:[%27bar%27]}]}.js"></script><divid="chart_div"></div>

<script>

  google.setOnLoadCallback(drawChart);
    function drawChart() {
             var tdata = google.visualization.arrayToDataTable([
                   ['Estados', 'Concluídos', 'Total'],
                   ['MS', 1, 262],
                   ['RJ', 70, 205],
                   ['SP', 57, 176],
                   ['MG', 0, 82]
                ]);
                var options = {
                    chart: {
                        title: 'Gráfico Clientes',
                        subtitle: 'Total Clientes',
                    },
                    bars: 'horizontal', // Required for Material Bar Charts.
                    hAxis: { format: 'decimal' },
                    height: 400,
                    colors: ['#1b9e77', '#d95f02'],
                    isStacked: true
                };

                var chart = new google.charts.Bar(document.getElementById('chart_div'));

                chart.draw(tdata, google.charts.Bar.convertOptions(options));
        };
</script>

What I need is to add the total value in front of each bar, like the image below:

Itriedtouse{type:'number',role:'annotation'}toaddthevalueattheend,butitdoesnotreturnanyerrorand/orinformation.

<script src="https://www.google.com/jsapi?autoload={%27modules%27:[{%27name%27:%27visualization%27,%27version%27:%271.1%27,%27packages%27:[%27bar%27]}]}.js"></script><divid="chart_div"></div>

<script>

  google.setOnLoadCallback(drawChart);
    function drawChart() {
             var tdata = google.visualization.arrayToDataTable([
                   ['Estados', 'Concluídos', 'Total', {type:'number', role:'annotation'}],
                   ['MS', 1, 262, 263],
                   ['RJ', 70, 205, 205],
                   ['SP', 57, 176, 233],
                   ['MG', 0, 82, 82]
                ]);
                var options = {
                    chart: {
                        title: 'Gráfico Clientes',
                        subtitle: 'Total Clientes',
                    },
                    bars: 'horizontal', // Required for Material Bar Charts.
                    hAxis: { format: 'decimal' },
                    height: 400,
                    colors: ['#1b9e77', '#d95f02'],
                    isStacked: true
                };

                var chart = new google.charts.Bar(document.getElementById('chart_div'));

                chart.draw(tdata, google.charts.Bar.convertOptions(options));
        };
</script>

With other types of graphics it works formally, as can be seen in this example.

javascript google-charts

asked by anonymous 10.12.2015 / 19:15

1 answer

package does not exist (Maven) CSS selectors (H1 - H6 applying after p)

score 1 · Answer 1

In options , within annotations , of your graph add alwaysOutside: true.

var options = {
    chart: {
        title: 'Gráfico Clientes',
        subtitle: 'Total Clientes',
    },
    bars: 'horizontal', // Required for Material Bar Charts.
    hAxis: { format: 'decimal' },
    height: 400,
    colors: ['#1b9e77', '#d95f02'],
    isStacked: true,
    annotations: {
        textStyle: {
            color: 'black',
            fontSize: 11,
        },
        alwaysOutside: true
    }
};