Hi
At the current project we start implementing the new charts widgets, and we found the following issue:
We need to generate a chart with dynamic series with styling, so we created a Serie Structure List for we use "Addons\ChartSeriesStyling" in a listThe problem in doing that, is as soon the chart refreshes the category/label breaks
The problem seems to only happen if we use the List Widget with the "Addons\ChartSeriesStyling" in it.If we don't use it in a List, but rather cover all the possibilities from the beginning, seems to work properly.
I created a quick and dirty OML example to show the problem
Guide
Hello @pmmv999
I managed to create your use case without using any javascript (better low code experience and code supported) using the block properties and the Addons client actions SetHighchartsChartConfigs and SetHighchartsYAxisConfigs.
For the list case, one important detail that has an impact on the lifecycle of all blocks inside blocks (it could impact performance with more redraws, not having all the information at the right moment, etc) is the fact you should put the whole chart block inside an If looking at the DataAction.IsDataFetched to make sure you have all dynamic data available upon build time.
Check the attachment, and hope it helps.
Cheers,GM
Hi Gonçalo!Thanks for looking at it!
In my real project I would always need to extend it with JavaScript functionality, since the graph is way more complex than this example.I was able to achieve what I wanted by moving all the chart configuration to JavaScript, and also using "SetHighchartsSeriesConfigs" Client Action.
I understand the concept of better low code experience for simple graphs as the one in the example, but as soon is start becoming complex I find it way more helpful to keep it alike to HighCharts itself.It becomes easy to read, easy to implement custom functionality and even the possibility to use it outside of the OS platform.
Indeed I needed to add a wrapper, to make sure I had all dynamic data available upon build time, otherwise I would run in other issues.A nice tip!
Greetings,Pedro Vieira
Hi @pmmv999
I completely understand your feedback and use cases, but I just wanted to give you a working version for your issue that was supported and designed with dev experience focused on a low-code platform like ours. Also, notice that using JavaScript will not be as future-proof with the upgrades of Highcharts, and any support case will not be applicable for these unsupported scenarios.
Glad I was able to help, and good luck on your project 🚀
Hi @pmmv999 ,
You are doing some stuff to the chart settings in javascript in the Initialization, I think there is a conflict there, if I take out just this part about the x-axis, the labels don't seem to break anymore.
Dorine
Hi @Dorine Boudry ,
Nicely spotted indeed!Checking now I can even set the lineWidth on the existing "Addons\ChartXAxis", that works just fine.
I see now that I forget to mentioned the customization on the post above (and in my troubleshooting), and to be real it is a important part to be referred.
But still, this seems to be a bug/conflict in the component when extending his functionality, or maybe we are being to greedy to mix both.I tried to remove the "Addons\ChartXAxis" to check if the conflict come from there, since they are touching in the same part, but the problem persists.
But thanks to you, we can now clean a bit up our code and make it work properly.
I think, as soon as you start using Javascript to dig into the charts library directly, instead of through the interfaces offered by OutSystems, you are on your own, and it is up to you to find what works and what doesn't, no guarantees.
So, I wouldn't call it a bug on OutSystems Chart component, but @Gonçalo Martins , maybe it can be looked into, why this happens ?
I tried to remove "Addon\ChartXAxis" and "Addon\ChartYAxis" and set those via JavaScript.
It happens that the problem is back, so I get to the point, that it really doesn't like "Addons\ChartSeriesStyling" to be inside of a List.
In the meantime I will explore other options. But if R&D team can look into the issue, it would help other people in the future when looking at this post.
Aggreged with @Dorine Boudry , as soon as you want to customize thing it depend what and how you are customizing. It happens with all framework. I worked lots for frameworks (like laravel, magento even wordpress) which are great but if you customized them and any thing goes against the framework it creates hell for you.
@pmmv999 , don't agree, it think it really doesn't like extra customizations in Javascript
Hi!
I will just leave an small example of our working solution, if someone else need to extend with JavaScript functionality.