Skip to main content
Version: 6.1

Integration

Even if Charba was born to be a GWT chart library, Charba is now more a J2CL - JavaToClosure chart library and GWT is only one of possible framework where Charba works.

Charba has got an own DOM tree manager in order to do not have any strong dependency with a DOM framework used for an application but nevertheless it is necessary that the DOM elements of Charba can be used by the other frameworks.

For this reason, Charba provides a set of utilities (casting some own elements to the framework's ones) in order to enable adding a chart in a DOM framework.

The main provided hooks by Charba are:

  • a Div element which is exposed by chart.getChartElement() method.
  • a Canvas element which is exposed by chart.getCanvas() method.

Elemental2

Google Elemental2 provides type checked access to all browser APIs for Java code. This is done by using closure extern files and generating JsTypes, which are part of the new JsInterop specification that is both implemented in GWT and J2CL.

The following table shows how you can leverage on Google Elemental2 and Charba together:

Charba classElemental2 classCharba to Elemental2Elemental2 to Charba
DivHTMLDivElementHTMLDivElement element = Div.as()Div element = CastHelper.toDiv(HTMLDivElement)
ImgHTMLImageElementHTMLImageElement element = Img.as()Img element = CastHelper.toImg(HTMLImageElement)
CanvasHTMLCanvasElementHTMLCanvasElement element = Canvas.as()Canvas element = CastHelper.toCanvas(HTMLCanvasElement)
CanvasPatternItemCanvasPatternCanvasPattern item = CanvasPatternItem.as()CanvasPatternItem item = CastHelper.toPattern(CanvasPattern)
CanvasGradientItemCanvasGradientCanvasGradient item = CanvasGradientItem.as()CanvasGradientItem item = CastHelper.toGradient(CanvasGradient)
NativeBaseEventEventEvent event = NativeBaseEvent.as()NativeBaseEvent event = (NativeBaseEvent) elemental2Event
NativeMouseEventMouseEventMouseEvent event = NativeMouseEvent.as()NativeMouseEvent event = (NativeMouseEvent) elemental2Event
NativeTouchEventTouchEventTouchEvent event = NativeTouchEvent.as()NativeTouchEvent event = (NativeTouchEvent) elemental2Event
NativeKeyboardEventKeyboardEventKeyboardEvent event = NativeKeyboardEvent.as()NativeKeyboardEvent event = (NativeKeyboardEvent) elemental2Event
NativePointerEventMouseEventMouseEvent event = NativePointerEvent.as()NativeMouseEvent event = (NativeMouseEvent) elemental2Event(1)
NativeCustomEventCustomEventCustomEvent event = NativeCustomEvent.as()NativeCustomEvent event = (NativeCustomEvent) elemental2Event

(1) up to date, Google Elemental2 doesn't map the PointerEvent javascript class therefore you can use only the NativeMouseEvent.

Here is a simple sample:

LineChart chart = new LineChart();
chart.getOptions().setResponsive(true);
chart.getOptions().getLegend().setPosition(Position.TOP);
chart.getOptions().getTitle().setDisplay(true);
chart.getOptions().getTitle().setText("Charba line chart");

LineDataset dataset1 = chart.newDataset();
dataset1.setLabel("dataset 1");

dataset1.setBackgroundColor(HtmlColor.BLUE.alpha(0.2));
dataset1.setBorderColor(HtmlColor.BLUE);

dataset1.setData(10, 45, 50, 25, 30, 5);

chart.getData().setLabels("1", "2", "3", "4", "5", "6");
chart.getData().setDatasets(dataset1);

chart.getChartElement().getStyle().setWidth("600px");
chart.getChartElement().getStyle().setHeight("300px");

Element element = chart.getChartElement().as();

DomGlobal.document.body.appendChild(element);

GWT Web Toolkit

The following table shows how you can leverage on GWT Web toolkit and Charba together:

Charba classGWT classCharba to GWTGWT to Charba
DivDivElementDivElement element = Div.as()Div element = CastHelper.toDiv(DivElement)
ImgImageElementImageElement element = Img.as()Img element = CastHelper.toImg(ImageElement)
CanvasCanvasElementCanvasElement element = Canvas.as()Canvas element = CastHelper.toCanvas(CanvasElement)
CanvasPatternItemCanvasPatternCanvasPattern item = CanvasPatternItem.as()CanvasPatternItem item = CastHelper.toPattern(CanvasPattern)
CanvasGradientItemCanvasGradientCanvasGradient item = CanvasGradientItem.as()CanvasGradientItem item = CastHelper.toGradient(CanvasGradient)
NativeBaseEventNativeEventNativeEvent event = NativeBaseEvent.as()NativeBaseEvent event = (NativeBaseEvent) gwtEvent
NativeMouseEventNativeEventNativeEvent event = NativeMouseEvent.as()NativeMouseEvent event = (NativeMouseEvent) gwtEvent
NativeTouchEventNativeEventNativeEvent event = NativeTouchEvent.as()NativeTouchEvent event = (NativeTouchEvent) gwtEvent
NativeKeyboardEventNativeEventNativeEvent event = NativeTouchEvent.as()NativeKeyboardEvent event = (NativeKeyboardEvent) gwtEvent
NativePointerEventNativeEventNativeEvent event = NativePointerEvent.as()NativeMouseEvent event = (NativeMouseEvent) gwtEvent(2)

(2) up to date, GWT Web toolkit maps only the MouseEvent and TouchEvent javascript classes therefore you can cast them but you cannot use all available event info.

GWT Web Toolkit is also providing other classes related to images and for those Charba is providing a dedicated utility, ImagesHelper, to transform those GWT classes in a Img.

Charba classGWT classGWT to Charba
ImgImageResourceImg element = ImagesHelper.toImg(ImageResource)
ImgImageImg element = ImagesHelper.toImg(Image)