Example #1
0
  @Override
  public Widget asWidget() {
    final ListStore<Data> store = new ListStore<Data>(dataAccess.nameKey());
    store.addAll(TestData.getData(12, 20, 100));

    final Chart<Data> chart = new Chart<Data>();
    chart.setStore(store);
    chart.setShadowChart(true);

    NumericAxis<Data> axis = new NumericAxis<Data>();
    axis.setPosition(Position.BOTTOM);
    axis.addField(dataAccess.data1());
    axis.addField(dataAccess.data2());
    axis.addField(dataAccess.data3());
    TextSprite title = new TextSprite("Number of Hits");
    title.setFontSize(18);
    axis.setTitleConfig(title);
    axis.setDisplayGrid(true);
    axis.setMinimum(0);
    axis.setMaximum(100);
    chart.addAxis(axis);

    CategoryAxis<Data, String> catAxis = new CategoryAxis<Data, String>();
    catAxis.setPosition(Position.LEFT);
    catAxis.setField(dataAccess.name());
    title = new TextSprite("Month of the Year");
    title.setFontSize(18);
    catAxis.setTitleConfig(title);
    chart.addAxis(catAxis);

    final BarSeries<Data> bar = new BarSeries<Data>();
    bar.setYAxisPosition(Position.BOTTOM);
    bar.addYField(dataAccess.data1());
    bar.addYField(dataAccess.data2());
    bar.addYField(dataAccess.data3());
    bar.addColor(new RGB(148, 174, 10));
    bar.addColor(new RGB(17, 95, 166));
    bar.addColor(new RGB(166, 17, 32));
    chart.addSeries(bar);

    final Legend<Data> legend = new Legend<Data>();
    legend.setPosition(Position.RIGHT);
    legend.setItemHighlighting(true);
    legend.setItemHiding(true);
    chart.setLegend(legend);

    TextButton regenerate = new TextButton("Reload Data");
    regenerate.addSelectHandler(
        new SelectHandler() {
          @Override
          public void onSelect(SelectEvent event) {
            store.clear();
            store.addAll(TestData.getData(12, 0, 100));
            chart.redrawChart();
          }
        });

    ToggleButton animation = new ToggleButton("Animate");
    animation.addValueChangeHandler(
        new ValueChangeHandler<Boolean>() {
          @Override
          public void onValueChange(ValueChangeEvent<Boolean> event) {
            chart.setAnimated(event.getValue());
          }
        });
    animation.setValue(true, true);
    ToggleButton shadow = new ToggleButton("Shadow");
    shadow.addValueChangeHandler(
        new ValueChangeHandler<Boolean>() {
          @Override
          public void onValueChange(ValueChangeEvent<Boolean> event) {
            chart.setShadowChart(event.getValue());
            chart.redrawChart();
          }
        });
    shadow.setValue(true);

    ToolBar toolBar = new ToolBar();
    toolBar.add(regenerate);
    toolBar.add(animation);
    toolBar.add(shadow);

    ContentPanel panel = new FramedPanel();
    panel.getElement().getStyle().setMargin(10, Unit.PX);
    panel.setCollapsible(true);
    panel.setHeadingText("Grouped Bar Chart");
    panel.setPixelSize(620, 500);
    panel.setBodyBorder(true);

    final Resizable resize = new Resizable(panel, Dir.E, Dir.SE, Dir.S);
    resize.setMinHeight(400);
    resize.setMinWidth(400);

    panel.addExpandHandler(
        new ExpandHandler() {
          @Override
          public void onExpand(ExpandEvent event) {
            resize.setEnabled(true);
          }
        });
    panel.addCollapseHandler(
        new CollapseHandler() {
          @Override
          public void onCollapse(CollapseEvent event) {
            resize.setEnabled(false);
          }
        });

    new Draggable(panel, panel.getHeader()).setUseProxy(false);

    VerticalLayoutContainer layout = new VerticalLayoutContainer();
    panel.add(layout);

    toolBar.setLayoutData(new VerticalLayoutData(1, -1));
    layout.add(toolBar);

    chart.setLayoutData(new VerticalLayoutData(1, 1));
    layout.add(chart);

    return panel;
  }
