Multi Bar chart color scheme issue for dynamic number of series

Canvas Canvas Questions
, ,
1

Hello Team,
I am working with tm1-ui-chart UI component, retrieving the data from a service call (that service will retrieve the data by triggering MDX query). The chart data and color to be displayed is retrieved dynamically from the cube.

We are getting multi series data from cube. the number of series is dynamic.

The issue here is the color scheme display, I am setting the color scheme attribute as expected, but it is not taking from the tm1-color-scheme attribute first time, from the second time when the chart redrawn at any event then it is getting updated with the color scheme which we are setting.

The first time it is taking some default color scheme, from second time it is taking colors from tm1-color-scheme attribute.

I have also replicate the scenario in canvas sample: please find attachments below:

First time chart displyed with default colors:

image.png919×645 9.87 KB

Second time display of chart after a refresh event, in this scenario colors are coming as expected :

image.png919×666 10.7 KB

JS Code, which has chart data and color scheme

image.png1920×1080 388 KB

HTML Code:

image.png1920×1080 447 KB

Can you please help me if there is any fix for this.
Let me know if you need nay more details on this

Thanks in advance,
Sridhar V

2

Hi @vsridhar,

Try to ensure that the chart only initializes when the colors are available.

You can do that via ng-if. For example, in your tm1-ui-chart, try to add the following attribute:

ng-if="colorScheme.length > 0"

Let us know how it goes.

–
Paul

3

Hi @plim, I have tried this work around, but the result is the first time - the chart is drawing with the colors from cube and later it is immediately overriden by random color.

I have tried attaching video recording but unable to attache due to size constraint… the behavior is from the browser refresh - the chart will be drawn with

Later random colors chart will be redrawn like below:

image.png879×403 11.5 KB

If I again do any other even on the page which will trigger chart refresh, then it is able to catch the colors as expected like the one which is shown in first screenshot.

4

Hi @vsridhar,

What do you mean when you say “later”? What action is triggering the reset of colors?

–
Paul

5

Hi @plim , later means with out any external event trigger its happening automatically, I have emailed the video recording for that.

please check the ‘2017-08-31 11.12_MultiChart_Issue.zip’ file attached sent to your email id.

Thanks,
Sridhar V

6

Hi @vsridhar,

How about using a $timeout service, and only render the chart if all the data and color schemes are ready?

I would still think that the color schemes came in late due to the part that it was able to render the chart properly once you have triggered a data refresh (not the browser refresh).

So can you try it out with $timeout? The idea will be to only create the chart via ng-if once the data and color schemes are ready. For example:

$scope.chartIsReady = false;

// retrieve data and color schemes here
$tm1Ui.cellGet(...).then(function(cellData){
    // process data here    

    // finally, render the chart
   $timeout(function(){
        $scope.chartIsReady = true;
    }, 50);
});

And in the html, the chart will have an attribute like:

<tm1-ui-chart ... ng-if="chartIsReady">
</tm1-ui-chart>

Let us know how it goes.

–
Paul