Graphique en aires avec des valeurs négatives

Voici un exemple de graphique en aires avec des valeurs négatives.

Nous avons déjà vu les configurations utilisées pour dessiner un graphique dans le chapitre Syntaxe de configuration de Google Charts . Voyons maintenant un exemple de graphique en aires avec des valeurs négatives.

Configurations

Nous avons utilisé AreaChart classe pour afficher un graphique basé sur des zones avec des valeurs négatives

// area chart
AreaChart chart = new AreaChart();

Exemple

HelloWorld.java

package com.tutorialspoint.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

import com.googlecode.gwt.charts.client.ChartLoader;
import com.googlecode.gwt.charts.client.ChartPackage;
import com.googlecode.gwt.charts.client.ColumnType;
import com.googlecode.gwt.charts.client.DataTable;
import com.googlecode.gwt.charts.client.corechart.AreaChart;

public class HelloWorld implements EntryPoint {
   private AreaChart chart;

   private void initialize() {
      ChartLoader chartLoader = new ChartLoader(ChartPackage.CORECHART);
      chartLoader.loadApi(new Runnable() {
         public void run() {
            // Create and attach the chart
            chart = new AreaChart();
            RootPanel.get().add(chart);
            draw();
         }
      });
   }
   private void draw() {
      // Prepare the data
      DataTable data = DataTable.create();
      data.addColumn(ColumnType.STRING, "Year");
      data.addColumn(ColumnType.NUMBER, "Sales");
      data.addColumn(ColumnType.NUMBER, "Expenses");
      
      data.addRow("2013", 1000, 400);
      data.addRow("2014", -1170, 460);
      data.addRow("2015", -660, 1120);
      data.addRow("2016", 1030, 540);    		

      // Draw the chart
      chart.draw(data);
      chart.setWidth("400px");
      chart.setHeight("400px");
   }
   public void onModuleLoad() {
      initialize();
   }
}

Résultat

Vérifiez le résultat.