[OutSystems Charts] ShowDataPointValues does not work in LineChart
Forge component by OutSystems R&D
Application Type
Reactive

Hello,

I can not show the datapoint values in a LineChart. Setting the 'ShowDataPointValues' attribute to True does not work and I have tried a lot in the AdvancedFormat which I have found in the HighCharts API with searching for 'datalabels'; https://api.highcharts.com/highcharts/ 

Does anyone else have the same problem or was someone able to solve it?

Regards,

Furkan Çetin

Solution

Hey guys,

We already have a fix for this, hence it works on my environment but not on yours. We still don't have a defined date to release the new version, because we are still testing things. 

This issue was happening because we had set the format property as a mandatory string on the Charts. So the format was always set to ““, therefore the datapoints were not showing.

We have made a workaround for you: 

We've created a block that has the JS fixing this problem. For it to work, you must have the block on your screen and place the Line Chart into the block's placeholder.

I've attached a sample with this working. 


Please let me know if you have any troubles and I'm sorry for the inconvenience.

Thank you,

Gabriel Lundgren

Graphdatapoints.oml

Hi Gabriel,

I got this error when I tried to use the fix webblock;

RangeError: Maximum call stack size exceeded
    at Object.ChartsMobile.renderChart [as oldRender]

Kind regards,

Furkan

Hi Gabriel,

I have placed the OnReady action from the fix webblock to my own webblock where I use the LineGraph and that fixed this problem for me. 

Thank you very much for your help and this solution

Kind regards,

Furkan

Having the same issue raised a case with support earlier this week. 

Support the CaseId is 2436901

Hello guys, 


Can you show us how you are trying to set this attribute?


Thank you, 

Gabriel Lundgren

Hi Gabriel,

I am trying it with the 'ShowDataPointValues' attribute in 'ChartFormat'. I have tried to set this attribute directly to True, but that didn't work either. 'ShowDataPoints' is a Boolean variable.

Regards,

Furkan

Thank you Furkan, can you also show how are you trying to set via advanced format?

Hey guys, 


I've made a sample that sets the dataLabels to true via advancedFormat like this:

AdvancedFormat_Init(DataPointFormats:,DataSeriesFormats:,XAxisJSON:,YAxisJSON:,HighchartsJSON:"
plotOptions: {
    series: {
        dataLabels: {
            enabled: true
        }
    }
}")

I've attached the sample as well.


Let me know if this helps you.

Thank you,

Gabriel Lundgren

Graphdatapoints.oml

Hello Gabriel,

I have published your example .oml on our environment which has the last version of OutSystems Charts  and this is the result;

Kind Regards,

Furkan 

Gabriel what version of Charts component are you using.  We tried your proposed solution with the latest version on a reactive application and still aren't seeing any datapoints labelled.

 

Solution

Hey guys,

We already have a fix for this, hence it works on my environment but not on yours. We still don't have a defined date to release the new version, because we are still testing things. 

This issue was happening because we had set the format property as a mandatory string on the Charts. So the format was always set to ““, therefore the datapoints were not showing.

We have made a workaround for you: 

We've created a block that has the JS fixing this problem. For it to work, you must have the block on your screen and place the Line Chart into the block's placeholder.

I've attached a sample with this working. 


Please let me know if you have any troubles and I'm sorry for the inconvenience.

Thank you,

Gabriel Lundgren

Graphdatapoints.oml

Hi Gabriel,

I got this error when I tried to use the fix webblock;

RangeError: Maximum call stack size exceeded
    at Object.ChartsMobile.renderChart [as oldRender]

Kind regards,

Furkan

Hi Gabriel,

I have placed the OnReady action from the fix webblock to my own webblock where I use the LineGraph and that fixed this problem for me. 

Thank you very much for your help and this solution

Kind regards,

Furkan

Glad to hear!

Does this bug affect everything that you do in advanced formatting.  eg setting the data format of an axis label?

This bug was affecting the plotOption.series.data label property. Have you ran into another bug?

We seem to be having an issue formatting dates on the axis from the default  2021-01-26 to a more familiar 26/01/2021.  I'm building a simple app to verify but wanted to check first

Example attached.  I've looked to format the x axis in advancedformat using

"xAxis: {
  type: 'datetime',
  labels: {
    format: '{value:%e-%b-%Y}'
  } }"

 

GraphdatapointsforSupport.oap

The fix in your example doesn't appear to wok in your example for columnchart

Hey Paul


Check this new OML and see if it works for column charts as well. On the previous example we were only treating line charts. Now I've added a treatment for column charts as well.



In case you have any doubts, feel free to ask.

Graphdatapoints.oml

Thanks for the update, the datapoints are now showing on our Columncharts.  


Any news on when the next release of charts with the fix ?

Hey Paul,


We released a under development version of Charts today. This version contains the fix mentioned above. 


Please let us know if you have any doubts.


Thank you,

Gabriel Lundgren

Have you seen any other issues with the line chart and more than one series? For example, I have a list of three records that are converted to a DataPointList for the linechart. However, the json created to build the chart has incorrect data for the 2nd and 3rd records. 


Attached you will see in the linechart json that each 'series' has incorrect and additional data points returned from this list. However, the same 3 records sent into the bar graph returns the correct json with no wrong series data points. 

Thanks,

Christian


linechartvsbargraphjsonoutputs.txt

Sorry, I apologize for the confusion...but this seems to be resolved with the most recent update in charts. I no longer see this issue with our update. 

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.