Gráfico de imagens candlestick

Importante: a parte de gráficos de imagem das Ferramentas de gráficos do Google foi oficialmente suspensa em 20 de abril de 2012. Ele continuará funcionando de acordo com nossa política de descontinuação.

  1. Visão geral
  2. Exemplo
  3. Carregando
  4. Formato de dados
  5. Opções de configuração
  6. Métodos
  7. Eventos
  8. Política de dados

Visão geral

Um gráfico candlestick renderizado como imagem usando a Google Charts API.

Um gráfico candlestick é usado para mostrar um valor de abertura e fechamento sobreposto em uma variância total. Os gráficos candlestick costumam ser usados para mostrar o comportamento do valor das ações. Neste gráfico, os itens em que o valor de abertura é menor que o de fechamento são desenhados em verde, e os itens em que o valor de abertura é maior que o de fechamento são desenhados em vermelho. Consulte a documentação do candlestick na API Google Charts para mais informações.

Exemplo

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

      function drawChart() {

        var options = {};
        dataTable = google.visualization.arrayToDataTable([
          ['Gainers',10,30,45,60],
          ['Losers',20,35,25,45],
          ], true);

       var chart = new google.visualization.ImageCandlestickChart(document.getElementById('chart_div'));
       chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 240px;"></div>
  </body>
</html>

Carregando

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

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

O nome da classe da visualização é google.visualization.ImageCandlestickChart. 

  var visualization = new google.visualization.ImageCandlestickChart(container);

Formato de dados

Cinco colunas, em que cada linha descreve um único marcador de vela:

  • Col 0:string usada como rótulo para o marcador no eixo X.
  • Col 1: número que especifica o valor baixo/mínimo desse marcador. Essa é a base da linha preta.
  • Col 2: número que especifica o valor de abertura/inicial desse marcador. Essa é a primeira divisão vertical do candlestick. Se for menor que o valor da coluna 3, o candlestick será verde. Caso contrário, será vermelho.
  • Col 3: número que especifica o valor de fechamento/final desse marcador. Essa é a segunda divisão vertical do candlestick. Se for menor que o valor da coluna 2, o candlestick será vermelho. Caso contrário, será verde.
  • Col 4: número que especifica o valor alto/máximo desse marcador. Este é o topo da linha preta.

Opções de configuração

Além das opções aceitas pelo gráfico genérico de imagens, o gráfico candlestick é compatível com as seguintes opções:

Nome Tipo Padrão Descrição
backgroundColor string '#FFFFFF' (branco) A cor do plano de fundo do gráfico. Essa é uma string #RRGGBB, incluindo a marca #.
showAxisLines boolean verdadeiro Indica se as linhas do eixo serão mostradas. Se definido como falso, os rótulos dos eixos também não serão mostrados.
height number Altura do elemento contêiner Altura do gráfico, em pixels. Se 30 < height ou height > 1.000,o padrão será 200.
max number Valor máximo dos dados O valor máximo do eixo Y.
min number Valor mínimo de dados O valor mínimo do eixo Y.
showCategoryLabels boolean verdadeiro Se falso, oculta os rótulos do eixo X.
showValueLabels boolean verdadeiro Se falso, oculta os rótulos do eixo Y.
showValueLabelsInternal number automático O espaçamento entre os rótulos do eixo Y, em pixels.
título string " Texto a ser exibido acima do gráfico.
width number Largura do elemento contêiner Largura do gráfico, em pixels. Se a largura for menor que 30 ou maior que 1.000, a largura será definida como 300.

Métodos

Método Tipo de retorno Descrição
draw(data, options) nenhum Desenha o gráfico.

Eventos

Você pode se registrar para ouvir os eventos descritos na página Gráfico genérico de imagens.

Política de dados

Consulte a política de geração de registros da API de gráficos.