Graphique de Sankey personnalisé

Voici un exemple de graphique SanKey personnalisé.

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 SanKey personnalisé.

Configurations

Nous avons utilisé Sankey classe pour afficher un graphique Sankey.

Sankey chart = new Sankey();

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.options.Color;
import com.googlecode.gwt.charts.client.sankey.Sankey;
import com.googlecode.gwt.charts.client.sankey.SankeyLink;
import com.googlecode.gwt.charts.client.sankey.SankeyOptions;

public class HelloWorld implements EntryPoint {
   private Sankey chart;

   private void initialize() {
      ChartLoader chartLoader = new ChartLoader(ChartPackage.SANKEY);
      chartLoader.loadApi(new Runnable() {
         public void run() {
            // Create and attach the chart
            chart = new Sankey();
            RootPanel.get().add(chart);
            draw();
         }
      });
   }

   private void draw() {
      // Prepare the data
      DataTable data = DataTable.create();
      data.addColumn(ColumnType.STRING, "From");
      data.addColumn(ColumnType.STRING, "To");
      data.addColumn(ColumnType.NUMBER, "Weight");

      data.addRow("Brazil","Portugal",5);
      data.addRow("Brazil","France",1 );
      data.addRow("Brazil","Spain",1 );
      data.addRow("Brazil","England",1 );
      data.addRow("Canada","Portugal",1 );
      data.addRow("Canada","France",5 );
      data.addRow("Canada","England",1 );
      data.addRow("Mexico","Portugal",1 );
      data.addRow("Mexico","France",1 );
      data.addRow("Mexico","Spain",5 );
      data.addRow("Mexico","England",1 );
      data.addRow("USA","Portugal",1 );
      data.addRow("USA","France",1 );
      data.addRow("USA","Spain",1 );
      data.addRow("USA","England",5);      

      SankeyOptions options  = SankeyOptions.create();
      SankeyLink link = SankeyLink.create();
      Color color = Color.create();
      color.setStroke("black");
      color.setStrokeWidth(1);
      link.setColor(color);
      options.setLink(link);
      // Draw the chart
      chart.draw(data, options);
      chart.setWidth("400px");
      chart.setHeight("400px");

   }

   public void onModuleLoad() {
      initialize();
   }
}

Résultat

Vérifiez le résultat.