Heatmap gradient start and end color range

[Mennims]

Hi,

I'm trying to make my heatmap chart gradient range from white to red.

If I specify the red color code in the color range object for the chart it will range from black to red, which is not ideal for my use case.
To fix this I'd have to do the following
 

"colorRange": {
    "gradient": "1",
    "minValue": "0",
    "code": "#ffffff",
    "startLabel": "Poor",
    "endLabel": "Good",
    "color": [
    {
        "code": "#FF0000",
        "maxValue": "666"
    }]
}

This works as expected, however the problem is that I have to specify the max value, which means I need to find the highest value column in the heatmap chart and apply that value to the maxValue key, which makes this far less convenient than it could be.

It would be great if I could do something like this

"colorRange": {
    "gradient": "1",
    "minValue": "0"
    "startCode": "#ffffff",
    "code": "#FF0000",
    "startLabel": "Poor",
    "endLabel": "Good"
}

Which would result in the following

 

Thanks in advance

[soumya]

Hi,

The gradient legend is showcasing a pane which is derived from the "colorRange" definitions where the color objects need to define for numeric range blends with the next color allowing to form a gradient strip.

According to your use case you need to set color object from lower to higher value i.e from white to red. For reference please check http://jsfiddle.net/Soumya_dutta/ema79zrf/2/ where the generic definition is provided within "colorRange" object and each color object defining the specific numeric range corresponding to a particular color.

Hope this would help.

[Mennims]

Hi Soumya,

Thank you for taking your time to help me out with this, however I don't think you understand what my request is.

I know how to make it work properly with the colorRange object, the problem I have is that I have to enter a max value, which won't always be static. I won't always have values ranging from 1-10, depending on data it might be from 1 to 666.

I'd like FusionCharts to determine the max value for me, it could look at the cell that has the highest value and set the maxValue internally for me.

I suggest having a look at my example JSON again, I provided an example of the JSON I'd like to provide FusionCharts to get the desired effect.

Keep in mind that FusionCharts knows how to determine the max value automatically, because if you do not provide the colorRange object, and just a single colour, it automatically determines the gradient of the colour from 1 to the highest value cell in the chart.

The problem I have with this is that it only allows a range from BLACK to the specified colour, instead of a specified colour to a specified colour.

[jessicasmith26]

Hi Mennims

The startValue and endValue properties are used to define the range start and end value. The minColor and maxColor properties represent the colors of given range. It’s possible to set the cell color for the value not in the given range using the fillColor property.

In Fixed type, the minColor value is used for cell color.

import { HeatMap, Legend } from '@syncfusion/ej2-heatmap';
HeatMap.Inject(Legend);

let heatmapData: any [] = [
    [73, 39, 26, 39, 94, 1],
    [93, 58, 53, 38, 26, 68],
    [99, 28, 22, 4, 66, 90],
    [14, 26, 97, 69, 69, 3],
    [7, 46, 47, 47, 88, 6],
    [41, 55, 73, 23, 3, 79],
    [56, 69, 21, 86, 3, 33],
    [45, 7, 53, 81, 95, 79],
    [60, 77, 74, 68, 88, 51],
    [25, 25, 10, 12, 78, 14],
    [25, 56, 55, 58, 12, 82],
    [74, 33, 88, 23, 86, 59]];

let heatmap: HeatMap = new HeatMap({
    titleSettings: {
            text: 'Sales Revenue per Employee (in 1000 US$)',
            textStyle: {
                size: '15px',
                fontWeight: '500',
                fontStyle: 'Normal',
                fontFamily: 'Segoe UI'
            }
        },
        xAxis: {
            labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven',
            'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin',   'Mario'],
        },
        yAxis: {
            labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
        },
        paletteSettings: {
            palette: [
                { startValue:1, endValue:30, minColor: '#C2E7EC', maxColor: '#AEDFE6' },
                { startValue:30, endValue:60, minColor: '#9AD7E0', maxColor: '#72C7D4' },
                { startValue:60, endValue:90, minColor: '#5EBFCE', maxColor: '#4AB7C8' }
            ],
            type: "Gradient"
        },
        dataSource: heatmapData,
        legendSettings: {
            visible: true,
        }
 });
 heatmap.appendTo('#element');

[Srishti Jaiswal]

Hi Mennims,

As per your use case, you can derive the maximum value from the data object array by iterating through each data object and then set it in the color object's maxValue attribute.

Then you need to feed this modified dataSource object to the chart constructor to get the desired result.

Please refer to this fiddle for the implementation: https://jsfiddle.net/h7j01f8m/

Hope this would help.

Edited August 4, 2020 by Srishti Jaiswal