Plotly.API

Plotly API for drawing charts

View larger

Close

View larger

Close

View larger

Close

View larger

Close

This add-on is used to draw interactive charts. This Add-on is built with the library plotly.js It could be used to draw area, arearange, areaspline, areasplinerange, columns, bars (horizontal columns), boxplot, bubble, donut, line, pie, spline and scatter

Sample code

  //**pie**//
    final VerticalLayout layout = new VerticalLayout();

    layout.setMargin(true);
    layout.setSpacing(true);
    PieData Pie = new PieData("fruit-pie", new CoupleOfData());
    try {
      Pie.getData().addData("banans", 10);
      Pie.getData().addData("apples", 13);
      Pie.getData().addData("oranges", 16);
      Pie.getData().addData("kiwis", 8);
    } catch (DataMismatch e) {
      e.printStackTrace();
    }
    
    List <Color> colors = new ArrayList<Color>();
    colors.add(Colors.ALICEBLUE);
    colors.add(Colors.ANTIQUEWHITE);
    colors.add(Colors.BEIGE);
    colors.add(Colors.AQUAMARINE);
    Pie.setColors(colors);
    
    DataConfiguration dataPie = new DataConfiguration();
    dataPie.addDataConfiguration(Pie);
    
    LayoutWithoutAxis layoutwithoutAxis = new LayoutWithoutAxis();
    layoutwithoutAxis.setLayoutTitle("My fruits");
    layoutwithoutAxis.setBackgroundColor(Colors.LIGHTPINK);
    LayoutConfiguration  boxPie = new LayoutConfiguration(layoutwithoutAxis);
    
    PlotlyChart PieChart = PlotlyFactory.renderChart(dataPie,boxPie);
    
    layout.addComponent(PieChart);
    setContent(layout);

//bar    
final VerticalLayout layout = new VerticalLayout();

    layout.setMargin(true);
    layout.setSpacing(true);
    

    BarData bar1 = new BarData("Bar1 ",new SingleData()); //If SingleData is not added to the constructor then a CoupleOf data will be created by default. 
    BarData bar2 = new BarData("Bar2 ",new SingleData()); //Therefore addData with single element will throw an exception.
    for (int i=0; i<15;i++){
      try {
        bar1.getData().addData(Math. random() * 50 + 1);
      } catch (DataMismatch e) {
        e.printStackTrace();
      }
      try {
        bar2.getData().addData(Math. random() * 40 + 1);
      } catch (DataMismatch e) {
        e.printStackTrace();
      }
    }
    bar1.setColor(Colors.YELLOW);
    bar2.setColor(Colors.YELLOWGREEN);
   
   bar1.setHoverinfo(HoverInfo.X);
    DataConfiguration dataBar = new DataConfiguration();
    dataBar.addDataConfiguration(bar1);
    dataBar.addDataConfiguration(bar2);

    LayoutWithAxis layoutwithAxis = new LayoutWithAxis();
    layoutwithAxis.setLayoutTitle("Bars of Random Data");
    layoutwithAxis.setBackgroundColor(Colors.BLANCHEDALMOND);
    LayoutConfiguration  barBox = new LayoutConfiguration(layoutwithAxis);

    PlotlyChart BarChart = PlotlyFactory.renderChart(dataBar,barBox);

    layout.addComponent(BarChart);
    setContent(layout);

//**Line**//   
    final VerticalLayout layout = new VerticalLayout();

    layout.setMargin(true);
    layout.setSpacing(true);

    LineData Line1 = new LineData("Random Line 1 ");
    LineData Line2 = new LineData("Random Line 2 ");
    SingleData data1 = new SingleData();
    SingleData data2 = new SingleData();
    for (int i=0; i<15;i++){
      data1.addData(Math. random() * 50 + 1);
      data2.addData(Math. random() * 13 + 1);
    }
    try {
      Line1.setDataSeries(data1);
      Line2.setDataSeries(data2);
    } catch (Exception e) {
      e.printStackTrace();
    }
    Line1.setColor(Colors.PINK);


    Line2.setColor(Colors.ORANGE);
    Line2.getLine().setStyle(LineStyle.DASH);
    Line2.setMode(modeData.LINES);

    DataConfiguration dataLine = new DataConfiguration();
    dataLine.addDataConfiguration(Line1);
    dataLine.addDataConfiguration(Line2);

    LayoutWithAxis layoutwithAxis = new LayoutWithAxis();
    layoutwithAxis.setLayoutTitle("Lines With Random Data");
    layoutwithAxis.setBackgroundColor(Colors.ALICEBLUE);
    layoutwithAxis.setxAxisTitle("no data specified");
    layoutwithAxis.setyAxisTitle("Random Values");
    layoutwithAxis.disableXGrid();
    LayoutConfiguration  boxLine = new LayoutConfiguration(layoutwithAxis);

    PlotlyChart PieChart = PlotlyFactory.renderChart(dataLine,boxLine);

    layout.addComponent(PieChart);
    setContent(layout);

//**box**//    

final VerticalLayout layout = new VerticalLayout();

    layout.setMargin(true);
    layout.setSpacing(true);

    BoxPlotData Box1 = new BoxPlotData("Box1 ");
    BoxPlotData Box2 = new BoxPlotData("Box2 ");
    for (int i=0; i<15;i++){
      try {
        Box1.getData().addData(Math. random() * 50 + 1);
      } catch (DataMismatch e) {
        e.printStackTrace();
      }
      try {
        Box2.getData().addData(Math. random() * 40 + 1);
      } catch (DataMismatch e) {
        e.printStackTrace();
      }
    }
    Box1.setColor(Colors.OLIVE);
    Box2.setColor(Colors.BLACK);
   

    DataConfiguration dataBox = new DataConfiguration();
    dataBox.addDataConfiguration(Box1);
    dataBox.addDataConfiguration(Box2);

    LayoutWithoutAxis layoutwithoutAxis = new LayoutWithoutAxis();
    layoutwithoutAxis.setLayoutTitle("Boxs of Random Data");
    layoutwithoutAxis.setBackgroundColor(Colors.ALICEBLUE);
    LayoutConfiguration  boxBox = new LayoutConfiguration(layoutwithoutAxis);

    PlotlyChart BoxChart = PlotlyFactory.renderChart(dataBox,boxBox);

    layout.addComponent(BoxChart);
    setContent(layout);

Links

• Source Code
• Author Homepage

Compatibility