Change the heatmap colors

[dejan-mladenovski]

I can't find this in the wiki or the user manual. Can you change the color of the heatmap cells to some other than red? I reviewed the source code and found out that you can choose between the red, green or blue, but the color red is hardcoded. I changed this to "blue" and it generated blue cells, but I want this to be configurable. Also, is there a way to tell the heatmapper to generate the blue from some kind of a range? For example, I want to give a value of something for my dark blue, and a value for my light blue, and the heatmap to generate shades of blue from that range.

Thanks

[nicolaskruchten]

The short answer is that there is no way to do any of that without either changing the builtin heatmap Renderer, or making a copy of it that behaves the way you would like it to.

If you wanted to submit a pull-request that added some options to the builtin heatmap renderer (via the rendererOptions mechanism) I would happily consider merging it in :)

Hi friends. I´m trying to change the heatmap cells color. I have to use a computer without Internet access and I can´t download Node or other software. Can I change the color without compile pivot.coffee?

Thanks in advance.

[dejan-mladenovski]

I didn't get to create a mechanism via the rendererOptions field, so what I can tell you that you can hardcode it in pivot.js in lines 1429, 1433, 1438, 1441 and 1442. Just change the "red" to "green" or "blue". I think that this is the only current option to do this. The heatmapper method wants the base color for the fields and it will calculate the HEX value for the color.

So if you choose "red" the HEX field for the color will be #FFxxyy, for "green" it will be #xxFFyy and for "blue" it will be #xxyyFF

That is how I fixed it, changed the string from "red" to "blue" and got cells with different shades of blue as background color.

Ok thanks dejan-mladenovski. I will use this method.

[nicolaskruchten]

You can now specify a custom color scale function, see the example here: http://nicolas.kruchten.com/pivottable/examples/montreal_2014.html

[02harleen]

How to change heatmap image background color. Default show black.

[yordanivanov92]

Is it possible to also change the blue color on the side of table?

[nicolaskruchten]

@yordanivanov92 please create new issues rather than commenting on old, closed ones :)

To answer your question: you can override all styles using CSS.

[yordanivanov92]

I'm really sorry Mr. Kruchten - I'm a bit new to asking questions in Github and did not think at first that I should possible open a new thread. Thank you for answer, I was looking for the same answer but for rpivotTable - I didn't pay enough attention. I posted an issue there though :) Nonetheless, thank you very much!

…

On Wed, Apr 19, 2017 at 4:31 PM, Nicolas Kruchten ***@***.***> wrote: @yordanivanov92 <https://github.com/yordanivanov92> please create new issues rather than commenting on old, closed ones :) To answer your question: you can override all styles using CSS. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#433 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AXLY2vwObsmQQE76FehIE6Dj9bcVlpEIks5rxhqrgaJpZM4HYk7H> .

[tsando]

Hi @nicolaskruchten, this example you mentioned: http://nicolas.kruchten.com/pivottable/examples/montreal_2014.html shows for a linear scale. Is there any way to make the heatmap only color based on whether the value is positive or negative? If so, can you share the code to edit this function to achieve this? Many thanks!

                heatmap: {
                    colorScaleGenerator: function (values) {
                        var min = d3.min(values.filter(function (d) {
                            return (d !== 0);
                        }));
                        var max = d3.max(values.filter(function (d) {
                            return (d !== 0);
                        }));
                        return d3.scale.linear()
                            .domain([min, 0, max])
                            // .range(["#77F", "#FFF", "#F77"]);
                            .range(["lavenderblush", "white", "honeydew"]);
                    }
                }

[nicolaskruchten]

Yep, you can make pretty much any kind of scale you want. Here's the documentation: https://github.com/d3/d3-3.x-api-reference/blob/master/Quantitative-Scales.md

[nicolaskruchten]

(also: please do not comment on closed issues, rather open a new one, so as to minimize the notifications sent to uninterested parties :)