Protovis wrapper for Vaadin Add-on

Chart library based on Protovis' graphics tools

View larger

Close

View larger

Close

View larger

Close

View larger

Close

View larger

Close

View larger

Close

VProtovis is a component which allows you to embed Protovis' based charts in Vaadin application.

VProtovis main features are: - No connection to third party website for chart generation (a.k.a Google Charts) - Only one jar to add in your project - SVG or VML generation for IE compatibility (thanks to jfirebaugh's work) - Simple API for simple charts (no protovis skills needed )

Supported charts : - Bar - Line - Pie - Area - Spider

If you need more complex charts, you have to use protovis in native mode or download ProtovisGWT.

Sample code

import com.bibounde.vprotovis.BarChartComponent;
import com.bibounde.vprotovis.chart.bar.TooltipFormatter;
import com.bibounde.vprotovis.common.AxisLabelFormatter;
import com.vaadin.Application;
import com.vaadin.ui.Window;

/**
 * The Application's "main" class
 */
@SuppressWarnings("serial")
public class WidgetTestApplication extends Application {
    
    private Window window;

    @Override
    public void init() {
        window = new Window("Widget Test");
        setMainWindow(window);

        BarChartComponent bar = new BarChartComponent();
        bar.addSerie("Serie_0", new double[] {1000d, 1170d, 660d, 1030d});
        bar.addSerie("Serie_1", new double[] {1057d, 377d, 1788d, 1224d});
        bar.addSerie("Serie_2", new double[] {826d, 1859d, 1497d, 791d});
        bar.setChartWidth(450d);
        bar.setChartHeight(300d); 

        bar.setMarginLeft(50d);

        bar.setMarginBottom(50d);

        bar.setXAxisVisisble(true);
        bar.setXAxisLabelVisible(true);

        bar.setYAxisVisible(true);
        bar.setYAxisLabelVisible(true);
        bar.setYAxisLabelStep(300d);
        bar.setYAxisGridVisible(true);

        bar.setLegendVisible(true);
        bar.setLegendAreaWidth(150d);

        window.addComponent(bar);
    }

}

import com.bibounde.vprotovis.LineChartComponent;
import com.bibounde.vprotovis.chart.line.DefaultLineTooltipFormatter;
import com.bibounde.vprotovis.chart.line.LineTooltipFormatter;
import com.bibounde.vprotovis.chart.line.InterpolationMode;
import com.bibounde.vprotovis.common.AxisLabelFormatter;
import com.bibounde.vprotovis.common.Point;
import com.vaadin.Application;
import com.vaadin.ui.Window;

/**
 * The Application's "main" class
 */
@SuppressWarnings("serial")
public class WidgetTestApplication extends Application {
    
    private Window window;

    @Override
    public void init() {
        window = new Window("Widget Test");
        setMainWindow(window);

        LineChartComponent line = new LineChartComponent();
        line.addSerie("Serie_0", new Point[] {new Point(0d, 1000d), new Point(1d, 1170d), 
                                             new Point(2d, 660d), new Point(3d, 1030d)});
        line.addSerie("Serie_1", new Point[] {new Point(0d, 955d), new Point(1d, 388d), 
                                             new Point(2d, -407d), new Point(3d, -845d)});
        line.addSerie("Serie_2", new Point[] {new Point(0d, 1758d), new Point(1d, -1278d), 
                                             new Point(2d, 1898d), new Point(3d, 921d)});
        line.setChartWidth(600d);
        line.setChartHeight(400d); 

        line.setMarginLeft(50d);

        line.setMarginTop(100d);

        line.setMarginBottom(50d);

        line.setXAxisVisible(true);
        line.setXAxisLabelVisible(true);
        line.setXAxisLabelStep(0.5d);
        line.setXAxisGridVisible(true);

        line.setYAxisVisible(true);
        line.setYAxisLabelVisible(true);
        line.setYAxisLabelStep(300d);
        line.setYAxisGridVisible(true);

        line.setLegendVisible(true);
        line.setLegendAreaWidth(150d);

        line.setTooltipEnabled(true);


        window.addComponent(line);
    }

}

import com.bibounde.vprotovis.PieChartComponent;
import com.bibounde.vprotovis.chart.pie.PieLabelFormatter;
import com.bibounde.vprotovis.chart.pie.PieTooltipFormatter;
import com.vaadin.Application;
import com.vaadin.ui.Window;

/**
 * The Application's "main" class
 */
@SuppressWarnings("serial")
public class WidgetTestApplication extends Application {
    
    private Window window;

    @Override
    public void init() {
        window = new Window("Widget Test");
        setMainWindow(window);

        PieChartComponent pie = new PieChartComponent();
        
        pie.addSerie("Serie_0", 1000d, false);
        pie.addSerie("Serie_1", 240d, true);
        pie.addSerie("Serie_2", 1503d, false);
        final double total = 2743d;
        
        pie.setChartWidth(450d);
        pie.setChartHeight(300d); 

        pie.setMarginLeft(40d);

        pie.setMarginTop(40d);

        pie.setMarginRight(40d);

        pie.setMarginBottom(40d);

        pie.setLegendVisible(true);
        pie.setLegendAreaWidth(150d);

        pie.setTooltipEnabled(true);

        pie.setLabelVisible(true);
        PieLabelFormatter labelFormatter = new PieLabelFormatter() {
                    
            public boolean isVisible(double labelValue) {
                return 0.05d <= labelValue/total;
            }
            
            public String format(double labelValue) {
               int percent = Double.valueOf(labelValue/total * 100).intValue();
               return percent + "%";
            }
        });
        pie.setLabelColor("#FFFFFF");

        window.addComponent(pie);
    }

}

