question

Mischa Spelt avatar image
2 Likes"
Mischa Spelt asked Mischa Spelt commented

Show a chart in a custom GUI

Hi, probably one of those "not-designed-to-do-this" questions, but maybe you can help me.

Is there a (dirty) trick where I can render a line chart directly in a custom GUI, given that I have the source data for the chart available e.g. in a treenode? E.g. can I add an HTML panel and make it render a graph from the library?

As a use-case consider a tabular input where the user will copy/paste a data series from an external source, and I would like them to review that series in a line chart inside the GUI. The input data is static (it will be saved in the object and will not change over a run) and it is only used for reviewing and validating the input so I'd rather not have it in a global dashboard.

FlexSim 22.0.5
chartscustom gui
5 |100000
Toggle Comment visibility. Current Visibility: Viewable by all users

Up to 12 attachments (including images) can be used with a maximum of 23.8 MiB each and 47.7 MiB total.

1 Answer

Jason Lightfoot avatar image
4 Likes"
Jason Lightfoot answered Arun Kr edited

You can draw in the graph view of a custom GUI - example attached.

CustomGUI_graph.fsm


Perhaps @Jordan Johnson can describe the minimum attributes required to use callwebscriptmethod to create the chart in the webpanel so that it draws similar to the dashboard widgets.



customgui-graph.fsm (25.8 KiB)
· 4
5 |100000
Toggle Comment visibility. Current Visibility: Viewable by all users

Up to 12 attachments (including images) can be used with a maximum of 23.8 MiB each and 47.7 MiB total.

Jordan Johnson avatar image Jordan Johnson ♦♦ commented ·

This is super close. I was able to make some adjustments and fix it:

customgraph_fix.fsm

Here are the changes I can remember making:

  1. The window shouldn't have a "draw" call in its OnOpen trigger. This call is probably fired before the html has been loaded in the chromium process. The html itself has a call to fireFlexSimEvent. The position of this call after the chart element guarantees that the chart element has been loaded.
  2. The html didn't match the chart type. The html was loading bar char js files, not timeplot js files. It was also calling initalizeBarChartD3. It needs to call intializeTimeplotd3 instead.
  3. I changed the calls to callwebscriptmethod. The last argument should be CWSM_END for all calls. I also changed the call passing in multiple parameters, so be sure to check that out.

The other helpful tidbit is that if you add a node called webDev to your environment with a value of 1, you can right-click on the chart and inspect it, which opens the chromium developer console. So you can debug the js in the chart directly.

2 Likes 2 ·
customgraph-fix.fsm (38.2 KiB)
Mischa Spelt avatar image Mischa Spelt Jordan Johnson ♦♦ commented ·
You're a hero! Thanks, once more.
0 Likes 0 ·
Mischa Spelt avatar image Mischa Spelt commented ·

Thanks for the tip Jason, I managed to produce this which seems like it should be working but actually does everything except for drawing the actual graph.

customgraph.fsm

Looking forward to getting Jordan's input on the missing link :-)


0 Likes 0 ·
customgraph.fsm (35.4 KiB)
Jason Lightfoot avatar image Jason Lightfoot ♦♦ Mischa Spelt commented ·
Not a fix, but I think line 27 should be CWSM_BUNDLE_DATA , not _HEADER.
1 Like 1 ·