trying to use charba in GWT Elemento

[junaidp]

Hi
I am trying to use charba in GWT Elemento , https://github.com/hal/elemento

but they are not using widgets , where as charba is working lke this

BarChart chart = new BarChart();

is there a way i can get element to use in elemento and no the widget

[stockiNail]

@junaidp I have to say that I don't know Elemento. Apologize.

Nevertheless a Charba chart is a widget with 1 root element (DIV) which contains all needed element.

I have seen that there is an helper which can transform a widget into a element.

I think the following code should work:

BarChart chart = new BarChart();
// configure the chart programmatically
....
HTMLElement elementoElement = Widgets.asElement(chart);
// add it wherever you want

Let me know if works.

[junaidp]

@stockiNail Thank You for the guide , yeah you correct ,
I just made a simple Label widget and did like this and it displayed ..

BUT , if i put the chart in same way , it just giving nothing (an empty canvas only)
(then i also try to show the chart in a POPUP and it Displayed fine )

             BarChart chart = new BarChart();
	chart.getOptions().setResponsive(true);
	chart.getOptions().getLegend().setPosition( Position.top);
	chart.getOptions().getTitle().setDisplay(true);
	chart.getOptions().getTitle().setText("Charba Bar Chart3");

	BarDataset dataset1 = chart.newDataset();
	dataset1.setLabel("-");

	IsColor color1 = Colors.ALL[0];

	dataset1.setBackgroundColor(color1.alpha(0.2));
	dataset1.setBorderColor(color1);

	dataset1.setData(getFixedDigits(months));

	chart.getData().setLabels(getLabels());
	chart.getData().setDatasets(dataset1);



	element = Widgets.asElement( chart );

	//Label lbl = new Label("test");
	//element = Widgets.asElement( lbl );
	//PopupPanel pop = new PopupPanel(  );
	//pop.setWidget( chart );  CHART DISPLAYED IN POPUP
	//pop.center();

[stockiNail]

@junaidp I used your code (adding the size of popup panel), having a button to show the popup and one to hide it (if showing) :

PopupPanel pop = new PopupPanel();
	
@UiHandler("showPopup")
protected void handleShowPopup(ClickEvent event) {
    BarChart chart = new BarChart();
	chart.getOptions().setResponsive(true);
	chart.getOptions().getLegend().setPosition(Position.top);
	chart.getOptions().getTitle().setDisplay(true);
	chart.getOptions().getTitle().setText("Charba Bar Chart3");

	BarDataset dataset1 = chart.newDataset();
	dataset1.setLabel("-");

	IsColor color1 = Colors.ALL[0];
	dataset1.setBackgroundColor(color1.alpha(0.2));
	dataset1.setBorderColor(color1);

	dataset1.setData(getFixedDigits(months));

	chart.getData().setLabels(getLabels());
	chart.getData().setDatasets(dataset1);
	pop.setWidget(chart);  
	//
	// added size
	//

	pop.setPixelSize(600, 300);

	//
	// or in alternative
	// chart.setPixelSize(600, 300);
	//

	pop.center();
}
	
@UiHandler("hidePopup")
protected void handleHidePopup(ClickEvent event) {
	if (pop.isShowing()) {
		pop.hide();
	}
}

Here is the result:

About the usage by elements, be aware that Charba is drawing (by default) the chart by onAttach method and destroy it by onDetach (GWT Widget methods).
If these methods are not called for whatever reason, you should perform the drawing (and destroying) of the chart programmatically, by chart.draw() (and chart.destroy).

[junaidp]

thanks , yeah in popup , i was also having the chart , the problem was in that element for GWT elemento , but let me try this chart.draw() .. and will update you

[junaidp]

but is it possible that I use charba without having the widgets ? , We started with charba because of its jsinterop feature, i assumed That i will be able to use Jsinterop in charba to get the javascript charts and display (without dealing with Widgets)
but now as i understand , the JSinterop is Only Used to convert the JS charts into widgets , so that Users(like me) can simply use that widgets in our GWT app..