import com.bibounde.vprotovis.PieChartComponent;
import com.bibounde.vprotovis.chart.pie.PieLabelFormatter;
import com.bibounde.vprotovis.chart.pie.PieTooltipFormatter;
import com.vaadin.Application;
import com.vaadin.ui.Window;

/**
 * The Application's "main" class
 */
@SuppressWarnings("serial")
public class WidgetTestApplication extends Application {
    
    private Window window;

    @Override
    public void init() {
        window = new Window("Widget Test");
        setMainWindow(window);

        PieChartComponent pie = new PieChartComponent();
        
        pie.addSerie("Serie_0", 1000d, false);
        pie.addSerie("Serie_1", 240d, true);
        pie.addSerie("Serie_2", 1503d, false);
        final double total = 2743d;
        
        pie.setChartWidth(450d);
        pie.setChartHeight(300d); 

        pie.setMarginLeft(40d);

        pie.setMarginTop(40d);

        pie.setMarginRight(40d);

        pie.setMarginBottom(40d);

        pie.setTooltipEnabled(true);
        pie.setLabelVisible(false);

        window.addComponent(line);
    }

}

import com.bibounde.vprotovis.AreaChartComponent;
import com.bibounde.vprotovis.chart.InterpolationMode;
import com.bibounde.vprotovis.chart.area.AreaTooltipFormatter;
import com.bibounde.vprotovis.chart.area.DefaultAreaTooltipFormatter;
import com.bibounde.vprotovis.chart.area.Serie;
import com.bibounde.vprotovis.common.AxisLabelFormatter;
import com.bibounde.vprotovis.common.Point;
import com.vaadin.Application;
import com.vaadin.ui.Window;

/**
 * The Application's "main" class
 */
@SuppressWarnings("serial")
public class WidgetTestApplication extends Application {
    
    private Window window;

    @Override
    public void init() {
        window = new Window("Widget Test");
        setMainWindow(window);

        AreaChartComponent area = new AreaChartComponent();
        area.addSerie("Serie_0", new Point[] {new Point(0d, 1000d), new Point(1d, 1170d), 
                                              new Point(2d, 660d), new Point(3d, 1030d)});
        area.addSerie("Serie_1", new Point[] {new Point(0d, 886d), new Point(1d, 583d), 
                                              new Point(2d, 518d), new Point(3d, 1379d)});
        area.addSerie("Serie_2", new Point[] {new Point(0d, 135d), new Point(1d, 1628d), 
                                              new Point(2d, 246d), new Point(3d, 1284d)});
        area.setChartWidth(600d);
        area.setChartHeight(300d); 

        area.setMarginLeft(50d);

        area.setMarginBottom(50d);

        area.setAreaOpacity(0.7d);

        area.setXAxisVisible(true);
        area.setXAxisLabelVisible(true);
        area.setXAxisLabelStep(0.5d);
        area.setXAxisGridVisible(true);

        area.setYAxisVisible(true);
        area.setYAxisLabelVisible(true);
        area.setYAxisLabelStep(300d);
        area.setYAxisGridVisible(true);

        area.setLegendVisible(true);
        area.setLegendAreaWidth(150d);

        area.setTooltipEnabled(true);

        window.addComponent(area);
    }

}

import com.bibounde.vprotovis.SpiderChartComponent;
import com.bibounde.vprotovis.chart.spider.DefaultSpiderTooltipFormatter;
import com.bibounde.vprotovis.chart.spider.Serie;
import com.bibounde.vprotovis.chart.spider.SpiderTooltipFormatter;
import com.bibounde.vprotovis.common.AxisLabelFormatter;
import com.vaadin.Application;
import com.vaadin.ui.Window;

/**
 * The Application's "main" class
 */
@SuppressWarnings("serial")
public class WidgetTestApplication extends Application {
    
    private Window window;

    @Override
    public void init() {
        window = new Window("Widget Test");
        setMainWindow(window);

        SpiderChartComponent spider = new SpiderChartComponent();

        spider.setAxisNames(new String[]{"Val 1.", "Val 2.", "Val 3.", "Val 4.", "Val 5.", "Val 6."});

        spider.addSerie("Serie_0", new double[] {2d, 3.5d, 1d, 5d, 2d, 1.5d});
        spider.addSerie("Serie_1", new double[] {4d, 2d, 0d, 0d, 5d, 4d});

        spider.setChartWidth(450d);
        spider.setChartHeight(300d); 

        spider.setMarginLeft(40d);

        spider.setMarginTop(20d);

        spider.setMarginBottom(20d);

        spider.setAxisLabelStep(1d);

        spider.setLegendVisible(true);
        spider.setLegendAreaWidth(150d);
        spider.setLegendInsetLeft(50d);
        
        spider.setTooltipEnabled(true);

        window.addComponent(spider);
    }

}

Links

• Online Demo
• Issue Tracker
• Source Code
• Discussion Forum

Compatibility