Highcharts, stacked column range with date in y-axis

735 Views Asked by At

The highcharts is rendering the chart when the series data is hardcoded and when the data is passed through a variable from backend, it doesn't generate a chart.

series: [{
                name: 'T1',
                stack: 'Tasks',
                color: 'blue',
                data: [ { x: 0,
                       low: Date.UTC(2015, 2, 13, 11, 42, 02),
                       high: Date.UTC(2015, 2, 13, 14, 15, 53)},
                     { x: 1,
                       low: Date.UTC(2015, 2, 13, 11, 42, 02),
                       high: Date.UTC(2015, 2, 13, 11, 42, 02)},
                     { x: 2,
                       low: Date.UTC(2015, 2, 13, 11, 42, 02),
                       high: Date.UTC(2015, 2, 13, 15, 54, 23)},
                     { x: 3,
                       low: Date.UTC(2015, 2, 13, 11, 42, 02),
                       high: Date.UTC(2015, 2, 13, 14, 17, 08)},
                     { x: 4,
                       low: Date.UTC(2015, 2, 13, 11, 42, 02),
                       high: Date.UTC(2015, 2, 13, 17, 23, 13)} ]
            }, {
                name: 'T2',
                stack: 'Tasks',
                color: 'green',
                data: [ { x: 0,
                   low: Date.UTC(2015, 2, 13, 14, 15, 53),
                   high: Date.UTC(2015, 2, 13, 14, 17, 08)},
                 { x: 1,
                   low: Date.UTC(2015, 2, 13, 11, 42, 02),
                   high: Date.UTC(2015, 2, 13, 13, 23, 02)},
                 { x: 3,
                   low: Date.UTC(2015, 2, 13, 14, 17, 08),
                   high: Date.UTC(2015, 2, 13, 14, 24, 55)} ]
            }, {
                name: 'T3',
                stack: 'Tasks',
                color: 'red',
                data: []
            }]

When the value is coming from backend, the code is

series: [{
                name: 'T1',
                stack: 'Tasks',
                color: 'blue',
                data: (function(){
                    var data = [];
                    var temp = {};
                    for(i in msg.T1){
                        temp.x = msg.T1[i].x;
                        // temp.low = new Date(msg.T1[i].low) or Date.UTC(new Date(msg.T1[i].low);
                        // temp.high = new Date(msg.T1[i].high);
                        temp.low = parseInt(i);
                        temp.high = parseInt(i)+2;
                        data.push(temp);
                    }
                    return data;
                }())
            }, {
                name: 'T2',
                stack: 'Tasks',
                color: 'green',
                data: (function(){
                    var data = [];
                    var temp = {};
                    for(i in msg.T2){
                        temp.x = msg.T2[i].x;
                        // temp.low = new Date(msg.T2[i].low);
                        // temp.high = new Date(msg.T2[i].high);
                          temp.low = parseInt(i);
                        temp.high = parseInt(i)+2;
                        data.push(temp);
                    }
                    return data;
                }())
            }, {
                name: 'T3',
                stack: 'Tasks',
                color: 'red',
                data: (function(){
                    var data = [];
                    var temp = {};
                    for(i in msg.T3){
                        temp.x = msg.T3[i].x;
                        // temp.low = new Date(msg.T3[i].low);
                        // temp.high = new Date(msg.T3[i].high);
                          temp.low = parseInt(i);
                        temp.high = parseInt(i)+2;
                        data.push(temp);
                    }
                    return data;
                }())
            }]
        });

The second code, despite throwing no error, does not render the chart. What is wrong in the data format

1

There are 1 best solutions below

0
On

The problem is fixed, issue was that the value of x in temp.x, the data object passed to series, should be integer only, no Strings or any other data types are allowed. Fixing that fixed the chart