Esta página foi traduzida pela API Cloud Translation.

Gráficos de Gantt

Visão geral

Um gráfico de Gantt é um tipo de gráfico que ilustra o detalhamento de um projeto nas tarefas do componente. Os gráficos de Gantt do Google ilustram o início, o fim e a duração das tarefas em um projeto, bem como as dependências que uma tarefa pode ter. Os gráficos do Google Gantt são renderizados no navegador usando SVG. Como todos os gráficos do Google, os gráficos de Gantt exibem dicas quando o usuário passa o cursor sobre os dados.

Observação:os gráficos Gantt não funcionam em versões antigas do Internet Explorer. O IE8 e versões anteriores não são compatíveis com SVG, já os gráficos Gantt exigem isso.

Um exemplo simples

google.charts.load('current', {'packages':['gantt']});
    google.charts.setOnLoadCallback(drawChart);

function daysToMilliseconds(days) {
      return days * 24 * 60 * 60 * 1000;
    }

function drawChart() {

var data = new google.visualization.DataTable();
      data.addColumn('string', 'Task ID');
      data.addColumn('string', 'Task Name');
      data.addColumn('date', 'Start Date');
      data.addColumn('date', 'End Date');
      data.addColumn('number', 'Duration');
      data.addColumn('number', 'Percent Complete');
      data.addColumn('string', 'Dependencies');

data.addRows([
        ['Research', 'Find sources',
         new Date(2015, 0, 1), new Date(2015, 0, 5), null,  100,  null],
        ['Write', 'Write paper',
         null, new Date(2015, 0, 9), daysToMilliseconds(3), 25, 'Research,Outline'],
        ['Cite', 'Create bibliography',
         null, new Date(2015, 0, 7), daysToMilliseconds(1), 20, 'Research'],
        ['Complete', 'Hand in paper',
         null, new Date(2015, 0, 10), daysToMilliseconds(1), 0, 'Cite,Write'],
        ['Outline', 'Outline paper',
         null, new Date(2015, 0, 6), daysToMilliseconds(1), 100, 'Research']
      ]);

var options = {
        height: 275
      };

var chart = new google.visualization.Gantt(document.getElementById('chart_div'));

chart.draw(data, options);
    }

<html>
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {'packages':['gantt']});
    google.charts.setOnLoadCallback(drawChart);

    function daysToMilliseconds(days) {
      return days * 24 * 60 * 60 * 1000;
    }

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Task ID');
      data.addColumn('string', 'Task Name');
      data.addColumn('date', 'Start Date');
      data.addColumn('date', 'End Date');
      data.addColumn('number', 'Duration');
      data.addColumn('number', 'Percent Complete');
      data.addColumn('string', 'Dependencies');

      data.addRows([
        ['Research', 'Find sources',
         new Date(2015, 0, 1), new Date(2015, 0, 5), null,  100,  null],
        ['Write', 'Write paper',
         null, new Date(2015, 0, 9), daysToMilliseconds(3), 25, 'Research,Outline'],
        ['Cite', 'Create bibliography',
         null, new Date(2015, 0, 7), daysToMilliseconds(1), 20, 'Research'],
        ['Complete', 'Hand in paper',
         null, new Date(2015, 0, 10), daysToMilliseconds(1), 0, 'Cite,Write'],
        ['Outline', 'Outline paper',
         null, new Date(2015, 0, 6), daysToMilliseconds(1), 100, 'Research']
      ]);

      var options = {
        height: 275
      };

      var chart = new google.visualization.Gantt(document.getElementById('chart_div'));

      chart.draw(data, options);
    }
  </script>
</head>
<body>
  <div id="chart_div"></div>
</body>
</html>

Sem dependências

Para criar um gráfico Gantt sem dependências, verifique se o último valor de cada linha da sua tabela de dados está definido como null.

google.charts.load('current', {'packages':['gantt']});
    google.charts.setOnLoadCallback(drawChart);

