help with ​vaadin chart addon showloading

Flow
1

Hi,
I’m using vaadin addon chart and I need to show a message when data is loading.
It seems that with vaadin chart 3.x, a message from com.vaadin.addon.charts.model.Lang.noData is showed instead
This message “No data to display” is pretty confusing

I’ve seen com.vaadin.addon.charts.model.Loading, that is the configuration to display loading message
Java doc says:


The loading options control the appearance of the loading screen that covers
the plot area on chart operations. This screen only appears after an explicit
call to chart.showLoading() It is a utility for developers to communicate to the end user that something is going on, for example while
retrieving new data via an XHR connection. The “Loading…” text itself is
not part of this configuration object, but part of the lang
object.

chart.showLoading is a highchart API, how can I call it from vaadin explicitely ?

thank you

2

There’s no Java API for calling the clientside showLoading method at the moment.

I did a quick and hacky test and the following:

[code]
private void showLoading(String text) {
String code = " var chart = Highcharts.charts[0]
;"
+ “chart.showLoading('” + text + “');”;
Page.getCurrent().getJavaScript().execute(code);
}

private void hideLoading() {
    String code = "    var chart = Highcharts.charts[0]

;"
+ “chart.hideLoading();” ;
Page.getCurrent().getJavaScript().execute(code);
}
[/code]Seems to work.

It asumes that there’s only one chart ( “Highcharts.charts[0]
;”)

3

Thank you Guilliermo for your support !
so it is a missing implementation … Is there any chance this feature will be implemented ?

Unfortunately I’ve many charts to be displayed on the same page, that’s why it took time and I need such loading message.
Do you think I can access them by id ?

I’ve used a progress indicator that is showed when data is loading from backend
and the most annoying problem is that charts show “No data to display” until data is attached to them
Should I open a bug for such wrong message ?

4

I’ve tried your code with only one chart but I had no luck …
from chrome console
com.vaadin.client.communication.MessageHandler
SEVERE: Error performing server to client RPC callscom.google.gwt.core.client.JavaScriptException: (TypeError) : Cannot read property ‘showLoading’ of undefined

I did a quick search on stackoverflow …

​
How can i get access to a Highcharts chart through a DOM-Container ?
Highcharts 3.0.1
Users can use the highcharts plugin
var chart=$(“#container”).highcharts();

I tried but I had same js issue
is highcharts plugin available with vaadin charts ?

5

I think showLoading and hideLoading features could be requested in
dev.vaadin.com

6

Sorry I hurried to answer today and I didn’t see that the original problem was with the noData message, that’s quite easy to change, you can do it like this:

Lang lang = new Lang(); lang.setNoData(""); ChartOptions.get().setLang(lang); Empty String or your desired message will be set for all charts that don’t have data to show.

Hope this helps

7

Thank you for clarification !

I know about Lang setting, probably I’ll set the empty string
I’ll hope that client is not asking me to show a message if chart is empty :wink:

8

Don’t hesitate to create feature request in
https://dev.vaadin.com/
 for show and hide loading

9

done !!!

[Vaadin]
#20176: add java support for highchart functions showloading hideloading

https://dev.vaadin.com/ticket/20176#ticket