- OutSystems.com
-
My Platform
- Community
Log in
Sign Up
谈吐大方的太阳 · Digital ...· 1 月前 · |
急躁的番茄 · 伊斯兰革命:伊朗实现政教合一· 2 月前 · |
腼腆的土豆 · 质量堪忧的微短剧如何承载文化产品价值· 6 月前 · |
威武的日记本 · oauth2-proxyでGoogle ...· 6 月前 · |
侠义非凡的板栗 · DbDataReader 类 ...· 7 月前 · |
I have a question.
I use 3 data series in a graph.
Dataserie 1 have an Y axis range of 0 to 4000.
Dataserie 2 have an Y axis range of 0 to 250
Dataserie 3 have an Y axis range of 0 to 100.
Is it possible to make different Y axis for multiple data series?
For my 3 data series the values and ranges differ too much. It is because I use just 1 Y-axis.
I looked at the demo panel of the OutSystems charts Forge component, but there is just 1 data serie.
Thanks for your help.
Hi DDK,
Yes, you can have two or even more axes. You'll need to add some Highcharts JSON to the AdvancedFormat to make that possible. See here for a Highcharts example.
Hi Kilian,
Through HighChart we can do this, but does outsystems automatically understand it when I set the datasource? or I need to manually add HighChartJson and provide the dataseries as a string list like this?
"
chart: {
zoomType: 'xy'
},
title: {
text: 'Average Monthly Weather Data for Tokyo',
align: 'left'
},
subtitle: {
text: 'Source: WorldClimate.com',
align: 'left'
},
xAxis: [{
categories: [" + GetSheet1s.List[1].Sheet1.Month +"],
crosshair: true
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[2]
}
},
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[2]
}
},
opposite: true
}, { // Secondary yAxis
gridLineWidth: 0,
title: {
text: 'Rainfall',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} mm',
style: {
color: Highcharts.getOptions().colors[0]
}
}
}, { // Tertiary yAxis
gridLineWidth: 0,
title: {
text: 'Sea-Level Pressure',
style: {
color: Highcharts.getOptions().colors[1]
}
},
labels: {
format: '{value} mb',
style: {
color: Highcharts.getOptions().colors[1]
}
},
opposite: true
}],
plotOptions: {
series: {
stacking: 'normal'
}
},
tooltip: {
shared: true
},
series: [{
name: 'Rainfall',
type: 'column',
yAxis: 1,
data: [" + GetSheet1s.List.Current.Sheet1.Outflow +"],
tooltip: {
valueSuffix: ' mm'
}
}
thanks,
Shreyash
Hi Shreyash,
I would only add the actual values as a very last resort. I should think that adding the JSON for the axes only should suffice.
Thanks Kilian! My issue is I have to manually build the highChart Json object because my API response looks like this:
{
"Month": "Jan",
"RainFall": "144.0",
"Temperature": "17.6",
"SeaLevel": "1015.9"
},
So now I have to create a comma separated list of RainFall, Temperature and SeaLevel for the series which is a overhead. My expectation was it will smartly create chart for me when I set my API response object to the DataPointSourceList.
Do you have a sample which can showcase the chart like this https://www.highcharts.com/demo/combo-multi-axes from my API response without taking an overhead?
Hi Shreyash,
The DataPoint structure is a datapoint for a single series. Since you receive three different series in a single structure, you need to split them. I'm not sure what you mean by "comma seperated list", you can either loop over your API response, or try to use a ListAppendAll and map the right fields. I'm assuming that the Month should go in the Label (either convert it to a date/time or keep it as text), and the value for RainFall, Temperature and SeaLevel goes into the Value. DataSeriesName then becomes "RainFall", "Temperature" or "SeaLevel", depending on the series.
I do have an example of multiple axes, I'll see if I can create something, also based on your API structure.
Hi Shreyash,
Here's an example. You can check it here .
It seems the upload is stuck, let me try again...