function drawChart() {

var data = new google.visualization.DataTable();
      data.addColumn('string', 'Task ID');
      data.addColumn('string', 'Task Name');
      data.addColumn('string', 'Resource');
      data.addColumn('date', 'Start Date');
      data.addColumn('date', 'End Date');
      data.addColumn('number', 'Duration');
      data.addColumn('number', 'Percent Complete');
      data.addColumn('string', 'Dependencies');

data.addRows([
        ['2014Spring', 'Spring 2014', 'spring',
         new Date(2014, 2, 22), new Date(2014, 5, 20), null, 100, null],
        ['2014Summer', 'Summer 2014', 'summer',
         new Date(2014, 5, 21), new Date(2014, 8, 20), null, 100, null],
        ['2014Autumn', 'Autumn 2014', 'autumn',
         new Date(2014, 8, 21), new Date(2014, 11, 20), null, 100, null],
        ['2014Winter', 'Winter 2014', 'winter',
         new Date(2014, 11, 21), new Date(2015, 2, 21), null, 100, null],
        ['2015Spring', 'Spring 2015', 'spring',
         new Date(2015, 2, 22), new Date(2015, 5, 20), null, 50, null],
        ['2015Summer', 'Summer 2015', 'summer',
         new Date(2015, 5, 21), new Date(2015, 8, 20), null, 0, null],
        ['2015Autumn', 'Autumn 2015', 'autumn',
         new Date(2015, 8, 21), new Date(2015, 11, 20), null, 0, null],
        ['2015Winter', 'Winter 2015', 'winter',
         new Date(2015, 11, 21), new Date(2016, 2, 21), null, 0, null],
        ['Football', 'Football Season', 'sports',
         new Date(2014, 8, 4), new Date(2015, 1, 1), null, 100, null],
        ['Baseball', 'Baseball Season', 'sports',
         new Date(2015, 2, 31), new Date(2015, 9, 20), null, 14, null],
        ['Basketball', 'Basketball Season', 'sports',
         new Date(2014, 9, 28), new Date(2015, 5, 20), null, 86, null],
        ['Hockey', 'Hockey Season', 'sports',
         new Date(2014, 9, 8), new Date(2015, 5, 21), null, 89, null]
      ]);

var options = {
        height: 400,
        gantt: {
          trackHeight: 30
        }
      };

var chart = new google.visualization.Gantt(document.getElementById('chart_div'));

chart.draw(data, options);
    }

<html>
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {'packages':['gantt']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Task ID');
      data.addColumn('string', 'Task Name');
      data.addColumn('string', 'Resource');
      data.addColumn('date', 'Start Date');
      data.addColumn('date', 'End Date');
      data.addColumn('number', 'Duration');
      data.addColumn('number', 'Percent Complete');
      data.addColumn('string', 'Dependencies');

      data.addRows([
        ['2014Spring', 'Spring 2014', 'spring',
         new Date(2014, 2, 22), new Date(2014, 5, 20), null, 100, null],
        ['2014Summer', 'Summer 2014', 'summer',
         new Date(2014, 5, 21), new Date(2014, 8, 20), null, 100, null],
        ['2014Autumn', 'Autumn 2014', 'autumn',
         new Date(2014, 8, 21), new Date(2014, 11, 20), null, 100, null],
        ['2014Winter', 'Winter 2014', 'winter',
         new Date(2014, 11, 21), new Date(2015, 2, 21), null, 100, null],
        ['2015Spring', 'Spring 2015', 'spring',
         new Date(2015, 2, 22), new Date(2015, 5, 20), null, 50, null],
        ['2015Summer', 'Summer 2015', 'summer',
         new Date(2015, 5, 21), new Date(2015, 8, 20), null, 0, null],
        ['2015Autumn', 'Autumn 2015', 'autumn',
         new Date(2015, 8, 21), new Date(2015, 11, 20), null, 0, null],
        ['2015Winter', 'Winter 2015', 'winter',
         new Date(2015, 11, 21), new Date(2016, 2, 21), null, 0, null],
        ['Football', 'Football Season', 'sports',
         new Date(2014, 8, 4), new Date(2015, 1, 1), null, 100, null],
        ['Baseball', 'Baseball Season', 'sports',
         new Date(2015, 2, 31), new Date(2015, 9, 20), null, 14, null],
        ['Basketball', 'Basketball Season', 'sports',
         new Date(2014, 9, 28), new Date(2015, 5, 20), null, 86, null],
        ['Hockey', 'Hockey Season', 'sports',
         new Date(2014, 9, 8), new Date(2015, 5, 21), null, 89, null]
      ]);

      var options = {
        height: 400,
        gantt: {
          trackHeight: 30
        }
      };

      var chart = new google.visualization.Gantt(document.getElementById('chart_div'));

      chart.draw(data, options);
    }
  </script>
</head>
<body>
  <div id="chart_div"></div>
</body>
</html>

Como agrupar recursos

