GWT Google Charts - Graphique de base

Voici un exemple de graphique en aires de base.

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 de base.

Configurations

Nous avons utilisé AreaChart classe pour afficher le graphique basé sur la zone.

// 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.