Gantt Chart on Highcharts

Gantt Chart on Highcharts


Hi Guys

Fairly new to highcharts and using json in outsystems. Was wondering if someone could help me get my Gantt chart working - as demonstrated here:

I have a number of statuses, which I would like to use as my Y-axis, and a start and end date for each status which I'm using as my two X-axis values.

I have used the Javascript code as follows:

 chart: {
        type: 'xrange'
    title: {
        text: 'Gantt Chart'
    xAxis: {
        type: ''
    yAxis: {
        title: {
            text: ''
        categories: [],
        reversed: true
    series: [{
        name: 'Project 1',
        // pointPadding: 0,
        // groupPadding: 0,
        borderColor: 'gray',
        pointWidth: 20,
        data: "+Json+",
        dataLabels: {
            enabled: true


- I have set the graph up with column format in Outsystems, and have set my source datapoint as a blank local variable, with list datapoint data type.

- in my preparation used SQL to pull out my data, and have used the "ToObject(JSONDataPoint_List)" action to turn my sql list into an object, which i have then asigned to my local variable "JSON"

- I have used a cast in my SQL to cast my sql to get the Date.UTC format. 

- The JSON output is coming out as follows:

[{"x":"Date.UTC(2018, 1, 26)","x2":"Date.UTC(2018, 1, 26)","y":10},{"x":"Date.UTC(2018, 1, 26)","x2":"Date.UTC(2018, 1, 26)","y":8},{"x":"Date.UTC(2018, 1, 26)","x2":"Date.UTC(2099, 12, 31)","y":8}]

Can anyone help me/ tell me where it's going wrong??

Thanks a lot!


what is the problem exactly, because I kinda miss what is going wrong?

J. wrote:


what is the problem exactly, because I kinda miss what is going wrong?

Haha sorry.

So the Y values are appearing on the Y axis, but the X axis is appearing so no bars are showing.