Tarefas de natureza semelhante podem ser agrupadas usando recursos. Adicione uma coluna do tipo string aos dados (após as colunas Task ID e Task Name) e verifique se as tarefas que precisam ser agrupadas em um recurso têm o mesmo ID do recurso. Os recursos serão agrupados por cor.

google.charts.load('current', {'packages':['gantt']});
    google.charts.setOnLoadCallback(drawChart);

function daysToMilliseconds(days) {
      return days * 24 * 60 * 60 * 1000;
    }

function drawChart() {

data.addRows([
        ['Research', 'Find sources', null,
         new Date(2015, 0, 1), new Date(2015, 0, 5), null,  100,  null],
        ['Write', 'Write paper', 'write',
         null, new Date(2015, 0, 9), daysToMilliseconds(3), 25, 'Research,Outline'],
        ['Cite', 'Create bibliography', 'write',
         null, new Date(2015, 0, 7), daysToMilliseconds(1), 20, 'Research'],
        ['Complete', 'Hand in paper', 'complete',
         null, new Date(2015, 0, 10), daysToMilliseconds(1), 0, 'Cite,Write'],
        ['Outline', 'Outline paper', 'write',
         null, new Date(2015, 0, 6), daysToMilliseconds(1), 100, 'Research']
      ]);

var options = {
        height: 275
      };

var chart = new google.visualization.Gantt(document.getElementById('chart_div'));

chart.draw(data, options);
    }

<html>
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {'packages':['gantt']});
    google.charts.setOnLoadCallback(drawChart);

    function daysToMilliseconds(days) {
      return days * 24 * 60 * 60 * 1000;
    }

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Task ID');
      data.addColumn('string', 'Task Name');
      data.addColumn('string', 'Resource');
      data.addColumn('date', 'Start Date');
      data.addColumn('date', 'End Date');
      data.addColumn('number', 'Duration');
      data.addColumn('number', 'Percent Complete');
      data.addColumn('string', 'Dependencies');

      data.addRows([
        ['Research', 'Find sources', null,
         new Date(2015, 0, 1), new Date(2015, 0, 5), null,  100,  null],
        ['Write', 'Write paper', 'write',
         null, new Date(2015, 0, 9), daysToMilliseconds(3), 25, 'Research,Outline'],
        ['Cite', 'Create bibliography', 'write',
         null, new Date(2015, 0, 7), daysToMilliseconds(1), 20, 'Research'],
        ['Complete', 'Hand in paper', 'complete',
         null, new Date(2015, 0, 10), daysToMilliseconds(1), 0, 'Cite,Write'],
        ['Outline', 'Outline paper', 'write',
         null, new Date(2015, 0, 6), daysToMilliseconds(1), 100, 'Research']
      ]);

      var options = {
        height: 275
      };

      var chart = new google.visualization.Gantt(document.getElementById('chart_div'));

      chart.draw(data, options);
    }
  </script>
</head>
<body>
  <div id="chart_div"></div>
</body>
</html>

Como calcular o início/fim/duração

Os gráficos de Gatt aceitam três valores relacionados à duração da tarefa: uma data de início, uma data de término e uma duração (em milissegundos). Por exemplo, se não houver data de início, o gráfico poderá calcular o tempo ausente com base na data de término e na duração. O mesmo vale para a data de término. Se as datas de início e de término forem fornecidas, a duração poderá ser calculada entre os dois.

Consulte a tabela abaixo para ver uma lista de como o Gantt gerencia a presença do início, do fim e da duração em diferentes circunstâncias.

Iniciar	End	Duração	Resultado
Presente	Presente	Presente	Verifique se a duração é consistente com os horários de início/término. Lança erro se for inconsistente.
Presente	Presente	Nulo	Calcula a duração a partir dos horários de início e término.
Presente	Nulo	Presente	Calcula o horário de término.
Presente	Nulo	Nulo	Lança o erro como se não fosse possível calcular a duração ou o horário de término.
Nulo	Presente	Presente	Calcula o horário de início.
Nulo	Nulo	Presente	Calcula o horário de início com base nas dependências. Em conjunto com `defaultStartDate`, permite que o gráfico seja desenhado usando apenas durações.
Nulo	Presente	Nulo	Um erro é exibido porque não é possível calcular o horário de início ou a duração.
Nulo	Nulo	Nulo	Isso gera um erro como "não foi possível calcular o horário de início, o horário de término ou a duração"

Com isso em mente, é possível criar um gráfico com uma rota típica de trabalho para usar apenas a duração de cada tarefa.

