Dynamic color ranges

#1

Hi, I used the color object in my charts to set up a palette and I colored them by metric values. For some of the charts I also defined color ranges. However, metric values change depending on my interactions with the charts and my manually defined ranges are not correct in several situations. Is there a way I can set these ranges dynamically depending on changing metric values while I interact with the charts?

#2

Hi @Paul . when you are using the color range you can use it in two ways. The first one, which you are using, is to declare an array with range objects like this: { min: 0, max: 1000 color: 'red' } . In this way you manually define the ranges. The second option is to use ChartFactor’s autorange function. Here is a code example: cf.Color().metric(metricDefinition).autoRange() . Autorange calculates the ranges based on Jenks Fisher’s Natural Breaks Classification algorithm. This is specially useful when you combine your charts with the Interaction Manager and need to adjust colors dynamically as it seems to be your case.

#3

Hi @arturo, I am using the autoRange function on my visualization as you recommended and it looks pretty awesome. I don’t have to manually define the color ranges anymore, that’s cool. Can I make it recalculate the color ranges when users apply filters? That would look really good for this specific dataset.

#4

Hi @Paul absolutely, studio allows you to do that. Let me explain you the behavior of the autoRange for a better understanding. When you are using the autoRange function the default behavior is to create automatic ranges taking all the data inside the visualization, which means the user always sees all the data ranges no matter if a filter is applied or not. If you want to change this default behavior you can pass an object as an argument in the autoRange function. You can do this:
autoRange({ dynamic: true }) . The dynamic key allow you to filter the ranges, the default value is false. You can refer to this link for additional details: https://chartfactor.com/doc/latest/visualization_options/color/#color-range.

#5

Hi @arturo , I’m changing some of my dashboard’s visualization to use the autoRange function instead of manually declaring the color ranges. However, when using the autoRange function I always get the same number of ranges. In many of my visualization I only defined 3 ranges manually but now I have 12 ranges. There is a way to define the number of ranges?

#6

Hi @Paul, the autoRange algorithm takes as input the data and the color palette length. This means that if your visualization has a data array with 20 values and you want to have 3 color ranges, you need to define 3 colors in the palette. For example: cf.Color().palette(["#0095b7", "#a0b774", "#f4c658"]) . This is because the autoRange algorithm defines the ranges based on the color palette length. The exception to this rule is when you limit the data to 1 for example. In that case, even though your palette may have many colors, the algorithm will only produce one range.