Pre loader

Discreet colormap

Welcome to the SciChart Forums!

  • Please read our Question Asking Guidelines for how to format a good question
  • Some reputation is required to post answers. Get up-voted to avoid the spam filter!
  • We welcome community answers and upvotes. Every Q&A improves SciChart for everyone

WPF Forums | JavaScript Forums | Android Forums | iOS Forums

1
0

Is there a way to get discreet colormap for the heatmap? currently no matter how many or how few colors are defined in the colormap table it always adds a gradient. how can we get a discreet ranges for colormap?

Thanks

Version
3.1.333
  • You must to post comments
0
0

Hi Pramod

There is a way, yes

There is a technique we use in 3D charts in our WPF (windows) version of scichart, where we basically define gradient stops like this:

Given a set of gradient stops

    const heatmapColorMap = new HeatmapColorMap({ 
                    gradientStops: [
                       { offset: 0, color: "Red" },
                       { offset: 0.5, color: "Green" }
                       { offset: 1, color: "Blue" }
                    ]
                });

This will perform a gradient between offset 0 (red) and offset 0.5 (green) and offset 1 (blue).

If you want a hard transition from red to green, and green to blue, then inject extra gradient stops like this

 gradientStops: [
        { offset: 0, color: "Red" },
        { offset: 0.4999, color: "Red" },
        { offset: 0.5, color: "Green" }
        { offset: 0.9999, color: "Green" }
        { offset: 1, color: "Blue" }
 ]

Anything between stop 0 and 0.4999 will now be red and 0.5 to 0.9999 will be hard green

Let me know if this helps!

Best regards,
Andrew

  • You must to post comments
0
0

Dear Andrew,

Thank you for the suugestion, but it does not seem to make any difference,
Please see the attached images:
1. session-5_scan-4_Fluorescence-Image.png using normal gradiant map:
colormap:

      Rainbow: [
    [0, 'rgb(150,0,90)'], [0.125, 'rgb(0,0,200)'],
    [0.25, 'rgb(0,25,255)'], [0.375, 'rgb(0,152,255)'],
    [0.5, 'rgb(44,255,150)'], [0.625, 'rgb(151,255,0)'],
    [0.75, 'rgb(255,234,0)'], [0.875, 'rgb(255,111,0)'],
    [1, 'rgb(255,0,0)']
  ],
  1. session-5_scan-4_Fluorescence-Image_discreet.png using suggested changes to the colormap:
    colormap:

      RainbowDiscreet: [
    [0, 'rgb(150,0,90)'],
    [0.12499, 'rgb(150,0,90)'],
    [0.125, 'rgb(0,0,200)'],
    [0.24999, 'rgb(0,0,200)'],
    [0.25, 'rgb(0,25,255)'],
    [0.37499, 'rgb(0,25,255)'],
    [0.375, 'rgb(0,152,255)'],
    [0.49999, 'rgb(0,152,255)'],
    [0.5, 'rgb(44,255,150)'],
    [0.62499, 'rgb(44,255,150)'],
    [0.625, 'rgb(151,255,0)'],
    [0.74999, 'rgb(151,255,0)'],
    [0.75, 'rgb(255,234,0)'],
    [0.87499, 'rgb(255,234,0)'],
    [0.875, 'rgb(255,111,0)'],
    [0.99999, 'rgb(255,111,0)'],
    [1, 'rgb(255,0,0)']
    

    ],

    I was hoping for functionality where the heatmap instead of gradients shows discreet levels almost like categories.

Let me know if there any thing else I can try.

Best,

Pramod

Images
  • You must to post comments
Showing 2 results
Your Answer

Please first to submit.