google.charts.load("current", { packages: ["gantt"] });
      google.charts.setOnLoadCallback(drawChart);

function toMilliseconds(minutes) {
        return minutes * 60 * 1000;
      }

function drawChart() {
        var otherData = new google.visualization.DataTable();
        otherData.addColumn("string", "Task ID");
        otherData.addColumn("string", "Task Name");
        otherData.addColumn("string", "Resource");
        otherData.addColumn("date", "Start");
        otherData.addColumn("date", "End");
        otherData.addColumn("number", "Duration");
        otherData.addColumn("number", "Percent Complete");
        otherData.addColumn("string", "Dependencies");

otherData.addRows([
          [
            "toTrain",
            "Walk to train stop",
            "walk",
            null,
            null,
            toMilliseconds(5),
            100,
            null,
          ],
          [
            "music",
            "Listen to music",
            "music",
            null,
            null,
            toMilliseconds(70),
            100,
            null,
          ],
          [
            "wait",
            "Wait for train",
            "wait",
            null,
            null,
            toMilliseconds(10),
            100,
            "toTrain",
          ],
          [
            "train",
            "Train ride",
            "train",
            null,
            null,
            toMilliseconds(45),
            75,
            "wait",
          ],
          [
            "toWork",
            "Walk to work",
            "walk",
            null,
            null,
            toMilliseconds(10),
            0,
            "train",
          ],
          [
            "work",
            "Sit down at desk",
            null,
            null,
            null,
            toMilliseconds(2),
            0,
            "toWork",
          ],
        ]);

var options = {
          height: 275,
          gantt: {
            defaultStartDate: new Date(2015, 3, 28),
          },
        };

var chart = new google.visualization.Gantt(
          document.getElementById("chart_div")
        );

chart.draw(otherData, options);
      }

