[How to use OutSystems Charts Web] Y axis for multiple data series

Forge Component
(12)
Published on 15 Jul by Cristiana Umbelino
12 votes
Published on 15 Jul by Cristiana Umbelino

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.

Processing Upload...

Hi Shreyash,

Here's an example. You can check it here.

It seems the upload is stuck, let me try again...