Gráficos de Google: gráfico de velas japonesas básico

A continuación se muestra un ejemplo de un gráfico de velas básico. Un gráfico de velas se usa generalmente para mostrar un valor de apertura y cierre que se superponen sobre una variación total. Los gráficos de velas se utilizan a menudo para mostrar el comportamiento del valor de las acciones. En este gráfico, se dibujan cajas llenas para artículos donde el valor de apertura es menor que el valor de cierre (una ganancia) y, y se dibujan cajas huecas donde el valor de apertura del artículo es mayor que el valor de cierre (una pérdida). Ya hemos visto la configuración utilizada para dibujar este gráfico en el capítulo Sintaxis de configuración de Google Charts . Entonces, veamos el ejemplo completo.

Configuraciones

Hemos usado CandlestickChart class para mostrar el gráfico basado en velas.

//candlestick chart
var chart = new google.visualization.CandlestickChart
(document.getElementById('container'));

Ejemplo

googlecharts_candlestick_basic.htm

<html>
   <head>
      <title>Google Charts Tutorial</title>
      <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
      </script>
      <script type = "text/javascript">
         google.charts.load('current', {packages: ['corechart']});     
      </script>
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
      </div>
      <script language = "JavaScript">
         function drawChart() {
            // Define the chart to be drawn.
            var data = google.visualization.arrayToDataTable([
               ['Mon', 20, 28, 38, 45],
               ['Tue', 31, 38, 55, 66],
               ['Wed', 50, 55, 77, 80],
               ['Thu', 77, 77, 66, 50],
               ['Fri', 68, 66, 22, 15]
               // Treat first row as data as well.
            ], true);
              
            // Set chart options
            var options = {legend: 'none'};

            // Instantiate and draw the chart.
            var chart = new google.visualization.CandlestickChart(document.getElementById('container'));
            chart.draw(data, options);
         }
         google.charts.setOnLoadCallback(drawChart);
      </script>
   </body>
</html>

Resultado

Verifique el resultado.

↰ Previous page