Managing colors in FacetCharts

[Abdulaziz A.]

Hi Team,

I have 2 facet charts with the below Data sets

Data Set 1
------------
ABC 10
XYZ 20
EFG 30
BER 55


Data Set 2
------------
ABC 50
EFG 40


Now, my requirement is to have colors to be consistent i.e., if ABC is red in first chart then it has to be red in second too.

I had a look at the documentation but couldnt get through it. The only property that I see is dataColors which takes an input as an array of colors.
Even If I to go with this approach by giving the dataColors as an array, there are some rows in the 2nd chart, so EFG is taking the color of XYZ which shouldnt happen.

Is there a possibility to specify color based on a column
or is there any possibility to bind 2 charts to show same colors.

Please let me know any point that could be helpful.

We are working on below environment:

Version: Isomorphic SmartClient/SmartGWT Framework (SmartClient_v90p_2014-03-07_PowerEdition)

Browser: IE9


Thanks in Advance.

[Abdulaziz A.]

Any update on this. Waiting for your reply.

[Isomorphic]

Hi
Sorry for the delay on this. Yes this is possible by overriding facetChart.getDataColor().
Here's some test code demonstrating this approach.

Thanks
Isomorphic Software

isc.ClassFactory.defineClass("ConsistentColorsFacetChart", "FacetChart");
isc.ConsistentColorsFacetChart.addProperties({
    dataColorsMap: {
        ABC: "#df5545",
        XYZ: "#7ae02d",
        EFG: "#4d89f9",
        BER: "#2de0e0"
    },
    initWidget : function () {
        this.facets = [{ id: "columnLabel" }];
        this.Super("initWidget", arguments);
    },
    valueProperty: "value",
    getDataColor : function (index) {
        var facet = this.getFacet("columnLabel"),
            facetValue = facet.values[index];
        return this.dataColorsMap[facetValue.id];
    }
});

isc.ConsistentColorsFacetChart.create({
    autoDraw: false,
    ID: "chart1",
    showTitle: false,
    chartType: "Column",
    data: [
        { columnLabel: "ABC", value: 10 },
        { columnLabel: "XYZ", value: 20 },
        { columnLabel: "EFG", value: 30 },
        { columnLabel: "BER", value: 55 }]
});

isc.ConsistentColorsFacetChart.create({
    autoDraw: false,
    ID: "chart2",
    showTitle: false,
    chartType: "Column",
    data: [
        { columnLabel: "ABC", value: 50 },
        { columnLabel: "EFG", value: 40 }]
});

isc.HLayout.create({
    ID: "layout",
    width: 600,
    height: 300,
    membersMargin: 10,
    members: [chart1, chart2]
});

[Abdulaziz A.]

In the ConsistentColorFacetChart you have hardcoded all the values that are possible in the datasets but actual scenario consists of dynamic values in both the datasets and I cant assure that they will be same.

Like

DataSet 1
----------
ABC 10
XYZ 20


DataSet 2
----------
EFG 5

The number of rows is not constant and the data is dynamic which comes from the Database, So we cant hardcode them because we dont know what data is going to come...
We cant hardcode the data as you have specified in the suggested solution as

    dataColorsMap: {
        ABC: "#df5545",
        XYZ: "#7ae02d",
        EFG: "#4d89f9",
        BER: "#2de0e0"
    },

Please suggest what else we could do in this regard.

Thanks in advance.

[Isomorphic]

The most important part of this sample code is the fact that "getDataColor()" is overridden to provide custom colors. You can basically use any logic you like within that method to choose what colors to display.
Your exact implementation is really up to you.

Here's an example which builds a map of value --> color mappings dynamically as it sees new values. This version is for demo only - it is seeded with an array of hardcoded colors to use, but you could also use math to create the unique hex-string for colors, either randomly, or based off the value string each time a new color is needed.
In short there are many ways you could actually implement this in your app, and you'll have to consider your exact requirements to decide the best way to do this for your application.

Regards
Isomorphic Software

isc.ClassFactory.defineClass("ConsistentColorsFacetChart", "FacetChart");
isc.ConsistentColorsFacetChart.addClassProperties({
  dataColors: [
        "#df5545",
        "#7ae02d",
        "#4d89f9",
        "#2de0e0" // could have many more entries 
    ],
    getNewColor : function () {
          // Pull from a hardcoded array of colors
         // (Could use any mechanism for this, such as a numeric function to build a hex string, etc)
         return this.dataColors.pop();
    },
    dataColorsMap:{},
    getDataColor : function (value) {
        var map = this.dataColorsMap;
        if (map[value] == null) map[value] = this.getNewColor();
        return map[value]
    }

});
isc.ConsistentColorsFacetChart.addProperties({
    initWidget : function () {
        this.facets = [{ id: "columnLabel" }];
        this.Super("initWidget", arguments);
    },
    valueProperty: "value",
    getDataColor : function (index) {
        var facet = this.getFacet("columnLabel"),
            facetValue = facet.values[index];
        return isc.ConsistentColorsFacetChart.getDataColor(facetValue.id);
    }
});

isc.ConsistentColorsFacetChart.create({
    autoDraw: false,
    ID: "chart1",
    showTitle: false,
    chartType: "Column",
    data: [
        { columnLabel: "ABC", value: 10 },
        { columnLabel: "XYZ", value: 20 },
        { columnLabel: "EFG", value: 30 },
        { columnLabel: "BER", value: 55 }]
});

isc.ConsistentColorsFacetChart.create({
    autoDraw: false,
    ID: "chart2",
    showTitle: false,
    chartType: "Column",
    data: [
        { columnLabel: "ABC", value: 50 },
        { columnLabel: "EFG", value: 40 }]
});

isc.HLayout.create({
    ID: "layout",
    width: 600,
    height: 300,
    membersMargin: 10,
    members: [chart1, chart2]
});

[Abdulaziz A.]

Thanks and its good to know that there is addClassProperties which act like Java static variables for a specified class.