Skip to main content


Eclipse Community Forums
Forum Search:

Search      Help    Register    Login    Home
Home » Eclipse Projects » Eclipse Scout » AbstractChartControl - how to show chart(AbstractChartControl - how to show chart)
AbstractChartControl - how to show chart [message #1840225] Fri, 09 April 2021 07:24 Go to next message
Mr Robot is currently offline Mr RobotFriend
Messages: 70
Registered: March 2020
Member
Hello,

I managed to show chart on chart field in Scout 11.

I saw there is also AbstractChartControl that I can attach it to table in search form.

When I run app, I only have categories on left. But no chart is displayed on right.

Do I need to implement my own chart control or that is done automaticaly by scout?

Thanks
Re: AbstractChartControl - how to show chart [message #1840382 is a reply to message #1840225] Tue, 13 April 2021 15:20 Go to previous messageGo to next message
Claudio Guglielmo is currently offline Claudio GuglielmoFriend
Messages: 256
Registered: March 2010
Senior Member
Hi,

the chart table control automatically collects the necessary data from the table. You just have to add it to the table, e.g. by overriding the method addDefaultChartTableControls of the AbstractPageWithTable.

  @Override
  protected void addDefaultTableControls() {
    super.addDefaultTableControls();
    getTable().addTableControl(new ChartTableControl());
  }


Best regards
Claudio
Re: AbstractChartControl - how to show chart [message #1840443 is a reply to message #1840382] Thu, 15 April 2021 10:10 Go to previous messageGo to next message
Luka Cavic is currently offline Luka CavicFriend
Messages: 47
Registered: August 2014
Member
Hello,

I did this, but no chart is visible. I can only see menu on left where I can set chart type and selet option to group by.

No errors are show in console or in browser console.

Is there minimum of rows required to show chart?

Thanks.
Re: AbstractChartControl - how to show chart [message #1840502 is a reply to message #1840443] Fri, 16 April 2021 17:54 Go to previous messageGo to next message
Beat Schwarzentrub is currently offline Beat SchwarzentrubFriend
Messages: 205
Registered: November 2010
Senior Member
You need at least one row. Obviously, a chart without data is not very useful.

I just tried it successfully with a very simple TablePage from the widgets app and the additional code to active the ChartTableControl that Claudio posted above. Maybe you can compare it with your code?

Regards,
Beat
Re: AbstractChartControl - how to show chart [message #1840534 is a reply to message #1840502] Sun, 18 April 2021 08:25 Go to previous messageGo to next message
Mr Robot is currently offline Mr RobotFriend
Messages: 70
Registered: March 2020
Member
Hi,

did all of that.

This is code: http://prntscr.com/11mltgl in AbstractPageWithTable

This is rendered...

http://prntscr.com/11mlw63

No chart is displayed. I have 5 rows.

This is package.json.

http://prntscr.com/11mlz9o

[Updated on: Sun, 18 April 2021 08:26]

Report message to a moderator

Re: AbstractChartControl - how to show chart [message #1840582 is a reply to message #1840534] Mon, 19 April 2021 19:49 Go to previous messageGo to next message
Beat Schwarzentrub is currently offline Beat SchwarzentrubFriend
Messages: 205
Registered: November 2010
Senior Member
Thanks for the screen shots. That looks all quite correct to me.

I just tested it again with a completely fresh installation.
1. Download from https://www.eclipse.org/downloads/packages/release/2021-03/r/eclipse-ide-scout-developers
2. Generate a "Hello World" application using the wizard at the start screen (type "Java").
3. Add the necessary dependencies to pom.xml, package.json, index.js and index.less according to https://eclipsescout.github.io/11.0/technical-guide.html#how-to-create-a-chart
4. Create a very simple page and register it in WorkOutline.java (see code below).
5. Run the webpack build and start the backend and the UI server.

import org.eclipse.scout.apps.helloscout.client.helloworld.ChartTestTablePage.Table;
import org.eclipse.scout.rt.chart.client.ui.basic.table.controls.ChartTableControl;
import org.eclipse.scout.rt.client.ui.basic.table.AbstractTable;
import org.eclipse.scout.rt.client.ui.basic.table.columns.AbstractIntegerColumn;
import org.eclipse.scout.rt.client.ui.basic.table.columns.AbstractLongColumn;
import org.eclipse.scout.rt.client.ui.basic.table.columns.AbstractStringColumn;
import org.eclipse.scout.rt.client.ui.desktop.outline.pages.AbstractPageWithTable;
import org.eclipse.scout.rt.platform.Order;
import org.eclipse.scout.rt.platform.classid.ClassId;
import org.eclipse.scout.rt.shared.services.common.jdbc.SearchFilter;
 
@ClassId("f1ab7041-c80a-4120-92b4-f96b98b68b2d")
public class ChartTestTablePage extends AbstractPageWithTable<Table> {
 
    public ChartTestTablePage() {
        super();
    }
 
    @Override
    protected boolean getConfiguredLeaf() {
        return true;
    }
 
    @Override
    protected String getConfiguredTitle() {
        return "Chart Test";
    }
 
    @Override
    protected void execLoadData(SearchFilter filter) {
        importTableData(loadDemoData());
    }
 
    protected Object[][] loadDemoData() {
        return new Object[][] { { "Row 1", 100, 50 }, { "Row 2", 127, 18 }, { "Row 3", 423, 1 } };
    }
 
    @Override
    protected void addDefaultTableControls() {
        super.addDefaultTableControls();
        getTable().addTableControl(new ChartTableControl());
    }
 
    @ClassId("f318211a-df23-4821-b801-1de825ed9744")
    public class Table extends AbstractTable {
 
        public StringColumn getStringColumn() {
            return getColumnSet().getColumnByClass(StringColumn.class);
        }
 
        public LongColumn getLongColumn() {
            return getColumnSet().getColumnByClass(LongColumn.class);
        }
 
        public IntegerColumn getIntegerColumn() {
            return getColumnSet().getColumnByClass(IntegerColumn.class);
        }
 
        @Order(10)
        @ClassId("0f696383-9e07-49a0-ae9a-a88907b8a74f")
        public class StringColumn extends AbstractStringColumn {
 
            @Override
            protected String getConfiguredHeaderText() {
                return "Name";
            }
        }
 
        @Order(20)
        @ClassId("dd0bdab7-1284-4e2a-a823-cb855e00a118")
        public class LongColumn extends AbstractLongColumn {
 
            @Override
            protected String getConfiguredHeaderText() {
                return "Number 1";
            }
        }
 
        @Order(30)
        @ClassId("739203a6-4a92-47a1-87cc-ff71ecb33c10")
        public class IntegerColumn extends AbstractIntegerColumn {
 
            @Override
            protected String getConfiguredHeaderText() {
                return "Number 2";
            }
        }
    }
}


For me, everything worked as expected and the chart is rendered correctly. I tried the same with the slightly older version 11.0.12, but it works fine, too.

So, what can you do? Here are some suggestions:


  • Take 5 minutes and try the same test I sketched above. If this works, there must be something wrong in your project and you should be able to find the problem by comparing the two.
  • Ensure that it's not a browser issue. Try a different browser and/or operating system (e.g. Firefox when you normally use Chrome) and check that no plugins might interfere. Sometimes, "ad blockers" or "malware protection" plugins overreact and block certain content in error.
  • Fire up the developer tools in your browser (normally F12). Use the DOM inspector to browser the page and check if there is something at the empty space. There should be a <div> with class "chart" and a <canvas> element inside.
  • As a last resort, you could try to debug the code and find out why your data is not rendered. To do so, open the developer tools and open the "Sources" panel. You can then open the file "ChartTableControl.js" and find the method called _drawChart(). Add a breakpoint, and when it is hit, you can step through the code and check at which condition the execution takes the wrong turn.


Regards,
Beat
Re: AbstractChartControl - how to show chart [message #1840634 is a reply to message #1840582] Wed, 21 April 2021 06:55 Go to previous messageGo to next message
Mr Robot is currently offline Mr RobotFriend
Messages: 70
Registered: March 2020
Member
Hello,

I can show chart in AbstractChartField. So it is not browser issue I think. Only problem is I cannot show chart in TableControl.

I did run debug on console, and found this. Method _drawChart is calling calculateValues method. And tableData is always -1.

Check screenshoot:
http://prntscr.com/11shlzk

And later, code enters this: // return not possible to draw chart
http://prntscr.com/11shnw0

Why is that? I have rows in table.
Re: AbstractChartControl - how to show chart [message #1840636 is a reply to message #1840634] Wed, 21 April 2021 07:20 Go to previous message
Mr Robot is currently offline Mr RobotFriend
Messages: 70
Registered: March 2020
Member
I managed to fix it.

The problem was in column. I had AbstractIdColumn that had isDisplayable() { return false; }

After changing that to getConfiguredDisplayable() issue was fixed.

Thank you for your support.
Previous Topic:Registration page
Next Topic:Site page error after upgrading from Scout 9 to 10
Goto Forum:
  


Current Time: Mon Apr 15 02:25:08 GMT 2024

Powered by FUDForum. Page generated in 0.09282 seconds
.:: Contact :: Home ::.

Powered by: FUDforum 3.0.2.
Copyright ©2001-2010 FUDforum Bulletin Board Software

Back to the top