Multiple datapoints on yaxis chart

Hi,

I'm trying to build a chart similar to this https://www.highcharts.com/demo/combo-multi-axes. I know you can do that in the highchart by providing multiple series data list. In outsystems is their a way I can get the result by just setting the SourecDataPointList without manually passing the values in the HighChartsJson?

Currently I'm doing this, which I do not like because I have to create comma separated string out of my list and set the values, cjheck Months, RainFalls and SeaLevels strings. Is their a better way to do this?

"
    chart: {
        zoomType: 'xy'
    },
    title: {
        text: 'Average Monthly Weather Data for Tokyo',
        align: 'left'
    },
    subtitle: {
        text: 'Source: WorldClimate.com',
        align: 'left'
    },
    xAxis: [{
        categories: [" + Months +"],
        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: [" + RainFalls +"],
        
        tooltip: {
            valueSuffix: ' mm'
        }

    }, {
        name: 'Sea-Level Pressure',
        type: 'spline',
        yAxis: 2,
        data: [" + SeaLevels +"],
        marker: {
            enabled: false
        },
        dashStyle: 'shortdot',
        tooltip: {
            valueSuffix: ' mb'
        }

    }]

"

  

Hi,

Check the attached OML.

Regards.

Thanks Prasad! My issue is I have to manually build the highChart Json object. 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 which is a overhead. My expectation was it will smartly create chart for me. 

Hi,

Did you check my code? I created a series structure which has an attribute called data (screenshot below) which is currently list of decimal, you first need to change it to list of text then in preparation after you call the API initialize you can assign the series data (check the new attached oml). I think this is best approach.

Regards.

Hi,

yes I checked it and my doubt was about that only, I have to create a separate list out and then assign it to the series. You have JSONtext in the code:

"[{
    'name': 'Rainfall',
    'type': 'column',
    'yAxis': 1,
    'data': [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
    'tooltip': {
      'valueSuffix': ' mm'
    }

  }, {
    'name': 'Sea-Level Pressure',
    'type': 'spline',
    'yAxis': 2,
    'data': [1016, 1016, 1015.9, 1015.5, 1012.3, 1009.5, 1009.6, 1010.2, 1013.1, 1016.9, 1018.2, 1016.7],
    'marker': {
      'enabled': false
    },
    'dashStyle': 'shortdot',
    'tooltip': {
      'valueSuffix': ' mb'
    }

  }, {
    'name': 'Temperature',
    'type': 'spline',
    'data': [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
    'tooltip': {
      'valueSuffix': ' °C'
    }
  }]"

You can keep this code in the HighChartJsonProperty and assign the data property with each specific list and get the result.But my JSON object looks like this:

"myResponse": {

   "Month": "Jan",

   "RainFall": "144.0",

   "Temperature": "17.6",

   "SeaLevel": "1015.9"

},

So now I have to do this in the highChartJson 

"Series":{

"data": string.Join(myResponse.map(x=> x.RainFall), ",") 

}

to make it working, that is an overhead.

My expectation is, it should be smart enough to understand when I do

DataPointList = myResponse

Is their a way to achieve it?

thanks,

Shreyash

Hi,

Sorry for confusion in my past post. Just check my new version in my previous post, I haven't used string join rather I am assigning the response to local variable series.current.data, serialize the series and pass it into chart.

And below is json I have in "HardCodedSeriedConfig", as you can see do not have data part in config.

"[{
    'name': 'Rainfall',
    'type': 'column',
    'yAxis': 1,
    'tooltip': {
      'valueSuffix': ' mm'
    }

  }, {
    'name': 'Sea-Level Pressure',
    'type': 'spline',
    'yAxis': 2,
    'marker': {
      'enabled': false
    },
    'dashStyle': 'shortdot',
    'tooltip': {
      'valueSuffix': ' mb'
    }

  }, {
    'name': 'Temperature',
    'type': 'spline',
    'tooltip': {
      'valueSuffix': ' °C'
    }
  }]"


Regards.