<html>
  <head>
    <script src="https://www.gstatic.com/charts/loader.js"></script>
    <script>
      google.charts.load("current", { packages: ["gantt"] });
      google.charts.setOnLoadCallback(drawChart);

      function toMilliseconds(minutes) {
        return minutes * 60 * 1000;
      }

      function drawChart() {
        var otherData = new google.visualization.DataTable();
        otherData.addColumn("string", "Task ID");
        otherData.addColumn("string", "Task Name");
        otherData.addColumn("string", "Resource");
        otherData.addColumn("date", "Start");
        otherData.addColumn("date", "End");
        otherData.addColumn("number", "Duration");
        otherData.addColumn("number", "Percent Complete");
        otherData.addColumn("string", "Dependencies");

        otherData.addRows([
          [
            "toTrain",
            "Walk to train stop",
            "walk",
            null,
            null,
            toMilliseconds(5),
            100,
            null,
          ],
          [
            "music",
            "Listen to music",
            "music",
            null,
            null,
            toMilliseconds(70),
            100,
            null,
          ],
          [
            "wait",
            "Wait for train",
            "wait",
            null,
            null,
            toMilliseconds(10),
            100,
            "toTrain",
          ],
          [
            "train",
            "Train ride",
            "train",
            null,
            null,
            toMilliseconds(45),
            75,
            "wait",
          ],
          [
            "toWork",
            "Walk to work",
            "walk",
            null,
            null,
            toMilliseconds(10),
            0,
            "train",
          ],
          [
            "work",
            "Sit down at desk",
            null,
            null,
            null,
            toMilliseconds(2),
            0,
            "toWork",
          ],
        ]);

        var options = {
          height: 275,
          gantt: {
            defaultStartDate: new Date(2015, 3, 28),
          },
        };

        var chart = new google.visualization.Gantt(
          document.getElementById("chart_div")
        );

        chart.draw(otherData, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div"></div>
  </body>
</html>

Caminho crítico

O caminho crítico em um gráfico de Gantt é um ou mais caminhos que afetam diretamente a data de término. O caminho essencial nos gráficos do Gantt é vermelho por padrão e pode ser personalizado usando as opções criticalPathStyle. Também é possível desativar o caminho crítico definindo criticalPathEnabled como false.

google.charts.load('current', {'packages':['gantt']});
      google.charts.setOnLoadCallback(drawChart);

function daysToMilliseconds(days) {
        return days * 24 * 60 * 60 * 1000;
      }

function drawChart() {

var options = {
          height: 275,
          gantt: {
            criticalPathEnabled: true,
            criticalPathStyle: {
              stroke: '#e64a19',
              strokeWidth: 5
            }
          }
        };

var chart = new google.visualization.Gantt(document.getElementById('chart_div'));

chart.draw(data, options);
      }

        var options = {
          height: 275,
          gantt: {
            criticalPathEnabled: true,
            criticalPathStyle: {
              stroke: '#e64a19',
              strokeWidth: 5
            }
          }
        };

Personalizar as setas

É possível definir o estilo das setas de dependência entre tarefas com as opções gantt.arrow:

google.charts.load('current', {'packages':['gantt']});
      google.charts.setOnLoadCallback(drawChart);

function daysToMilliseconds(days) {
        return days * 24 * 60 * 60 * 1000;
      }

function drawChart() {

var options = {
          height: 275,
          gantt: {
            criticalPathEnabled: false, // Critical path arrows will be the same as other arrows.
            arrow: {
              angle: 100,
              width: 5,
              color: 'green',
              radius: 0
            }
          }
        };

var chart = new google.visualization.Gantt(document.getElementById('chart_div'));

chart.draw(data, options);
      }

        var options = {
          height: 275,
          gantt: {
            criticalPathEnabled: false, // Critical path arrows will be the same as other arrows.
            arrow: {
              angle: 100,
              width: 5,
              color: 'green',
              radius: 0
            }
          }
        };

Como definir o estilo das faixas

O estilo da grade é processado por uma combinação de innerGridHorizLine, innerGridTrack e innerGridDarkTrack. Ao definir apenas o innerGridTrack, o gráfico calcula uma cor mais escura para o innerGridDarkTrack, mas definindo apenas o innerGridDarkTrack, o innerGridTrack usa a cor padrão e não calcula uma cor mais clara.

google.charts.load('current', {'packages':['gantt']});
    google.charts.setOnLoadCallback(drawChart);

function daysToMilliseconds(days) {
      return days * 24 * 60 * 60 * 1000;
    }

function drawChart() {

var options = {
        height: 275,
        gantt: {
          criticalPathEnabled: false,
          innerGridHorizLine: {
            stroke: '#ffe0b2',
            strokeWidth: 2
          },
          innerGridTrack: {fill: '#fff3e0'},
          innerGridDarkTrack: {fill: '#ffcc80'}
        }
      };

var chart = new google.visualization.Gantt(document.getElementById('chart_div'));

chart.draw(data, options);
    }

      var options = {
        height: 275,
        gantt: {
          criticalPathEnabled: false,
          innerGridHorizLine: {
            stroke: '#ffe0b2',
            strokeWidth: 2
          },
          innerGridTrack: {fill: '#fff3e0'},
          innerGridDarkTrack: {fill: '#ffcc80'}
        }
      };

Carregando

O nome do pacote google.charts.load é "gantt".

  google.charts.load("current", {packages: ["gantt"]});

O nome da classe do layout é google.visualization.Gantt.

  var chart = new google.visualization.Gantt(container);

Formato de dados

Linhas: cada linha da tabela representa uma tarefa.

Columns:

	Coluna 0	Coluna 1	Coluna 2	Coluna 3	Coluna 4	Coluna 5	Coluna 6	Coluna 7
Finalidade:	ID da tarefa	Nome da tarefa	ID do recurso (opcional)	Iniciar	End	Duração (em milissegundos)	Percentual de conclusão	Dependências
Tipo de dado:	string	string	string	date	date	number	number	string
Papel:	domínio	dados	dados	dados	dados	dados	dados	dados

Opções de configuração

Nome	Tipo	Padrão	Descrição
backgroundColor.fill	string	"branco"	A cor de preenchimento do gráfico, como uma string de cor HTML.
Gantt.arrow	um objeto	null	Em Gráficos de Gantt, `gantt.arrow` controla as várias propriedades das setas que conectam tarefas.
gantt.arrow.angle	number	45	O ângulo da cabeça da seta.
gantt.arrow.color.	string	"#000"	A cor das setas.
gantt.arrow.length	number	8	O comprimento da cabeça da seta.
gantt.arrow.radius	number	15	O raio para definir a curva da seta entre duas tarefas.
gantt.arrow.spaceAfter	number	4	A quantidade de espaços em branco entre a cabeça de uma seta e a tarefa para a qual ela aponta.
gantt.arrow.width	number	1.4	A largura das setas.
gantt.barCornerRadius	number	2	O raio para definir a curva dos cantos de uma barra.
gantt.barHeight	number	null	A altura das barras das tarefas.
gantt.crpathPathEnabled	boolean	verdadeiro	Se `true`, todas as setas no caminho crítico serão estilizados de forma diferente.
gantt.crpathPathStyle	um objeto	null	Um objeto que contém o estilo de quaisquer setas de caminho crítico.
gantt.crpathPathStyle.stroke	string	null	A cor de todas as setas de caminho crítico.
gantt.críticaPathStyle.strokeWidth	number	1.4	A espessura de todas as setas de caminho crítico.
gantt.defaultStartDate.	data/número	null	Se a data de início não puder ser calculada a partir dos valores na tabela de dados, ela será definida de acordo com ela. Aceita um valor de `date` (`new Date(YYYY, M, D)`) ou um número, que representa a quantidade em milissegundos a ser usada.
gantt.innerGridHorizLine	um objeto	null	Define o estilo das linhas horizontais internas da grade.
gantt.innerGridHorizLine.stroke	string	null	A cor das linhas internas internas da grade.
gantt.innerGridHorizLine.strokeWidth	number	1	A largura das linhas internas da grade horizontal.
gantt.innerGridTrack.fill	string	null	A cor de preenchimento da faixa da grade interna. Se nenhum `innerGridDarkTrack.fill` for especificado, isso será aplicado a todas as faixas da grade.
gantt.innerGridDarkTrack.fill	string	null	A cor de preenchimento da faixa de grade interna alternativa.
gantt.labelMaxWidth	number	300	A quantidade máxima de espaço permitido para cada rótulo de tarefa.
gantt.labelStyle	um objeto	null	Um objeto que contém os estilos dos rótulos de tarefa. labelStyle: { fontName: Roboto2, fontSize: 14, color: '#757575' },
gantt.percentEnabled	boolean	verdadeiro	Preenche a barra de tarefas com base na porcentagem de conclusão da tarefa.
gantt.percentStyle.fill	string	null	A cor da porcentagem de conclusão de uma barra de tarefas.
gantt.shadowEnabled	boolean	verdadeiro	Se definido como `true`, mostra uma sombra sob cada barra de tarefas que tem dependências.
gantt.shadowColor	string	"#000"	Define a cor das sombras em qualquer barra de tarefas com dependências.
gantt.shadowOffset	number	1	Define o deslocamento, em pixels, das sombras em qualquer barra de tarefas com dependências.
gantt.sortTasks	boolean	verdadeiro	Especifica que as tarefas serão classificadas topologicamente, se verdadeiras. Caso contrário, use a mesma ordem das linhas correspondentes da DataTable.
gantt.trackHeight	number	null	É a altura das faixas.
largura	number	largura do elemento contido	Largura do gráfico, em pixels.
altura	number	altura do elemento contido	altura do gráfico, em pixels.

Métodos

Método	Descrição
`draw(data, options)`	Desenha o gráfico. O gráfico aceita mais chamadas de método somente após o evento `ready` ser acionado. `Extended description` Tipo de retorno: nenhum
`getSelection()`	Retorna uma matriz das entidades do gráfico selecionadas. Entidades selecionáveis são barras, entradas de legenda e categorias. Nesse gráfico, apenas uma entidade pode ser selecionada por vez. `Extended description` Tipo de retorno:matriz de elementos de seleção
`setSelection()`	Seleciona as entidades do gráfico especificadas. Cancela qualquer seleção anterior. Entidades selecionáveis são barras, entradas de legenda e categorias. Somente uma entidade pode ser selecionada por vez para este gráfico. `Extended description` Tipo de retorno: nenhum
`clearChart()`	Limpa o gráfico e libera todos os recursos alocados. Tipo de retorno:nenhum

Eventos

Evento	Descrição
`click`	Disparado quando o usuário clica dentro do gráfico. Pode ser usado para identificar quando o título, os elementos de dados, as entradas de legendas, os eixos, as linhas de grade ou os rótulos são clicados. Propriedades: targetID.
`error`	Disparado quando ocorre um erro ao tentar renderizar o gráfico. Propriedades:ID e mensagem
`ready`	O gráfico está pronto para chamadas de método externo. Se você quiser interagir com o gráfico e chamar métodos depois de desenhá-lo, configure um listener para esse evento antes de chamar o método `draw` e chame-o somente depois que o evento for acionado. Propriedades: nenhuma
`select`	Disparado quando o usuário clica em uma entidade visual. Para saber o que foi selecionado, chame `getSelection()`. Propriedades: nenhuma

Política de dados

Todos os códigos e dados são processados e renderizados no navegador. Nenhum dado é enviado para nenhum servidor.