colorMapping for stacked columnchart

[larsbo]

Is it possible to customize the colors of stacked columns in a columnchart? The colorMapping function only allows to define a color for each label on the hAxis: https://github.com/keen/keen-js/blob/master/docs/dataviz.md#colormappingobject

But how I define the colors used by a stacked chart like in this example of the google charts docs? https://developers.google.com/chart/interactive/docs/gallery/columnchart#StackedColumns

[dustinlarimer]

@larsbo in a stacked chart, each label corresponds to a column (in the DataTable reference) and each interval corresponds to a row. I'm afraid I'm missing something here because it should work exactly as you have described.

[dustinlarimer]

@larsbo would you like to replace the full color palette, without using colorMapping?

[larsbo]

I tried to use colorMapping to define a specific color for each of my grouped data sets.

E.g. taking the chart from the google docs: https://developers.google.com/chart/interactive/docs/gallery/columnchart#StackedColumns I want to set my own colors for Fantasy & Sci Fi, Romance, Mystery/Crime, General, Western, Literature and tried this:

var colors = {
  "Fantasy & Sci Fi": "#1595C0",
  "Romance": "#8844CC",
  "Mystery/Crime": "#96213B",
  "General": "#3366CC",
  "Western": "#BB9900",
  "Literature ": "#BF1313",
};
var chart = new Keen.Dataviz()
  .el(document.getElementById("chart-01"))
  .chartType("columnchart")
  .colorMapping(colors);

But the colors are ignored. When I add the colors with .colors(['#3366CC', '#8844CC', '#EE6699', ...]) the color are used but not in the correct connection to the relevant label of course.

[dustinlarimer]

Looks like the colors object has a trailing , that could be causing an error.. are you seeing any errors in console?

[larsbo]

HI @dustinlarimer Nope, no errors in console. Trailing commas should not be a problem for modern browsers and IE > 8.

[dustinlarimer]

Ok, afraid I'll need some more info to debug further. Would you be up for sharing a jsFiddle? dustin@keen.io

On Sat, Jan 31, 2015 at 8:49 AM, Lars Borchert notifications@github.com wrote:

HI @dustinlarimer

Nope, no errors in console. Trailing commas should not be a problem for modern browsers and IE > 8.

Reply to this email directly or view it on GitHub: https://github.com/keen/keen-js/issues/227#issuecomment-72325444

[pawanrawal]

I am facing the same problem. Was this issue resolved @dustinlarimer?

[larsbo]

@pawanrawal yes, the solution (thanks to @dustinlarimer!) was to move the colorMapping() function into the query callback:

var colors = {"foo":"#FF0000","bar":"#00FF00",[...]};
var client = new Keen({
    [...]
});

Keen.ready(function(){
    var query = new Keen.Query("count", {
        [...]
    });

    var chart = new Keen.Dataviz()
        .el(document.getElementById("chart"))
        .chartType("columnchart")
        [...]
    ;

    var request = client.run(query, function(err, response) {
        chart
            .parseRequest(this)
            .colorMapping(colors)
            .render();
    });
});

[pawanrawal]

Thanks @larsbo that works. Do you know of a way to reorder the labels too?

[larsbo]

sorry, no. I guess it's not possible.