Gráfico de área con valores negativos

A continuación se muestra un ejemplo de un gráfico de áreas con valores negativos. 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 area configuración para mostrar el gráfico basado en áreas.

//area chart
var chart = new google.visualization.AreaChart(document.getElementById('container'));

Ejemplo

googlecharts_area_negative.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([
               ['Year', 'Sales', 'Expenses'],
               ['2013',  1000,      400],
               ['2014',  -1170,      460],
               ['2015',  -660,       1120],
               ['2016',  1030,      540]
            ]);

            var options = {
               isStacked: true,
               title: 'Population',
               hAxis: {title: 'Year',titleTextStyle: {color: '#333'}},
               vAxis: {minValue: 0}
            };  

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

Resultado

Verifique el resultado.

↰ Previous page