Dear OutSystems developers,
We are excited to announce the launch of the latest version of the OutSystems Charts component! This new version comes with an improved developer experience that will make creating charts easier and more flexible.
One of the major changes in this new version is the introduction of add-ons, which are blocks that represent chart elements. These add-ons bring new features and can be easily added to chart placeholders, providing greater customization options for your charts. With add-ons, you can easily add new chart elements such as data points, labels, and legends, or customize existing ones to suit your needs.
This new major includes exciting new features like a brand new chart type, the Radar, and the possibility of having chart combinations (a chart with a line and column).
But that’s not all! we are also launching documentation with a set of ready-to-use charts. It contains examples of the most common use cases as well as advanced scenarios, to help you get started even faster. These chart examples can be easily downloaded and customized to fit your specific needs and requirements, giving you a head start in creating powerful and beautiful visualizations.
We are confident that this new version of the OutSystems Charts component combined with the documentation will help you create better, more powerful charts in less time. To try it out, simply download the latest version of the Charts component from the Forge and check the documentation.
We welcome any feedback or questions you may have about the new version of the Charts component, and we hope you enjoy using it as much as we do!
Best regards,Jéssica M.
Thank you for sharing this!!!
That's great news! Thanks!
Good news, Thanks!
That's great news
Thank you for sharing
Thanks!!
That's a good improvement!
Will it be possible to make a (Solid) Gauge chart with this new update?
Hi @Melvin September! The Solid Gauge requires a specific highcharts script that we are not offering currently, and for that reason is not possible. We are exploring solutions to add highcharts scripts the same way you can add add-ons that will allow you to make a gauge chart through extensibility, but we don't have a timeline for that improvement yet.
Awesome! Please keep delivering more chart types in the future.
I am in the middle of a complicated charting idea. Very interested to take a look at the new release.
The line+column option is in the styling add-on?
Is there any more detail of how to use the radar/polar chart. Not obvious to me from the image. I see it needs
I will install later today, I assume it contains enough examples to help understand it.
Hi @Greg Adams!Yes, to combine different chart types you will need to use the SeriesStyling addon, you can combine any of the available chart types. You can check this sample to see how to do it.Regarding the Radar Chart, in terms of how to configure it, it's pretty similar to the rest of the charts, just by inputting the data you will have a radar chart with each series being represented as a line. The valuesType property is not mandatory and it's only needed when you want to change the type of data, for example, if instead of categories you want dates on the axis. You can find more details on our sample, you can even download the examples to see how they are implemented. If you need a Radar with polygonal axis you can also check this sample that explains how to achieve that use case. Try it out and let us know if the documentation was useful :)
My confusion on radar charts was that I didn't grasp what I was seeing.
To check...
The words that are displayed around the graph are the labels that would usually be displayed on the horizontal axis of a line chart?
So it is like a line graph that has been rolled into a circle?
Yes, the labels around the circle are the ones that are usually on the X Axis, the labels inside the circle represent the values on the Y Axis and each line (the colored ones) represents a Series.
I installed the new version.
Do I have to do something inside the module to change from using the old one? Set up a new dependency?
The older version seems to have a bug (or I am not using it right) in that a change of color in a line chart only seems to affect the individual points. They are the correct color but the lines connecting them are always blue and the legends under the charts are also shades of blue.
Is this a known issue/ am I doing something wrong / is it the same in the new version?
you are probably giving the individual datapoints a color. That is possible (and has its use for making a single datapoint stand out compared to the others in it's series)
But what you probably want is to have a given series in a desired color, you do that by specifying at the series level. That is true in both old and new version of the charts.
old version is in the advanced format
new version is in addon block
Dorine
Thanks again, Dorine, very helpful.
At the design stage I don't know what the series will be called (1 of 5 possible static names to be selected by user). The color is currently 1 of 7 possible predetermined values but later may be user choice too.
I presume is is possible to put a variable in the relevant boxes instead of the text literals.
In the older version the text variable would have to been generated in the form
"Color: 'red' "
and for the newer version just
"red"
Does that sound right?
yes all correct,
that means that in the old version, you'll have to do something like (bold,red,underline for emphasis on the single quotes, what is easily forgotten :
"Color : '" + DesiredColorVariable + "'"
Yesterday I switch the app over to using the V3 charts. Immediate impression was that the default colors for different series are much easier to distinguish one from another than the v1 which used various shades of blue.Also, very nice to be able to change the type of chart in the properties panel. (Not sure if that was possible on v1)
One odd effect is that when I added a V3 chart next to the original, the original stopped rendering in the browser but still took up space. This wasn't a problem as I was going to delete the v1 charts anyway
Something that confused me is that the new charts have a box where the add-ons are listed. I incorrectly inferred that I was supposed to drag & drop my preferred add-on into this area.
It took a while to see that the properties box already had the add-on boxes.
Copying across the settings from the v1 widgets was easy, although the order of the label and value boxes seems to have switched in v3
Some minor hitches. Having installed V3 via the website I assumed that the widgets would show up in the tool box automatically, but that isn't how things work. I had to 'search other modules.' In the dialog window the old version is marked v1, but the newer version isn't marked with a version.
Having swapped the charts everything worked without any need to change anything.
Also, the use of the very different series colors has removed the need that I was putting off of changing the colors of the series in v1.
(On the link to the samples file, I had no idea what an OPA file was or how to use it. Okay for people who already now, but a mystery to the rest of us. Any chance that a short explanation next to the link could be useful?)
Thank you for the feedback @Greg Adams!Are you talking about the samples on charts.outsystems.com?If so, when you click on "Open in Service Studio", opens this popup and at the top you have the link to download the sample with all the working examples:
Once you have it installed in your environment, you just need to input your Server URL and the sample will open on the example you are trying to see.
Supa!
It's great to have new features.
Do you use Js for any interection with HighCharts or only basic Is done?
Hi @MarcosElorza,
Could you please explain what you mean by that?The Highcharts library is written in javascript so under the hood we use javascript to communicate with it. But like the previous version, we provide a low code experience (in this latest version much richer than the previous one) that will allow you to achieve several simple and complex use cases without needing to write a single line of javascript code.From what you tested what has given you a different perspective so that we can try to better clarify your question?
Cheers,GM
Great news! The charts actually look more modern by default, that great!
I can't wait to try it.
Congrats team!
Good News!! More chart funcionalities
exciting to work on this new updation
Are there any breaking changes to the last version?
Hello @Henrique Silva
Although this is a major version where that could happen, there is only one that you can see in the release notes which was a block that was removed but was already deprecated for a long time. You can also check some FAQs present on our landing page here.
I presume HighCharts itself was upgraded too, so that might result in some broken JSON here and there?
HighCharts is, in general, very downwards compatible, so I wouldn't expect that.
Can we please have other chart types added soon? It would be nice to have a bubble chart and being able to combine a bar or column chart with a bullet chart.
Otimas noticias!!!
Thank you!
wow! can't wait to use them.
Thanks!
Thank you for sharing this !
I was forward for this changes, Thanks!
Nice work, I think the effort of bringing all complexities more into a low code / visual / organized approach will really allow developers, who haven't done much yet with charts, to try things they felt weary of before. I like those separate blocks for things like legend and axis etc.
However, some initial findings after a quick test for some other forum post :
Hi @Dorine Boudry! Thank you for the feedback :) To answer your points:
Regarding the structure of the client action, being a list it's the only way we have to allow to reach more than one level of the object. For example:To change the color of the yAxis label you need to use this property, which has 3 levels. So in the client action PropertyPathList you will need the following list:[0] "labels"[1] "style"[2] "color"If you put just "color" we don't know if it's the color of the axis label, or the crosshair that also has a color property, or other...I hope this helps!Best regards,Jéssica
Ah ok,
so not for changing the same property on multiple things.
For levels, I just assumed you could use a dot notation, so "labels.style.color", good to know, and maybe good to add that to the description of that structure.
My forge asset to extend the update with a Gauge Chart has just been approved.https://www.outsystems.com/forge/component-overview/15104/gauge-chart
Still a lot to explore, but here's a trick I'd like to share.
This might not be explicitly mentioned in the documentation (couldn't immediately see it, but haven't read through all of it) :
Sometimes, the series of your chart are dynamic, you don't know up front what they will be or how many you will have. For example, a chart counting tickets per month, split up in a series for every department. You might not want to hardcode the departments.
In that case, it is possible to add a listwidget inside the addons placeholder of the chart, and put the series styling block inside that list.
Just source that listwidget with a list of names and colors, for example to give each series another color.
how cool is that !
Very cool indeed! Thanks for sharing this.
Does it make use of highcharts?
Yes it does, all OutSystems Charts do.