but may be i can access somehow directly the javascript behind the charba charts to display as elements in app

may be : If i can try to refactor a bit the charba lib to try to decouple the charts from the widgets

[stockiNail]

but is it possible that I use charba without having the widgets ?

The ONLY widget used in Charba is SimplePanel and Canvas

We started with charba because of its jsinterop feature, i assumed That i will be able to use Jsinterop in charba to get the javascript charts and display (without dealing with Widgets)
but now as i understand , the JSinterop is Only Used to convert the JS charts into widgets , so that Users(like me) can simply use that widgets in our GWT app.

JSInterop is a way to map javascript objects in Java ones. There is not any relation with GWT Widgets or elements. Charba doesn't map ONLY the CHART.JS javascript but implements a set of java functionalities to use it easily (or at least I think so...), in java style.

but may be i can access somehow directly the javascript behind the charba charts to display as elements in app
may be : If i can try to refactor a bit the charba lib to try to decouple the charts from the widgets

If you agree I can try to do some tests using DOM elements and let me back to you with further info. I n my opinion it should work as well.

[junaidp]

right , Yeah DOM elements would be a good approach , Yes please if you can test and come up with some thing , let me know.

thanks

[stockiNail]

@junaidp I had a look to Elemento and honestly in my opinion it does not make sense to decouple Charba and chart javascript because you can use Charba inside Elemento without any issue or refactoring.

Said that, I've created a sample GWT application with Elemento (0.9.0 for GWT2) and Charba (2.0).

I've created 2 classes. EntryPoint:

public class Main implements EntryPoint {

    @Override
    public void onModuleLoad() {
        ChartElement application = new ChartElement();
       
        Elements.body().add(application);

    }
}

And my element with chart instance, adding the observer for onAttach and onDetach:

class ChartElement implements IsElement<HTMLElement> {
 
    private final HTMLElement root;

    ChartElement() {
    	
	BarChart chart = new BarChart();
	chart.getOptions().setResponsive(true);
	chart.getOptions().getLegend().setPosition(Position.top);
	chart.getOptions().getTitle().setDisplay(true);
	chart.getOptions().getTitle().setText("Charba Bar Chart3");

	BarDataset dataset1 = chart.newDataset();
	dataset1.setLabel("-");

	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.setPixelSize(600, 300);
    	
        this.root = div().add(Widgets.element(chart)).get();
         
        Elements.onAttach(root, new ObserverCallback() {
			
			@Override
			public void onObserved(MutationRecord mutationRecord) {
				chart.draw();
			}
		});
         Elements.onDetach(root, new ObserverCallback() {
 			
			@Override
			public void onObserved(MutationRecord mutationRecord) {
				chart.destroy();
			}
		});
    }

    @Override
    public HTMLElement element() {
        return root;
    }
}

This is the result:

As you can see, it works perfectly!!

[junaidp]

perfect , thank you , mainly this chart.draw thing was missing ,
I used your code and yes , its working!
Thank you very much .

[stockiNail]

@junaidp Very good! The previous code wasn't so clean! For instance, you don't need the root element (as DIV) because this ChartElement can return directly the Charba one.

The following code is cleaner (and maybe it could be a starting point to become a GWT Elemento abstract wrapper of Charba charts):

class ChartElement implements IsElement<HTMLElement> {

	private final HTMLElement chartElement;

	ChartElement() {

		BarChart chart = new BarChart();
		chart.getOptions().setResponsive(true);
		chart.getOptions().getLegend().setPosition(Position.top);
		chart.getOptions().getTitle().setDisplay(true);
		chart.getOptions().getTitle().setText("Charba Bar Chart3");

		BarDataset dataset1 = chart.newDataset();
		dataset1.setLabel("-");

		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.setPixelSize(600, 300);

		this.chartElement = Widgets.element(chart);

		Elements.onAttach(chartElement, new ObserverCallback() {

			@Override
			public void onObserved(MutationRecord mutationRecord) {
				chart.draw();
			}
		});
		Elements.onDetach(chartElement, new ObserverCallback() {

			@Override
			public void onObserved(MutationRecord mutationRecord) {
				chart.destroy();
			}
		});
	}

