Help Needed - Stacked Area Chart

Hi @plim,

Maybe my issue is how I’m turning the cubeExecuteMdx data into an array. I tried following the post https://forum.cubewise.com/t/canvas-and-d3-charts/262/25, specifically, bknott’s post of Feb’17, but I’m clearly struggling.

As it stands, here are the options:

$scope.options = {
        chart: {
            type: 'stackedAreaChart',
            height: 450,
            margin : {
                top: 20,
                right: 20,
                bottom: 30,
                left: 100
            },
            x: function(d,i) { return i },
            useVoronoi: false,
            clipEdge: true,
            duration: 100,
            useInteractiveGuideline: true,
            xAxis: {
                tickFormat: function(d) {
                    console.log(d);
                    var dx = $scope.data[0].values[d] && $scope.data[0].values[d].x;
                    return dx;
                }
            },
            yAxis: {
                tickFormat: function(d){
                    return d3.format(',.0f')(d);
                }
            },
            zoom: {
                enabled: true,
                scaleExtent: [1, 10],
                useFixedDomain: false,
                useNiceScale: false,
                horizontalOff: false,
                verticalOff: true,
                unzoomEventType: 'dblclick.zoom'
            }
        }
    };

Here is the data:

$scope.data = [
        {
            "key" : "Valid Times" ,
            "values" : [ ]
        },
        {
            "key" : "No Times/MDT Issue" ,
            "values" : [ ]
        },
        {
            "key" : "Vehicle Breakdown" ,
            "values" : [ ]
        },
        {
            "key" : "Header Time Issue" ,
            "values" : [ ]
        },
        {
            "key" : "WDI Time Issue" ,
            "values" : [ ]
        },
        {
            "key" : "Job Time Issue" ,
            "values" : [ ]
        }
    ].map(function(series) {
        series.values = series.values.map(function(d) { return {x: d[0], y: d[1] } });
        return series;
    });

And here is the cubeExecuteMdx:

$scope.buildMDX = function() {
        var mdx1 = 'select {[T Date].[WAS Reporting 12 Months Collapsed]} on 0, ';
        mdx1 = mdx1 + '{[WAS Route Performance M].[RP Validations]} on 1';
        mdx1 = mdx1 + 'from [WAS Route Performance] where ([WAS Version].[ACT],[FIN Cost Center].[Total FIN Cost Center],[WAS Plant].[Total WAS Plant],[WAS Route].[Total WAS Route], [WAS Service Area].[FL],[WAS Driver Type].[Internal Driver Type],[WAS Futile Code].[NA WAS Futile Code],[Time Analysis].[BASE],[Scale].[BASE])';
        $log.info('MDX statement: '+mdx1);
    
        $tm1Ui.cubeExecuteMdx('veolia', mdx1).then(function(data){

            var nRows = data.Axes[1].Cardinality;
            var nColumns = data.Axes[0].Cardinality;

            //define the data array to populate
            $scope.data
            // $log.log('rows: ' + nRows + ' Columns: ' + nColumns);
            $scope.retData = data;
            // $log.log($scope.retData);

            for (i = 0; i < nColumns; i++) {
                    //set the x axis
                    // console.log(i)
                    $scope.data[0].values[i] = new Object;
                    $scope.data[1].values[i] = new Object;
                    $scope.data[2].values[i] = new Object;
                    $scope.data[3].values[i] = new Object;
                    $scope.data[4].values[i] = new Object;
                    $scope.data[5].values[i] = new Object;
                    $scope.data[0].values[i].x = $scope.retData.Axes[0].Tuples[i].Members[0].Attributes.Caption;
                    $scope.data[1].values[i].x = $scope.retData.Axes[0].Tuples[i].Members[0].Attributes.Caption;
                    $scope.data[2].values[i].x = $scope.retData.Axes[0].Tuples[i].Members[0].Attributes.Caption;
                    $scope.data[3].values[i].x = $scope.retData.Axes[0].Tuples[i].Members[0].Attributes.Caption;
                    $scope.data[4].values[i].x = $scope.retData.Axes[0].Tuples[i].Members[0].Attributes.Caption;
                    $scope.data[5].values[i].x = $scope.retData.Axes[0].Tuples[i].Members[0].Attributes.Caption;
                    //console.log($scope.data[0].values[i].x);

                    // set the values
                    $scope.data[0].values[i].y = $scope.retData.Cells[i].Value==null?0:$scope.retData.Cells[i].Value;
                    $scope.data[1].values[i].y = $scope.retData.Cells[i+nColumns].Value==null?'0':$scope.retData.Cells[i+nColumns].Value;
                    $scope.data[2].values[i].y = $scope.retData.Cells[i+nColumns+nColumns].Value==null?'0':$scope.retData.Cells[i+nColumns+nColumns].Value;
                    $scope.data[3].values[i].y = $scope.retData.Cells[i+nColumns+nColumns+nColumns].Value==null?'0':$scope.retData.Cells[i+nColumns+nColumns+nColumns].Value;
                    $scope.data[4].values[i].y = $scope.retData.Cells[i+nColumns+nColumns+nColumns+nColumns].Value==null?'0':$scope.retData.Cells[i+nColumns+nColumns+nColumns+nColumns].Value;
                    $scope.data[5].values[i].y = $scope.retData.Cells[i+nColumns+nColumns+nColumns+nColumns].Value==null?'0':$scope.retData.Cells[i+nColumns+nColumns+nColumns+nColumns].Value;
                  
            };

        })
    };

    $scope.buildMDX(true);

I’m getting data arrays per the previous post but I don’t know how to translate it correctly in the chart options, both for the data and the x axis labels. Is there an easier way to extract cube data and turn it into an array that an nvD3 chart would accept?

I’m getting to the point where I may have to give it up which would be disappointing. It’s a shame the tm1-ui-chart directive doesn’t include more chart types, it really hampers easy visualisations.

Thanks,
David