Display data with Google Chart - Stacked

Question

I’m using the Google Chart - Stacked to create a chart on my system. Even this part is working correctly, as can be seen in the example below:

<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>

<div id="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>

Example in Jsfiddle.

My problem is showing the chart (completed - Total).

Example: In the state of MS I have a total value of 262 and completed of 1. In the state of RJ I have a total of 205 and completed 70. In the graph it is adding up the two dates, as can be seen in the "full bar size". My question is: How to make the bar follow the total value only, disregarding the value of completed? I need to show the two values, but the chart bar needs to be in order of the Total column, not the samotory of the two.

Editing

The intention is only to show the difference within a value. For example:

In the state of RJ I have 205 clients. Of these 205, 70 are completed. As it stands, it is adding (70 + 205) and forming the chart bar with the size of this sum, in this case, 275.

To try to explain further, I will add these images as an example.

This is the way the graph is found, as can be seen in the fiddle above:

And this is the way I seek to arrive:

Observing, one can see that the expected result does not carry out the sum of the two bars, only "tag" a corresponding value of the total.

Answer 1

Operation of the tool is correct,

To do what you want, you must subtract the TOTAL - COMPLETED

total values, as follows:.

<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>

<div id="chart_div"></div>

<script>

  google.setOnLoadCallback(drawChart);
    function drawChart() {
             var tdata = google.visualization.arrayToDataTable([
                   ['Estados', 'Concluídos', 'Total'],
                   ['MS', 1, 262 -1],
                   ['RJ', 70, 205 -70],
                   ['SP', 57, 176 -57],
                   ['MG', 0, 82 -0]
                ]);
                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>

If you want to do it in hand, just use percentage

Gosh, the times I had to do it, I did it on hand with CSS ... Think you have a value that is 100% let’s say 300 is the Total, and of that 300 you fill 100px,... ie 33,33%..

Take a width X DIV, take 33.33% of that X widht and put another div in with the color you want to fill DARK GREEN IN THE CASE and put widht of it equal to that 33.33%

<div id="holder" style="height:30px; widht:300px; color:light green;">

<div id="progresso" style="height:30px; widht:100px; color:green;">
</div>

</div>