	@Override
	public HTMLElement element() {
		return chartElement;
	}
}

[junaidp]

correct, thanks

[stockiNail]

If you don't want to create "wrappers" of chart instance, you can also "extend" charts. In the version 2.0 all charts classes are not final. This is the example for BAR chart. You should create all elements for charts classes of Charba (LineChartElement, PieChartElement, ...).

public class BarChartElement extends BarChart implements IsElement<HTMLElement> {

	private final HTMLElement chartElement;

	BarChartElement() {

		super();

		this.chartElement = Widgets.element(this);

		Elements.onAttach(chartElement, new ObserverCallback() {

			@Override
			public void onObserved(MutationRecord mutationRecord) {
				draw();
			}
		});
		Elements.onDetach(chartElement, new ObserverCallback() {

			@Override
			public void onObserved(MutationRecord mutationRecord) {
				destroy();
			}
		});
	}

	@Override
	public HTMLElement element() {
		return chartElement;
	}
}

[stockiNail]

@junaidp this is better than previous sample because you invoke onAttach and onDetach methods of chart instead of draw and destroy. In this way, you can follow the right logic of a Charba chart.

class BarChartElement extends BarChart implements IsElement<HTMLElement> {

	private final HTMLElement chartElement;

	BarChartElement() {

		super();

		this.chartElement = Widgets.element(this);

		Elements.onAttach(chartElement, new ObserverCallback() {

			@Override
			public void onObserved(MutationRecord mutationRecord) {
				onAttach();
			}
		});
		Elements.onDetach(chartElement, new ObserverCallback() {

			@Override
			public void onObserved(MutationRecord mutationRecord) {
				onDetach();
			}
		});
	}

	@Override
	public HTMLElement element() {
		return chartElement;
	}
}

[junaidp]

ah thats nice , thanks

[stockiNail]

@junaidp we are going to new version of Charaba and reviewing this issue, about the integration with GWT Elemento, I'd like to ask you if are you still interested in using Charba?

If yes, we could prepare all available charts for GWT Elemento in order you don't have to maintain that code, starting from above code.
What do you think?

[ruzkant]

@stockiNail Thanks for this. I am experimenting with domino and got my pie chart working with this. I still need to figure out the PieceLabels since the change to version 2, but I see there is some mention in the wiki.

[stockiNail]

@ruzkant Very good!

Since vesion 2.1, the CHART.JS plugin LABELS (former PieceLabels) is provided as Charba extension that means that is available without any injection of javascript or configuration classes. All possible configurations are supported (callbacks included).

Here is the wiki page how to use it.
Here is the source code of pie chart with Labels plugin (from Showcase).

Let me also say that I don't know if that Labels plugin is still maintained because last commit was on Dec 9, 2018.

Since the same version when Labels plugin was embedded, there is another embedded plugin, Datalabels that is well maintained by Chart.JS community and fully supported in Charba.

Here is the source code of doughnut chart with DataLabels plugin (from Showcase).
To see more use cases, you can go to Charba Showcase --> Extensions --> Datalabels plugin (Labels plugin use cases are located there)

[ruzkant]

@stockiNail Thanks for the info I'll have a look

[ruzkant]

@stockiNail Thanks! Datalabels plugin working well for my pie chart...

[stockiNail]

@junaidp @ruzkant FYI if you would like, have a llok to issue #53.
Finally we are providing Charba as J2CL and GWT library which can address the above observation about the integration with GWT Elemento and elemental2.
That means that you could use Charba by elements, without any widgets and dependency with GWT.
Better late than never.