Example #2
0
  public Widget asWidget() {
    final Chart<Site> chart = new Chart<Site>(600, 400);
    chart.setDefaultInsets(20);

    final ListStore<Site> store = new ListStore<Site>(siteAccess.nameKey());
    Date initial = f.parse("Feb 1");
    for (int i = 0; i < 7; i++) {
      store.add(
          new Site(initial, Math.random() * 20 + 80, Math.random() * 20 + 40, Math.random() * 20));
      initial = CalendarUtil.copyDate(initial);
      CalendarUtil.addDaysToDate(initial, 1);
    }
    chart.setStore(store);

    NumericAxis<Site> axis = new NumericAxis<Site>();
    axis.setPosition(Position.LEFT);
    axis.addField(siteAccess.visits());
    TextSprite title = new TextSprite("Number of Hits");
    title.setFontSize(18);
    axis.setTitleConfig(title);
    axis.setDisplayGrid(true);
    axis.setMinimum(0);
    axis.setMaximum(100);
    chart.addAxis(axis);

    final TimeAxis<Site> time = new TimeAxis<Site>();
    time.setField(siteAccess.date());
    time.setStartDate(f.parse("Feb 1"));
    time.setEndDate(f.parse("Feb 7"));
    time.setLabelProvider(
        new LabelProvider<Date>() {
          @Override
          public String getLabel(Date item) {
            return f.format(item);
          }
        });
    chart.addAxis(time);

    LineSeries<Site> series = new LineSeries<Site>();
    series.setYAxisPosition(Position.LEFT);
    series.setYField(siteAccess.visits());
    series.setStroke(new RGB(148, 174, 10));
    series.setShowMarkers(true);
    series.setMarkerIndex(1);
    Sprite marker = Primitives.circle(0, 0, 6);
    marker.setFill(new RGB(148, 174, 10));
    series.setMarkerConfig(marker);
    chart.addSeries(series);

    series = new LineSeries<Site>();
    series.setYAxisPosition(Position.LEFT);
    series.setYField(siteAccess.views());
    series.setStroke(new RGB(17, 95, 166));
    series.setShowMarkers(true);
    series.setMarkerIndex(1);
    marker = Primitives.cross(0, 0, 6);
    marker.setFill(new RGB(17, 95, 166));
    series.setMarkerConfig(marker);
    chart.addSeries(series);

    series = new LineSeries<Site>();
    series.setYAxisPosition(Position.LEFT);
    series.setYField(siteAccess.veins());
    series.setStroke(new RGB(166, 17, 32));
    series.setShowMarkers(true);
    series.setMarkerIndex(1);
    marker = Primitives.diamond(0, 0, 6);
    marker.setFill(new RGB(166, 17, 32));
    series.setMarkerConfig(marker);
    chart.addSeries(series);

    update =
        new Timer() {
          @Override
          public void run() {
            Date startDate = CalendarUtil.copyDate(time.getStartDate());
            Date endDate = CalendarUtil.copyDate(time.getEndDate());
            CalendarUtil.addDaysToDate(startDate, 1);
            CalendarUtil.addDaysToDate(endDate, 1);
            chart
                .getStore()
                .add(
                    new Site(
                        endDate,
                        Math.random() * 20 + 80,
                        Math.random() * 20 + 40,
                        Math.random() * 20));
            time.setStartDate(startDate);
            time.setEndDate(endDate);
            chart.redrawChart();
          }
        };

    update.scheduleRepeating(1000);

    ToggleButton animation = new ToggleButton("Animate");
    animation.addValueChangeHandler(
        new ValueChangeHandler<Boolean>() {
          @Override
          public void onValueChange(ValueChangeEvent<Boolean> event) {
            chart.setAnimated(event.getValue());
          }
        });
    animation.setValue(true, true);

    ToolBar toolBar = new ToolBar();
    toolBar.add(animation);

    ContentPanel panel = new FramedPanel();
    panel.getElement().getStyle().setMargin(10, Unit.PX);
    panel.setCollapsible(true);
    panel.setHeadingText("Live Chart");
    panel.setPixelSize(620, 500);
    panel.setBodyBorder(true);

    VerticalLayoutContainer layout = new VerticalLayoutContainer();
    panel.add(layout);

    toolBar.setLayoutData(new VerticalLayoutData(1, -1));
    layout.add(toolBar);

    chart.setLayoutData(new VerticalLayoutData(1, 1));
    layout.add(chart);

    panel.addAttachHandler(
        new AttachEvent.Handler() {
          @Override
          public void onAttachOrDetach(AttachEvent event) {
            if (event.isAttached() == false) {
              update.cancel();
            }
          }
        });

    return panel;
  }