Hello,

I'm currently trying to learn how to create a simple web application Dashboard in OS v.10, and I'm struggling to find any in-depth tutorials that takes me through how to implement the Highcharts customisation options.

I have searched the forums and the OS tutorial videos, but none of them seem to be as in-depth as I would like, and some of them seem to be out of date, or aimed at the mobile app versions of OS11. I can set up a basic chart by bootstrapping some data, but if I want to customise anything about the chart otherwise, I can't seem to make it work.

For example, I want to customise my Pie Chart so that it looks like the 'Styled mode pie chart' from the Highcharts demos (Link), but aside from putting the JSON into the AdvancedFormat_init action (which doesn't work), I can't seem to figure out how to customise anything else. Please bear in mind that I am currently a trainee developer, so i don't have any previous dev experience to draw from.

Can anyone point me in the direction of a comprehensive tutorial for OS10 WebApp Charts?

Hi Jordan,

Most of this customisation is going to be extremely specific to what you want to accomplish - a lot of these options fall out of the scope of the OutSystems materials but they're detailed in the Highcharts documentation.

Can you show us how you're using the AdvancedFormat_init action? It will help diagnose the issue. If you can't share your application, a print screen is fine too.

Hi Afonso,


Thanks for the response. There isn't really much to share right now - all I have done is apply the JSON from https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/styled-mode-pie/

into the AdvancedFormat_init action (screenshot 1). The chart will publish and render when launched in the browser, but the legend and data callouts are missing (screenshot 2):

More generically, I would really like it if there were a step-by-step for navigating the various variables that appear against the options for each chart, when to use them and how. Without this information, I am struggling to cohesively piece together the snippets information scattered across the various forum posts and tutorial videos.


Apologies if this doesn't cover what you need - please let me know if I need to take a screenshot of something more specific.

I think I've implemented what you were looking for in this test espace - I used less data (sorry, manual inserts take time!). There's a couple of things to note:

 - Use the DataPoint List in your Chart widget to insert and control the data: inserting it through JSON might be possible but it complicates maintenance;

 - You need to separate the JSON according to the category: if it's xAxis, it needs to go into the XAxisJSON input, if it's series, it needs to go into the DataSeries input, etc;

 - I'm not too sure why pie labels don't appear by default. You can make them appear with the ChartFormat_Init action (check it out in the example), but the JSFiddle you found doesn't explicitly enable them. It could be that OutSystems initializes the Chart with the labels turned off by default, or it could be because it uses an older version of HighCharts.

Let me know if you have any questions!

Afonso Carvalho wrote:

I think I've implemented what you were looking for in this test espace - I used less data (sorry, manual inserts take time!). There's a couple of things to note:

 - Use the DataPoint List in your Chart widget to insert and control the data: inserting it through JSON might be possible but it complicates maintenance;

 - You need to separate the JSON according to the category: if it's xAxis, it needs to go into the XAxisJSON input, if it's series, it needs to go into the DataSeries input, etc;

 - I'm not too sure why pie labels don't appear by default. You can make them appear with the ChartFormat_Init action (check it out in the example), but the JSFiddle you found doesn't explicitly enable them. It could be that OutSystems initializes the Chart with the labels turned off by default, or it could be because it uses an older version of HighCharts.

Let me know if you have any questions!

Thanks for this, Afonso - are you able to send me the example .OML that's compatible with OS 10?


Thanks for the tips as well, much appreciated. I'll have another go while bearing them in mind and see how I get on.


Thanks,

Jordan.

Solution

I've actually found the following forge component 'Charts_HowTo' which runs through basic and advanced scenarios for using high charts in OS. It's developed for v.9 of OS, but the information is still relevant to OS v.10 and runs without issues.

This is pretty much what I was looking for overall, but thank you for your help! I'll send across any other questions that this tutorial/forums can't answer, otherwise.

Edit: marked this as a solution on the off-chance that someone else finds themselves in my position.

Solution

Nice - I wasn't aware of that component, just the Charts documentation.

I don't have access to an OS 10 environment anymore since the personal environment are upgraded automatically and there's no way to downgrade - I'd recommend that you keep your own personal environment active just in case for these situations, that way you can open code from anyone.