12

Estou utilizando o Google Chart - stacked para criar um gráfico em meu sistema. Até esta parte está fucionando corretamente, como pode ser visto no exemplo abaixo:

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

Exemplo no JSFiddle.

Meu problema está ao mostrar o gráfico (concluídos - Total).

Exemplo: No estado de MS eu possuo um valor total de 262 e concluídos de 1. No estado do RJ eu possuo um total de 205 e concluídos de 70. No gráfico ele está somando as duas datas, como pode ser visto no "tamanho total da barra". Minha dúvida é: Como fazer para a barra seguir o valor total apenas, desconsiderando o valor de concluídos? Eu preciso mostrar os dois valores, mas a barra do gráfico precisa ser por ordem da coluna Total, e não a samotória das duas.

Edição

A intenção é somente mostrar a diferença dentro de um valor. Por exemplo:

No estado do RJ eu possuo 205 clientes. Desses 205, 70 estão concluídos. Da forma que está, ele está somando (70 + 205) e formando a barra do gráfico com o tamanho desta soma, no caso, 275.

Para tentar explicar melhor, adicionarei essas imagens como exemplo.

Essa é a forma que se encontra o gráfico, como pode ser visto no fiddle acima: Como está

E essa é a forma que busco chegar: Como deveria

Observando, pode-se ver que o resultado esperado não realiza a soma das duas barras, apenas "marca" um valor correspondente do total.

1
  • Você vai conseguir o mesmo efeito se colocar concluído + não concluído = total. Aí é só apagar o label dos não concluídos. e habilitar o label total. 9/12/2015 às 23:18

1 Resposta 1

5

O Funcionamento da ferramenta está correto,

Para fazer o que você quer, deve subtrair o TOTAL - CONCLUÍDO

nos valores totais, segue.

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

Caso queira fazer na mão, basta usar porcentagem

Puxa, as vezes que precisei fazer isso, fiz na mão mesmo com CSS ... Pensa que você tem um valor que é 100% digamos que 300 é o Total, e desses 300 você preencher 100px,... ou seja 33,33%..

Pega uma DIV com width X, pega 33,33% desse widht X e coloca outra div dentro com a cor que quer preencher VERDE ESCURO NO CASO e coloca widht dela igual esse 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>
11
  • Sim, eu tentei fazer isso. Mas no valor total deverá mostrar exatamente o total. Exemplo: Em seu código o total do RJ está com 135, mas deveria mostrar 205. O gráfico deve dar a entender que de 205 clientes, 70 estão concluídos. Não sei se fui claro, desculpe se estiver confuso.
    – Randrade
    8/12/2015 às 12:28
  • Se mostrar 205 como você quer, seu gráfico vai estar meio errado né... Total é soma de 2 coisas... o que está somando com o que? Concluído + XPTO = Total. 8/12/2015 às 12:30
  • Não exatamente. A lógica neste caso não é saber quantos estão concluídos e quantos não estão, e sim saber do total, quantos estão concluídos. De 205, 70 estão concluídos.
    – Randrade
    8/12/2015 às 12:32
  • E se você colocar 2 legends, 1 Concluído 2 Não Concluído? Do modo que você quer com esse plugin não vai rolar... 8/12/2015 às 12:34
  • Neste caso implicaria em outro tipo de gráfico, o que não seria interessante para mim.
    – Randrade
    8/12/2015 às 12:36

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .