Color Scheme on multiBarHorizontal chart with one series

#1

Hi All,

I have a multiBarHorizontal chart with a single ng-repeat in the dbr (i.e. one series). I want to use a color scheme but the chart is taking on the first color in the array, I’m guessing this is because there is just one series?

Here is the array:

["red", "skyblue", "red", "red", "red", "skyblue", "yellow", "yellow", "yellow", "skyblue"]

And here is what the chart is rendering:
image

The array works fine on a discreteBar but we want to present it horizontally. Any suggestions on how I can overcome this issue?

Thanks,
David

#2

And on a similar but separate issue, how can I get a chart to use a single colour in an ng-repeat?

E.g. we have mini charts on an ng-repeat, and in the list is an attribute holding the colour. However, when we put the following (or any combination thereof) the color scheme is not picked up:

tm1-color-scheme="['{{kpi.Colour}}']"

where {{kpi.Colour}} may equal ‘red’ or ‘green’

Thanks,
David

#3

Hi @anz.fin.all.mailbox,

Regarding the tm1-color-scheme, in a way that is because it expecting an array object, and not a String.

One of the things that you can try to do though is to re-initialize the directive and pass it with the correct color array on initialization. Below is an example.

The parameter you pass into that will now look like:

tm1-color-scheme="selectedColorArray"

Where the selectedColorArray is:

$scope.selectedColorArray = [];
$scope.selectedColorArray.push($scope.kpi.Colour);

And that property is not being watched by the directive. So one way you can go about it is via ng-if and some function that will set the value on/off when updated:

tm1-color-scheme="selectedColorArray" ng-if="showChart"

Where on the controller side, you have a function that you will call, whenever you wanted to change the color:

$scope.onColorUpdate = function(){
    $scope.showChart = false; // this is to remove the directive from DOM
    $scope.selectedColorArray.length = 0;
    $scope.selectedColorArray.push($scope.kpi.Colour);

    $timeout(function(){
        $scope.showChart = true; // this is to re-insert it back, with the new value of our color array
    }, 500);
};

There should be a number of ways to go about it with the above as just to give an idea.

–
Paul

#4

Yes you are right on that!

And for further reference regarding the discreteBar or the multiBar, the library’s site should be able to give more information on that:

http://krispo.github.io/angular-nvd3/

The tm1-ui-chart has the tm1-options-override attribute which should help to further customize the graph should you find the correct configuration to pass to it.

–
Paul

#5

Hi @plim,

FYI - I was able to solve the multiBarHorizontal issue using the barColor override:

$scope.optionsOverrideHorizontalBar = {
    chart:{
        barColor:function (d, i) {
                var colors = $scope.chartColors;  
                return colors[i]; 
        }
    }
};

Cheers,
David

#6

Hi @anz.fin.all.mailbox,

Awesome! Great find! Thanks for sharing that!

–
Paul

#7

Hi @plim,

Regarding the tm1-color-scheme for a list attribute, I couldn’t get your code to work as posted, it kept returning a TypeError: Cannot read property 'Colour' of undefined error, but I can get the value in the variable to pass to the function using an ng-init:

ng-init="onColorUpdate(kpi.Colour)"

js

$scope.onColorUpdate = function(data){
    $scope.selectedColorArray.length = 0;
    $scope.selectedColorArray.push(data);
};

However, it is then using just the last value it finds in the ng-repeat="kpi in lists.kpi" as there is just one variable name the colour is being pushed into, $scope.selectedColorArray, therefore it just overwrites with each new value.

There are five items in the ng-repeat and I need some way to turn each kpi.Colour into its own unique array.

Thanks,
David

#8

Hi @anz.fin.all.mailbox,

It might be because you have not initialized the variables that you wanted to use first. Note that controllers run first before the HTML page.

So if you have something like this:

$scope.values.colour = 'Blue';

It will just throw out an error, unless you initialize it first like so:

$scope.values = {};
$scope.values.colour = 'Blue';

The onColorUpdate() should be called when you want to change the color and not on the ng-init as that will just run once. Having something like ng-click for example, should help trigger the color change.

–
Paul