17
Views
2
Comments
Charts API line graph customization
Question

Hello,

I am writing a traditional web app using a Windows 10 machine and OutSystems 11.

I have created an overlay of two line graphs using the Charts API line graph. The data shows responses from 2 surveys (pre & post). I have two questions about how to modify this chart, and a third question about how to add a separate feature to a third chart.

1. How can I remove the tick marks from the x-axis? I assume I would specify something like 'XTicks = "None" or XTicks = [] in the XAxisFormat property, but I haven't been able to find anything in the documentation regarding how to do this.

2. The survey responses are always stored as integer values (0-5). However survey takers can also select 'N/A' instead of an integer value 0-5. In this case, N/A is stored as -1 in the database. The person that requested this app would like N/A values displayed as a 0, with a 'X' marker over it. The color of the 'X' should either be black, or the same color as the line. Right now, I am not assigning the line color. It is being done automatically. Does anyone have any insight as to how I might achieve this?

3. In a separate graph, I need to display summary data, which will be the average(mean) value of the all people's response the surveys. In addition, I would like to put standard deviation bars on the points. Does anyone know how to do that?

Below are a couple screenshots - One of my current graph, and one of the chart object. I have added X markers and standard deviation bars to show examples of what I want. Thanks for any help!


Rank: #18473

If anyone has any input, I'm still working on this. I've done a lot of charting in other languages, like Python, but haven't done much in OutSystems.

Thanks!

Rank: #738

Hi Ryan,

OutsystemsCharts run on Highcharts Library in the background, which is highly customizable.

Please have a look at Highcharts API documentation here https://api.highcharts.com/highcharts/

Please find the relevant config and place it in the HighchartsJSON property as shown below:

Note: You can write Javasript syntax also in HighchartsJSON property mixed with JSON.

Hope this helps!


Regards,

Karthik