Eclipse Community Forums: Eclipse Scout

Help

Home

Home » Eclipse Projects » Eclipse Scout » How about Charts?

Show: Today's Messages :: Show Polls :: Message Navigator

How about Charts? [message #1760773]

Tue, 02 May 2017 19:15

R. van Twisk

Messages: 12
Registered: April 2017

Junior Member

If one needs to include Chart's in an application,
how can this effectively be done within Scout?
With effectively I don't mean generate a image on the sever and display that Smile

But for example to include something like : http://www.chartjs.org

Kind Regards,
Ries

Report message to a moderator

Re: How about Charts? [message #1760800 is a reply to message #1760773]

Wed, 03 May 2017 07:29

Benjamin Schulte

Messages: 34
Registered: December 2016

Member

As the widget demo shows, Scout can handle SVGs. So an approach could be to generate an SVG. But I did not find a (good) library for Java which does that for charts.

Report message to a moderator

Re: How about Charts? [message #1760804 is a reply to message #1760800]

Wed, 03 May 2017 07:54

Matthias Zimmermann

Messages: 208
Registered: June 2015

Senior Member

an other option is to create your own chart widget using an existing js library. if you'd like to follow this approach you may use the heatmap widget (that uses the leaflet.js framework) from the widgets demo:

client code (scout model in java)
ui.html code (scout rendering in java/js/css)

Report message to a moderator

Re: How about Charts? [message #1760829 is a reply to message #1760804]

Wed, 03 May 2017 12:37

R. van Twisk

Messages: 12
Registered: April 2017

Junior Member

Hey Mattias,

I am trying to follow that code, but I might be missing a piece of magic:

I created : src/main/js/chart-module.js

(function(scout, $, undefined) {
    __include("chart/Chart.bundle.min.js");
    __include("chart/ChartField.js");
    __include("chart/ChartAdapter.js");
    __include("chart/ChartFieldLayout.js");
}(scout, jQuery));

But I am getting : [nio-8080-exec-5] o.e.s.r.u.html.script.ScriptFileLocator : locate /res/chart-module.js: does not exist (no library, macro or source module)
And I am seeing in application-all.js

// --- /res/chart-module.js ---
// !!! NOT PROCESSED

This makes sense, because by default src/main/js isn't getting bundled (as far as I know).

So I moved it to src/main/resources/WebContent/res
and I see in application-all.js that the file is included, but then I get a javascript error :

// --- LIBRARY /res/chart-module.js ---
(function(scout, $, undefined) {
    __include("chart/Chart.bundle.min.js"); // <== ReferenceError: Can't find variable: __include
    __include("chart/ChartField.js");
    __include("chart/ChartAdapter.js");
    __include("chart/ChartFieldLayout.js");
}(scout, jQuery));

I also did a fresh clone from : https://github.com/BSI-Business-Systems-Integration-AG/SpringBoot-and-EclipseScout/tree/6.1.x/org.eclipse.scout.springboot
Ran the application and I also get in the log:

2017-05-03 14:35:05.487  WARN 71454 --- [nio-8080-exec-4] o.e.s.r.u.html.script.ScriptFileLocator  : locate /res/spring-security-module.less: does not exist (no library, macro or source module)
2017-05-03 14:35:05.528  WARN 71454 --- [nio-8080-exec-6] o.e.s.r.u.html.script.ScriptFileLocator  : locate /res/spring-security-module.js: does not exist (no library, macro or source module)

Any help would be greatly appreciated.

Ries

Report message to a moderator

Re: How about Charts? [message #1760873 is a reply to message #1760829]

Wed, 03 May 2017 20:20

Matthias Zimmermann

Messages: 208
Registered: June 2015

Senior Member

could we ask you to first try your chart widget running based on a scout hello world setup?
this makes helping simpler as we do not need to deal with interactions of scout and spring. once this works, you may move your new widget to the spring + scout example.
tx

Report message to a moderator

Re: How about Charts? [message #1760881 is a reply to message #1760873]

Wed, 03 May 2017 22:12

R. van Twisk

Messages: 12
Registered: April 2017

Junior Member

Hey Mattias,

I should have updated a bit sooner, sorry about that....

I managed to solve this particular issue with the following build config:

<resources>
            <resource>
                <directory>src/main/resources</directory>
            </resource>
            <resource>
                <directory>src/main/js</directory>
            </resource>
        </resources>

See here a example chart loaded through a ChartField
http://skitch.rvantwisk.nl/~rvt/tmp/Springboot_with_Eclipse_Scout_UI_1EBA8C62.png

I do have scaling issue on the chart as I can get odd results and overlapping canvas with other UI element's,

Here is such example:
http://skitch.rvantwisk.nl/~rvt/tmp/Springboot_with_Eclipse_Scout_UI_1EBA8CD4.png

Does scout handle exact widget calculations and positioning or is this CSS based?

Ries

[Updated on: Wed, 03 May 2017 22:35]

Report message to a moderator

Re: How about Charts? [message #1760885 is a reply to message #1760881]

Thu, 04 May 2017 06:37

Andre Wegmueller

Messages: 204
Registered: September 2012
Location: Baden-Dättwil, Switzerla...

Senior Member

> Does scout handle exact widget calculations and positioning or is this CSS based?

It's a bit of both. Most of the widgets in Scout's Html UI are laid out by JavaScript. The layouting concept is similar to Java Swing. Each "scout.Widget" has a root DOM element (the $container) which is attached to an instance of "scout.HtmlComponent" which has an instance of "scout.AbstractLayout". This class is responsible for calculating and returning the preferred size of the widget and to layout the widget when the size of its parent is set. Once the correct size is set on the root element of a Scout widget, the widget can layout its content with CSS positioning or with absolute positioning done by JavaScript code in the layout method.

To calculate the "preferred size" of a widget we rely (most of the time) on what the browser renders including CSS styles. A very simple layout is the "scout.SingleLayout" class. It is used in places where a DOM element has only one child element and the size of that child element should be equals to the parent size.

However: when you're working with Scout Forms, you usually work with GroupBoxes and FormFields. Thus your custom widget should probably be a sub class of scout.FormField which has a FormFieldLayout. Each form field has a label, a mandatory indicator, a status and the field itself (which in your case, would be the Chart).

Depending on how your Chart library works (maybe you have to call a library specific function whenever the size of the parent of the Chart changes), you should create a ChartFormFieldLayout.js, which deals with the specific layout requirements of the Chart.

I guess the HeatmapFieldLayout.js is a good example for that. As you see in that class the Heatmap library requires we call an 'invalidateSize' function whenever the size of the parent changes. If we didn't call that function we'd probably see similar issues as you currently have with your Chart in 1EBA8CD4.png.

Eclipse Scout Homepage | Documentation | GitHub

Report message to a moderator

Re: How about Charts? [message #1760932 is a reply to message #1760885]

Thu, 04 May 2017 12:25

R. van Twisk

Messages: 12
Registered: April 2017

Junior Member

Andre,

thank's for thanks extensive and quick answer. I indeed use the heatmap as my base, and started to modify it for my learning experience.
Instead of the Hello World, I used the Scout + Spring Boot tool, here is my repository I am fooling around with : https://github.com/rvt/SpringBoot-and-EclipseScout

Today I am going to play with it some more and see how it goes.

Ries

Update: It works! I had to set getConfiguredGridH and returned 6 for both of the form fields (table and Chart). I am not sure if this is considered a hack or not....

[Updated on: Thu, 04 May 2017 13:27]

Report message to a moderator

Re: How about Charts? [message #1793630 is a reply to message #1760932]

Sun, 12 August 2018 13:09

Oueslati Anis

Messages: 138
Registered: June 2014
Location: Paris

Senior Member

No Message Body

[Updated on: Sun, 12 August 2018 13:14]

Report message to a moderator

Re: How about Charts? [message #1793775 is a reply to message #1793630]

Wed, 15 August 2018 14:09

Oueslati Anis

Messages: 138
Registered: June 2014
Location: Paris

Senior Member

Hello
I created my project and followed the sample you made and I am facing an issue with size of the chart that I do not know how to solve it, please take a look on this
index.php/fa/33639/0/

how to fix this ?

Attachment: size.png
(Size: 4.18KB, Downloaded 833 times)

[Updated on: Wed, 15 August 2018 14:11]

Report message to a moderator

Re: How about Charts? [message #1793806 is a reply to message #1793775]

Thu, 16 August 2018 07:07

Beat Schwarzentrub

Messages: 214
Registered: November 2010

Senior Member

Oueslati Anis wrote on Wed, 15 August 2018 10:09

Hello
I created my project and followed the sample you made and I am facing an issue with size of the chart that I do not know how to solve it, please take a look on this

how to fix this ?

Looks like a layouting issue. Please check the following things:

1. Is your form field configured correctly, i.e. does it have a "getConfiguredGridH" value greater than 1? Otherwise the layouter will not stretch the field to fill the entire form.

2. Does your JS widget set a "layout" and is this layout implemented correctly? In the _render() method of your field, somewhere there should be a line similar to this:

... htmlComp.setLayout(new myproject.MyFieldLayout(this));...

In the corresponding "MyFieldLayout.js" there should be a _layout() method. This method is called whenever the size of the parent element is known and the inner element can now be layouted.
Have a look at the example HeatMapFieldLayout.js. In the _layout() method, this.field.heatmap.invalidateSize() is called. This causes the leaflet library to correctly use the available space. Your chart library probably has a similar method.

Regards,
Beat

Report message to a moderator