Pre loader

Tag: Heatmap

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

0 votes
2k views

Error from chart in div chart1 Error: getNativeXValues is invalid for heatmap type series. Try getting or setting zValues instead
at UniformHeatmapDataSeries.BaseHeatmapDataSeries.getNativeXValues (BaseHeatmapDataSeries.js:430:1)

Help! Please!

0 votes
6k views

I am considering applying server-side licensing for my javerScript application.

In the document below, there is a phrase “Our server-side licensing component is written in C++.”
(https://support-dev.scichart.com/index.php?/Knowledgebase/Article/View/17256/42/)

However, there is only asp.net sample code on the provided github.
(https://github.com/ABTSoftware/SciChart.JS.Examples/tree/master/Sandbox/demo-dotnet-server-licensing)

I wonder if there is a sample code implemented in C++ for server-side licensing.

Can you provide c++ sample code?
Also, are there any examples to run on Ubuntu?

0 votes
8k views
  1. Big Sur 11.6.
  2. Monterey 12.2.1
  3. Catalina 10.15.7 (late 2013 model)
    ![enter image description here][1]

sciChart version 1.4.1611

If you open the chart in the Firefox browser, then, strangely enough, everything works.

Is it related to the version of the library?

0 votes
0 answers
6k views

Hello,

I’ve been looking at the sample you provided for using the Heatmap 3D with orthogonal camera to make it look like a 2D Heatmap.

The example shows the axis labels on both left/right and top/bottom.

Is there a way to hide some of the labels and only leave one set of labels on each axis? (See image)

Also is there a way to hide the X,Y,Z Axis legend?

Thank you very much.

Best regards,
Sebastian

0 votes
9k views

Hi there:

I am developing an application where the main chart is a heat map type one. I would like to have a custom cursor modifier to show some values of the x, y and z axes with limit digits. The problem is that so far I get these result:

Capture
EDIT: PLEASE INSERT AN IMAGE HERE

I would like to show only 1 decimal in the Z axis and 0 decimals en the X and Y axis. I have checked your modifiers demo but it seems to be not working for my heatmap chart. Any kind of advice about this issue would help me to have the application I am looking for.

The XAML of my chart is like this:

 <s:SciChartSurface x:Name="sciChart" Grid.Column="1" Grid.Row="3" Padding="0" BorderThickness="0" MouseDown="SciChart_MouseDown" Margin="0">
            <s:SciChartSurface.RenderableSeries>
                <s:FastUniformHeatmapRenderableSeries x:Name="heatmapSeries" 
                                                      Opacity="0.9"/>
            </s:SciChartSurface.RenderableSeries>

            <s:SciChartSurface.XAxis>
                <s:NumericAxis DrawMajorBands="True"  
                               DrawLabels="False"
                               TextFormatting="0N"
                               GrowBy="0, 1"
                               s:RolloverModifier.AxisLabelContainerStyle="{StaticResource AxisLabelStyle}" 
                               s:RolloverModifier.AxisLabelTemplate="{StaticResource AxisLabelTemplate}" 
                               s:CursorModifier.AxisLabelContainerStyle="{StaticResource CursorAxisLabelStyle}"/>
            </s:SciChartSurface.XAxis>

            <s:SciChartSurface.YAxis>
                <s:NumericAxis DrawMajorBands="True" 
                               GrowBy="0, 1"
                               DrawLabels="False" 
                               VisibleRange="0,249"  
                               TextFormatting="0"/>
            </s:SciChartSurface.YAxis>

            <s:SciChartSurface.ChartModifier>
                <s:ModifierGroup>
                    <s:RolloverModifier x:Name="RolloverModifier"
                                    IsEnabled="True"
                                    ShowTooltipOn="Always" />
                    <!--<s:CursorModifier IsEnabled="True" ShowTooltip="True" ShowTooltipOn="MouseOver"
                        ShowAxisLabels="true" SourceMode="AllSeries"/>-->
                    <s:CursorModifier x:Name="CursorModifier"
                                  IsEnabled="False"
                                  UseInterpolation="False"
                                  ShowAxisLabels="False"
                                  ShowTooltip="True"
                                  ShowTooltipOn="MouseOver"/>
                    <!--<s:VerticalSliceModifier IsEnabled="True">
                        <s:VerticalSliceModifier.VerticalLines>
                            <s:VerticalLineAnnotation IsEditable="false"
                                                  LabelPlacement="Axis"
                                                  ShowLabel="true"
                                                  LabelTextFormatting="0"/>
                        </s:VerticalSliceModifier.VerticalLines>
                    </s:VerticalSliceModifier>-->
                </s:ModifierGroup>

            </s:SciChartSurface.ChartModifier>
        </s:SciChartSurface>

Thanks in advanced.

0 votes
8k views

Hi,
I would like to draw a polygon over a heatMap using an inherited class of UniformHeatMapDataSeries.
An example using FastHeatMapRenderableSeries was described here : https://www.scichart.com/questions/wpf/drawing-a-polygon-upon-a-heatmap-chart ,but it is now deprecated since SciCharts V5.

Instead of that, i tried to declare an inherited class of CustomRenderableSeries as shown here :

public class PolygonRenderableSeries : CustomRenderableSeries {
protected override void Draw(IRenderContext2D renderContext, IRenderPassData renderPassData)
{
base.Draw(renderContext, renderPassData);
}
}

What i need now is to pass a List of Polygons to this class in order to draw them directly. I know how to draw a polygon, but i don’t know how to override the renderPassData for adding polygons to it.

Could you help me about that ?
Best regards,

0 votes
3k views

Hi,

Is it possible to specify that incoming zValues array matrix is an array of columns, instead of an array of rows?

e.g. if I pass this:

[
[1,2,3],
[4,5,6],
[7,8,9]
]

[1,2,3] is the first column, not the first row.

We want to avoid transposing this data manually before passing it to the heatmap, because our data arrives one column at a time via a websocket subscription, and the data is too large to efficiently re-transpose every time.

I can’t see anything in the docs or the code?

Thanks
Joe

1 vote
2k views

I am implementing a heatmap chart and would like to allow users to adjust the color mapping of the heatmap by adding sliders to the heatmap legend (Please refer to the attached screenshot). Does SciChart support color slider for HeatmapLegend?

  • Quyen Sy asked 1 year ago
  • last active 1 year ago
0 votes
4k views

To avoid arrays in LOH the UniformHeatmapDataSeries should use IList[] or Span instead of TZ[,].

  • Tobias asked 5 years ago
  • last active 5 years ago
0 votes
6k views

Hello!

I am trying to render a HeatMap and align labels next to squares (see the attached image). However, I am running into two issues.

Firstly, I am using RenderTransform to shift labels so that they are aligned with the squares instead of being on the borders between them. It works, but does not look good as I resize the control.

Second, the axes render the last label outside the view. I tried setting VisualRange and VisualRangeLimit but it did not help. It hides the last data column (or row) and still displays the last label.

Any suggestions on how I can solve it?

I am attaching a sample project.

Thank you in advance!

0 votes
11k views

I have created a HeatMap with the size of 25000 x 70. The application crashes with the following log:

E/libEGL: call to OpenGL ES API with no current context (logged once per thread)
E/libEGL: call to OpenGL ES API with no current context (logged once per thread)
E/libEGL: call to OpenGL ES API with no current context (logged once per thread)
D/OpenGLRenderer: Use EGL_SWAP_BEHAVIOR_PRESERVED: true
I/OpenGLRenderer: Initialized EGL, version 1.4
W/OpenGLRenderer: Failed to choose config with EGL_SWAP_BEHAVIOR_PRESERVED, retrying without…
D/EGL_emulation: eglCreateContext: 0x7faef90b6500: maj 2 min 0 rcv 2
D/EGL_emulation: eglMakeCurrent: 0x7faef90b6500: ver 2 0 (tinfo 0x7faf0489eec0)
D/EGL_emulation: eglMakeCurrent: 0x7faef90b6500: ver 2 0 (tinfo 0x7faf0489eec0)
D/EGL_emulation: eglCreateContext: 0x7faf04b65680: maj 2 min 0 rcv 2
D/EGL_emulation: eglMakeCurrent: 0x7faf04b65680: ver 2 0 (tinfo 0x7faf04b7e500)
E/emuglGLESv2_enc: device/generic/goldfish-opengl/system/GLESv2_enc/GL2Encoder.cpp:s_glTexImage2D:1908 GL error 0x501 A/libc: Fatal signal 11 (SIGSEGV), code 1, fault addr 0x41a10f90 in tid 2736 (GLThread 973)


Below is Kotlin code from my sample project that produces the error:

private const val WIDTH = 25000
private const val HEIGHT = 70

class MainActivity : AppCompatActivity()
{
    private lateinit var chartBuilder: SciChartBuilder

    override fun onCreate(savedInstanceState: Bundle?)
    {
        super.onCreate(savedInstanceState)

        SciChartSurface.setRuntimeLicenseKey(getString(R.string.sciChart_license))
        SciChartBuilder.init(this)
        chartBuilder = SciChartBuilder.instance()

        setContentView(R.layout.activity_main)
        val background = findViewById<ViewGroup>(R.id.background)

        val chartSurface = createChartSurface()
        background.addView(chartSurface)

        addPoints(chartSurface)
    }

    private fun createChartSurface(): SciChartSurface
    {
        val surface = SciChartSurface(this)

        val xAxis = chartBuilder.newNumericAxis().build()
        val yAxis = chartBuilder.newNumericAxis().build()

        surface.xAxes.add(xAxis)
        surface.yAxes.add(yAxis)

        surface.renderableSeries.add(createSeries(WIDTH, HEIGHT))

        return surface
    }

    private fun createSeries(width: Int, height: Int): FastUniformHeatmapRenderableSeries
    {
        val dataSeries = UniformHeatmapDataSeries(Int::class.javaObjectType, Int::class.javaObjectType, Float::class.javaObjectType, width, height)

        return chartBuilder.newUniformHeatmap()
            .withColorMap(ColorMap(intArrayOf(ColorUtil.DarkBlue, ColorUtil.CornflowerBlue, ColorUtil.DarkGreen, ColorUtil.Chartreuse, ColorUtil.Yellow, ColorUtil.Red), floatArrayOf(0f, 0.2f, 0.4f, 0.6f, 0.8f, 1f)))
            .withDataSeries(dataSeries)
            .build()
    }

    private fun addPoints(chartSurface: SciChartSurface)
    {
        @Suppress("UNCHECKED_CAST")
        val dataSeries = chartSurface.renderableSeries.first().dataSeries as UniformHeatmapDataSeries<Int, Int, Float>

        val xRange = 0 until WIDTH

        for (i in 0 until HEIGHT)
        {
            val values = xRange.map { (i + it).toFloat() }
            dataSeries.updateRangeZAt(0, i, values)
        }

        val renderableSeries = chartSurface.renderableSeries.first() as FastUniformHeatmapRenderableSeries
        renderableSeries.minimum = dataSeries.zValues.minimum.toDouble()
        renderableSeries.maximum = dataSeries.zValues.maximum.toDouble()
    }
}
0 votes
11k views

I am using heatmaps in my application and would love to use the same color scheme that is used for those also in my xyz scatter plots. I know how to make palette providers I just don’t know how to get a specific color that is defined by a lineargradientbrush (defined in xaml) for a specific (relative value? 0.0-1.0 ). Is this possible?

0 votes
10k views

Hi,

I’m trying to bind the maximum value of the HeatmapColorPalette in v5 in order to autorange the colormap to the data.

        <s:FastUniformHeatmapRenderableSeries x:Name="heatmapSeries" DataSeries="{Binding Data}" Opacity="0.9">
            <s:FastUniformHeatmapRenderableSeries.ColorMap>
                <s:HeatmapColorPalette Maximum="{Binding ColorMaximum}">
                    <s:HeatmapColorPalette.GradientStops>
                        <GradientStop Offset="0" Color="DarkBlue"/>
                        <GradientStop Offset="0.2" Color="CornflowerBlue"/>
                        <GradientStop Offset="0.4" Color="DarkGreen"/>
                        <GradientStop Offset="0.6" Color="Chartreuse"/>
                        <GradientStop Offset="0.8" Color="Yellow"/>
                        <GradientStop Offset="1" Color="Red"/>
                    </s:HeatmapColorPalette.GradientStops>
                </s:HeatmapColorPalette>
            </s:FastUniformHeatmapRenderableSeries.ColorMap>
        </s:FastUniformHeatmapRenderableSeries>

This previously worked in v4

            <s:FastHeatMapRenderableSeries x:Name="heatmapSeries" 
                                           DataSeries="{Binding Data}" 
                                           Opacity="0.9"
                                           Maximum="{Binding ColorMaximum}" 
                                           Minimum="{Binding ColorMinimum}"/>

The heatmap no longer refreshes to the new range when using the FastUniformHeatmapRenderableSeries instead of FastHeatMapRenderableSeries. Does anyone know why?

Regards,

  • Kevin Yeh asked 6 years ago
  • last active 6 years ago
1 vote
7k views

Hi,
I have a problem with 2D heatmap performace due to lots of data. I tried some tips to increase performance (rendering priority, resampling etc.) but it is insufficient. I read a scichart forum about 2D heatmap performance and I found answer about possible performance improvement in future (https://www.scichart.com/questions/question/heatmap-2d-performance). I would like to ask you if there is any performance improvement in newer scichart version. Actually I’m working with version 4.0.5.8187.

Thanks for your answer.

  • Jan Lysoň asked 8 years ago
  • last active 4 years ago
0 votes
7k views

Hi,
I have a question regarding coloring on the Heatmap.

Is it possible to color the heatmap titles by some other other value than the data value, like Color? CustomColorProvider(x, y, data value, DataSeries)? We would like to color by “value order” and not the actual value, and have the actual values displayed as text on the titles. (I have tried to adjust the ColorMap GradientStops, but without success)

DataValues could be
[ 10.5, 12.5, 1.234E+150]
[ 1, 2, -1.234E+150]
[-10.5, -12.5, 1.234E-150]

This should result in 9 evenly spread colors.

Best regards
Peter Friis Hansen

  • pfh asked 8 years ago
  • last active 8 years ago
0 votes
5k views

I would like to add labels to contour lines as shown in this previous post.

https://www.scichart.com/questions/wpf/is-it-possible-to-do-contour-plots

I have created the heat map with contours, and now I want to programmatically add labels. To this end. I have created a contour series in my view model

        var contourSeries = new FastUniformContourRenderableSeries
        {
            DataSeries = dataSeries,
            ZMin = 0.0,
            ZMax = 50.0,
            ZStep = 4.0
        };

This is the same series as I have already plotted. I have looked through this object, trying to find the plotted contour lines, so I can calculate positions to put labels, but I have not found the data. Can you tell me how to extract the plotted contour curve data?

0 votes
9k views

I have created a heatmap chart with values for the data series with four vertical lines of width 1. When the width of data series is smaller than width of SciChartSurface in pixels the four lines are clearly visible. However when I increase the width of data series to be bigger than the width in pixels, then some lines disappear, even though I’ve set the re-sampling mode to ResamplingMode.Max.

I wasn’t able to attach images to the post (got a Forbidden error), so I’ve uploaded them to Imagur:
Missing Lines
Visible lines

Here is the code from which the screen shots were made:

import android.os.Bundle
import android.support.v7.app.AppCompatActivity
import com.scichart.charting.model.dataSeries.UniformHeatmapDataSeries
import com.scichart.charting.visuals.SciChartSurface
import com.scichart.charting.visuals.renderableSeries.ColorMap
import com.scichart.data.numerics.ResamplingMode
import com.scichart.drawing.utility.ColorUtil
import com.scichart.extensions.builders.SciChartBuilder
import kotlin.math.roundToInt

const val WIDTH = 2000
const val HEIGHT = 50

class MainActivity : AppCompatActivity()
{
    override fun onCreate(savedInstanceState: Bundle?)
    {
        super.onCreate(savedInstanceState)

        SciChartSurface.setRuntimeLicenseKey(getString(R.string.sciChart_license))
        SciChartBuilder.init(this)

        setContentView(R.layout.activity_main)

        val chartSurface = findViewById<SciChartSurface>(R.id.chart)
        val chartBuilder = SciChartBuilder.instance()

        val xAxis = chartBuilder.newNumericAxis().build()
        val yAxis = chartBuilder.newNumericAxis().build()

        val dataSeries = UniformHeatmapDataSeries<Int, Int, Int>(Int::class.javaObjectType, Int::class.javaObjectType, Int::class.javaObjectType, WIDTH, HEIGHT)
        for (x in 0 until WIDTH)
        {
            for (y in 0 until HEIGHT)
            {
                val value = when (x)
                {
                    0,
                    (0.25 * WIDTH).roundToInt(),
                    (0.5 * WIDTH).roundToInt(),
                    (0.75 * WIDTH).roundToInt() -> 50
                    else                        -> 0
                }
                dataSeries.updateZAt(x, y, value)
            }
        }

        val series = chartBuilder.newUniformHeatmap()
            .withDataSeries(dataSeries)
            .withColorMap(ColorMap(intArrayOf(ColorUtil.DarkBlue, ColorUtil.CornflowerBlue, ColorUtil.DarkGreen, ColorUtil.Chartreuse, ColorUtil.Yellow, ColorUtil.Red), floatArrayOf(0f, 0.2f, 0.4f, 0.6f, 0.8f, 1f)))
            .withResamplingMode(ResamplingMode.Max)
            .build()

        chartSurface.suspendUpdates().use {
            chartSurface.xAxes.add(xAxis)
            chartSurface.yAxes.add(yAxis)
            chartSurface.renderableSeries.add(series)
        }
    }
}
0 votes
0 answers
6k views

Hello,

I have another question on the Heatmap 3D.

I have attached a sample app to show what I’m trying to accomplish. Essentially, I want my data points to contain NaN whenever there’s no data available for it. In that way if I want I could find out which are the points that have no data and create an interpolation throughout those points.

The problem is that If I initialize all my data points to NaN, and then I add the actual valid data, that data won’t be shown in the heatmap. I suspect it has something to do with the GradientColorPalette that probably doesn’t know what to do with a NaN.

Can you help me solve this issue? Maybe I’m using the API in a wrong way.

NOTE: If you comment the code lines inside the HeatmapModel class where it is initializing the data points with NaN and run it, you should get all red and some thin lines of different colors, which would be the ones that contain actual data. The idea is that all the red is not colored and show empty space and only show the fine lines, because 0 is a valid value.

NOTE: due to limiting uploading size, you’ll have to add the SciChart DLLs to the project manually.

Thank you!
Best regards,
Sebastian

0 votes
2k views

Is it possible to change the heatmap legend from vertical to horizontal?

  • Quyen Sy asked 11 months ago
  • last active 10 months ago
0 votes
4k views

Hi,

I tried to initialize heatmap chart with NaN to make it transparent, but it doesn’t work that way. The color was blue, which is zero in the colormap. Is there a way to make it not showing any color?

Thanks,

public void initECMSciChart() {
    // initialize chart with NaN
    for (int i = 0; i < MATRIX_COLUMNS; i++) {
        for (int j = 0; j < MATRIX_ROWS; j++) {
            heatmap2DMatrix[i][j] = 0;
            heatmapDataSeries.updateZAt(i, j, Double.NaN);
        }
    }
    heatmapDataSeries.setStartX(0d);
    heatmapSurface.zoomExtentsX();
}
  • Gang Xu asked 4 years ago
  • last active 4 years ago
1 vote
2k views

Hello,

I am trying to change the frequency range in the Y axis on the Heatmap to 100000 from 50000, but the plot does not seem to be working to scale to the proper frequency range on the Y axis. I expect the plot to keep the same scale around 20000 for the upper line when I change the upper scale to 100000, but the graph scales the upper line up to 40000. I’m using function Heatmap2DArrayDataSeries() and passing the series data along with TimeFunc() for mapping to X axis and FreqFunc() for mapping to Y axis. I made some changes to FreqFunc(), but it did not change the upper line to 20000. See below for my partial code. Thanks,

    protected override void OnDisplayLoaded()
    {
    ...
    ...
        _dopplersurface.YAxes[0].VisibleRange = YVisibleRange2; // YVisibleRange2 = {0, 100000}
        _surface.UpdateLayout();

    }

    private void PlotData()
    {
    ...
        ...
        heatmap2DArrayDataSeries = new Heatmap2DArrayDataSeries<DateTime, double, double>(_spectrogramBuffer, TimeFunc, FreqFunc);
        HeatmapRenderableSeries = heatmap2DArrayDataSeries;
    }

    double FreqFunc(int iy)
    {
        double FreqDelta = 1.0 / (time_queue[1] - time_queue[0]).TotalSeconds / (FFT_Points / 2.0);
        if (((FFT_Points / 2.0) * FreqDelta / 2) < (double)YVisibleRange2.Max); // FFT_Points = 1024
        {
            FreqDelta = FreqDelta * 2;
        }
        return iy * FreqDelta / 2; // Returns 0 if iy is 0 and 50000 if iy is 512
    }

    DateTime TimeFunc(int ix)
    {
        if (time_queue.Count > (ix * Step))
        {
            DateTime DateTimeTemp1 = time_queue[ix * Step];
            return DateTimeTemp1;
        }
        else
        {
            return time_queue[time_queue.Count - 1];
        }
    }
  • Hoa Duong asked 2 years ago
  • last active 2 years ago
0 votes
6k views

Hi,

I tried to implement a colormap view next to the heatmap chart. But couldn’t figure out how to set it up. It seems like it won’t work this way.

SciChartHeatmapColourMap colorMapView = new SciChartHeatmapColourMap(this);
colorMapView.findViewById(R.id.colorMapView);

I don’t know how Bindview works in the example code. Could you tell me how to link SciChartHeatmapColourMap to the view in layout xml?

Thanks.

  • Gang Xu asked 4 years ago
  • last active 4 years ago
0 votes
10k views

Hi,
I’ve created a 2D Heatmap Chart which works for itself perfectly fine (incl. x-y zooming, panning, annotations, etc.), but once I’ve added a 3D chart (even without any datapoints), the behaviour of my Heatmap chart changes. After a double click on the chart, the displayed range changes. The zoom and pan direction works only in yDirection, new created annotations are not displayed correctly anymore, previous annotations disappear, when I try to move them.

Does anyone have an idea what the problem might be?

Each chart (2D Heatmap and 3D Pointcloud) has its own view and viewmodel.
In the images below you can see the 3D chart (which I more or less copied from the examples).
The image on the right shows the heatmap chart before I created the 3D chart view. During that phase everything works fine.
The image in the middle is showing the heatmap after the 3D chart view was created.
In the meantime there is not happening much in the code. There is a message that the 3D Libraries are initialized (“INITIALIZING NATIVE LIBS IN SC3DS CTOR”). That sounds quite normal to me.

Thanks in advance,

Tim

  • Tim asked 8 years ago
  • last active 8 years ago
0 votes
6k views

Hi,

InvalidatateParentSurface does’t seem to update the text in the heatmap cell however the change seems to be detected and the color value is getting updated. Can you please suggest how to fix this?

Attached is a sample.

Thanks,
-Tom

  • mijothomas asked 7 years ago
  • last active 6 years ago
0 votes
0 answers
4k views

I am implementing a waterfall chart with non-uniforma heatmap. I found that the live update doesn’t work. I keep updating the zValues with live data but the chart just show 1 row of data. If I resize the chart (my heatmap is inside a resizable container), I can see the updated data (i.e. Each time I resize the chart, the chart updated and show updated data). Do you have any example of live updated non-uniform heatmap? Below are my codes:

Draw the heatmap:

const SPECTROGRAM_HEIGHT = 256;
const SPECTROGRAM_WIDTH = 100;

const { sciChartSurface, wasmContext } = await SciChartSurface.create("spectrogram-chart-root");

const xAxis = new NumericAxis(wasmContext, {
    axisTitle: "Frequency",
    axisTitleStyle: {
        fontSize: CHART_STYLE.AXIS_FONT_SIZE,
        fontFamily: "sans-serif",
        fontWeight: "bold"
    },
    labelStyle: {
        fontSize: CHART_STYLE.LABEL_FONT_SIZE,
        fontFamily: "sans-serif"
    },
    labelFormat: ENumericFormat.Decimal,
    labelPrecision: 6,
    cursorLabelFormat: ENumericFormat.Decimal,
    cursorLabelPrecision: 6,
    drawMajorBands: false,
});

const yAxis = new NumericAxis(wasmContext, {
    axisTitle: "Time",
    axisTitleStyle: {
        fontSize: CHART_STYLE.AXIS_FONT_SIZE,
        fontFamily: "sans-serif",
        fontWeight: "bold"
    },
    labelStyle: {
        fontSize: CHART_STYLE.LABEL_FONT_SIZE,
        fontFamily: "sans-serif"
    },
    drawMajorBands: false,
});

// Add XAxis and YAxis
sciChartSurface.xAxes.add(xAxis);
sciChartSurface.yAxes.add(yAxis);

const colorMap = new HeatmapColorMap({
    minimum: -200,
    maximum: -50,
    gradientStops: [
    { offset: 0, color: "Transparent" },
    { offset: 0.01, color: COLORS.DARK_BLUE },
    { offset: 0.4, color: COLORS.BLUE },
    { offset: 0.5, color: COLORS.GREEN },
    { offset: 0.6, color: COLORS.YELLOW },
    { offset: 0.8, color: COLORS.RED },
    { offset: 1, color: COLORS.DARK_RED },
    ]
});

// Create a Heatmap Data-series. Pass heatValues as a number[][] to the UniformHeatmapDataSeries
zValues = Array.from(Array(SPECTROGRAM_HEIGHT), () => Array(SPECTROGRAM_WIDTH).fill(-200));

const heatmapSeries = new NonUniformHeatmapRenderableSeries(wasmContext, {
    dataSeries: new NonUniformHeatmapDataSeries(wasmContext, { zValues: zValues, xCellOffsets: getHeatmapXOffset, yCellOffsets: getHeatmapYOffset }),
    colorMap: colorMap,
    useLinearTextureFiltering: true,
    fillValuesOutOfRange: true,
});

// Add heatmap to the chart
sciChartSurface.renderableSeries.add(heatmapSeries);

I simply return the index for testing in the getHeatmapXOffset and getHeatmapYOffset functions:

    const getHeatmapXOffset = (index) => {
    return index;
};

const getHeatmapYOffset = (index) => {
    return index;
};

Reset zValues when number of data point changed:

        spectrogramZValues = Array.from(Array(SPECTROGRAM_HEIGHT), () => Array(newWidth).fill(-200));
        heatmapSeries.dataSeries.setZValues(spectrogramZValues);
        sciChartSurface.zoomExtents();

Update the zValues array when there is new data (I tried to add call zoomExtens() after notifyDataChanged but still didn’t work):

    spectrogramZValues.shift();
    spectrogramZValues.push(newData);
    heatmapSeries.current.dataSeries.notifyDataChanged();
  • Quyen Sy asked 11 months ago
  • last active 11 months ago
1 vote
7k views

I am looking to do some custom formatting of the Heatmap.

Is it possible to show no text if the values are the minimum, and format these buckets to a predefined colour e.g. transparent?

Then I am only showing those buckets with values.

I am using the HeatmapChartwithText as a basis for my prototype at the moment.

This thread looked promising but wasn’t quite what I was looking for, and this thread was last updated a year ago and couldn’t find anything else on the subject so figured it was worth re-asking…

2 votes
0 answers
9k views

Hi SciChart-Team!

This is more a feature than a support request but I could not find a more suitable place for it.

One of the strengths of SciCharts is its ability to select – use case dependend – the most appropriate resampling technique for drawing from a wide variety of options. Currently I depict a 2-dimensional empirical probablity density function (PDF) with the heatmap. The best way for a sub-/resampling would be a kind of “Sum”-Mode to represent the new “Cell-Count” and to prevent the disappearance of strongly localized, concentrated PDF-spikes if the window is scaled down. Maybe it is possible to implement such a resampling mode for the heatmap in a future release?

Due to the lack of a “Sum”-Mode I tried to use “Max”-Mode to keep the PDF-Spikes visible after scaling down but that didn’t worked as I expected. Was my expectation wrong? I know I can do it by myself and recalculate the PDF for the new heatmap size, create a new Heatmap2DArrayDataSeries … etc. but it would be nice if it would work out of the box.

Thanks!

Janko

0 votes
3k views

Hello,
I want to create a heatmap sync with a CandlestickRenderableSeries which using DiscontinuousDateTimeAxis, is it possible to make heatmap column align with ohlc point?

  • ZHOU HANG asked 3 years ago
  • last active 3 years ago
2 votes
11k views

Hi guys,

I’ve been trying to select data points in my heat map for the whole without success. I’ve read, re-read and re-re-read the documentation, but I can’t figure out what I’m doing wrong.

Here’s the XAML.

...

<s:SciChartSurface.RenderableSeries>
    <s:FastUniformHeatmapRenderableSeriesForMvvm
        x:Name="heatmapSeries" 
        Opacity="0.9" 
        DataSeries="{Binding UniformHeatmapDataSeries}"
        s:DataPointSelectionModifier.IncludeSeries="True" >

        <s:FastUniformHeatmapRenderableSeriesForMvvm.ColorMap>
            <s:HeatmapColorPalette Maximum="60" Minimum="6">
                <s:HeatmapColorPalette.GradientStops>
                    <GradientStop Offset="0" Color="Transparent"/>
                    <GradientStop Offset="0.1" Color="DarkBlue"/>
                    <GradientStop Offset="0.2" Color="CornflowerBlue"/>
                    <GradientStop Offset="0.4" Color="DarkGreen"/>
                    <GradientStop Offset="0.6" Color="Chartreuse"/>
                    <GradientStop Offset="0.8" Color="Yellow"/>
                    <GradientStop Offset="1" Color="Red"/>
                </s:HeatmapColorPalette.GradientStops>
            </s:HeatmapColorPalette>
        </s:FastUniformHeatmapRenderableSeriesForMvvm.ColorMap>

        <s:FastUniformHeatmapRenderableSeriesForMvvm.PointMarker>
            <s:XPointMarker Fill="Pink" Width="5" Height="5"/>
        </s:FastUniformHeatmapRenderableSeriesForMvvm.PointMarker>

        <s:FastUniformHeatmapRenderableSeriesForMvvm.SelectedPointMarker>
            <s:TrianglePointMarker Fill="White" Width="12" Height="12"/>
        </s:FastUniformHeatmapRenderableSeriesForMvvm.SelectedPointMarker>

    </s:FastUniformHeatmapRenderableSeriesForMvvm>

    ...

</s:SciChartSurface.RenderableSeries>
...

Here’s the MVVM code.

...
class SelectedPointMetadata : IPointMetadata
{
    public bool IsSelected { get; set; }

    public event PropertyChangedEventHandler PropertyChanged;
}
...

double[,] heatMap = new double[heatMapHeight + glowRadius * 2, heatMapWidth + glowRadius * 2];
double[,] glowMatrix = this.getGlowEffectMatrix(glowRadius);

SelectedPointMetadata[,] selectablePoints = new SelectedPointMetadata[heatMapHeight + glowRadius * 2, heatMapWidth + glowRadius * 2];

for (int i = 0; i < spectrogram.SpectrogramAtoms.Count; i++) {
    var atom = spectrogram.SpectrogramAtoms[i];
    int x = Math.Min((int)(atom.Frequency.Hertz / frequencyStep) + glowRadius, heatMapHeight - 1);
    int y = Math.Min((int)(atom.Time.Seconds / xStep) + glowRadius, heatMapWidth - 1);
    this.applyEffectMatrix(x, y, atom.SNR, ref heatMap, ref glowMatrix, glowRadius);

}

var xBound = heatMap.GetLength(0);
var yBound = heatMap.GetLength(1);

Random rnd = new Random();

for (var i = 0; i < xBound; i++)
{
    for (var j = 0; j < yBound; j++)
    {
        var x = rnd.Next(1, 10);

        selectablePoints[i, j] = new SelectedPointMetadata() { IsSelected = false };

        if (x == 5)
        {
            selectablePoints[i, j].IsSelected = true;
        }

    }
}

this.UniformHeatmapDataSeries = new UniformHeatmapDataSeries<double, double, double>(
    heatMap,
    (-xStep * glowRadius),
    xStep,
    (-frequencyStep * glowRadius),
    frequencyStep,
    selectablePoints
    );

...

What am I missing?

0 votes
3k views

Hi everyone! We have a problem, the chart does not start on macOS and Windows 11 operating systems – a black screen is displayed.

I have a license (javascript): The javascript license must work on all Windows/Linux/macOS browsers.
also for mobile browsers.

The problem is displayed in any browser.

The parameters of the MacBook on which the chart does not start are attached below in the screenshot.

What could be the problem?

enter image description here

0 votes
8k views

Hello,

I wanted to know if I can achieve interpolation of values within a heatmap. Is there any mechanism out-of-the-box?

Thank you very much.

Regards,
Sebastian

0 votes
7k views

Hi , many of the charts provide a way to set the date on the x axis for the data series and that makes the axis match the DataSeries value defined for that axis, but for heatmap dataseries when you define xType as date the xAxis of type date is not displaying on surface, I don’t know what I’m doing wrong and there is no sample for dates on GitHub , the samples only use int , would be great if you can provide a date sample for the heatmap , thanks

0 votes
4k views

I’m trying to add more intervals into the legend of the Heat map. So far it only displays 10, 8, 6, 4, 2, 0, but I would like to edit it to display the numbers 0-10. From what I understand, the TickProvider API only works with an X or Y axis so I’m not sure if there’s a way to add the function.

1 vote
10k views

I would like to define two FastHeatMapRenderableSeries.ColorMap s. One in black and white for printing and the other one, … Why not just for the fun of it :D. How would I be able to switch between ColorMaps ( preferably through binding ) in wpf?

  • Michel Moe asked 9 years ago
  • last active 9 years ago
0 votes
9k views

In a previous project (matlab based) we have created charts as in the attached image.

This was previously done by adding all the points to a 2d histogram, this is a bit cumbersome as to give nice output the data needs to be resampled so that data points are equidistant at the display scale otherwise fast rises or falls (i.e. a small number of equi-time points). This approach becomes even worse if you want to enable interactive inspection of the plot instead of static as this will need to be recalculated for each zoom level.

Is there an easy way a similar effect in scichart without having to resort to manually creating 2d histograms. I was thinking there may be some option I can play with on how line series are rendered that might be able to generate this effect.

  • Hugoagogo asked 7 years ago
  • last active 7 years ago
1 vote
6k views

Hi,

I am using the 2D heatmap as follows:

mData = new double[dataSize, dataSize];
DataSeries = new Heatmap2DArrayDataSeries<int, int, double>(mData, x => x, y => y);

In my application the displayed data size can be changed by the users – e.g. 200 x 300, but there is also a known maximum size – e.g. 500 x 500 for the data. Since I would like to avoid unnecessary large object allocations, is there a way for me to reuse the data buffer and display only the required data?

I tried setting the visible range over the data that would need to be displayed, which worked, but unfortunately the performance is still the same as when rendering the maximum size image. Is there any other way to achieve the goal?

  • Rok Rode asked 8 years ago
  • last active 8 years ago
0 votes
0 answers
4k views

My application supports two themes (dark/light) for the charts. The background of the chart will be set to black if the dark mode is applied, and white if the light mode applied. It works well with the line chart. But there is strange grey background appeared in the heatmap chart when light mode is applied (Please check the attached screenshots). The color of gradient stop of offset 0 (min. heatmap zValues) is set to transparent and it works well with the dark mode. Do you know what’s wrong in my case?

Dark theme object applied to the chart:

{...new SciChartJSDarkTheme(), ...{
        sciChartBackground: "#1c1c1c",
        axisTitleColor: "#dee2e6",
        labelBorderBrush: "#dee2e6",
        tickTextBrush: "#dee2e6",
        majorGridLineBrush: "#1F3D68",
        minorGridLineBrush: "#102A47",
    }

Light theme object applied to the chart:

{...new SciChartJSLightTheme(), ...{
        sciChartBackground: "#fff",
        axisTitleColor: "#333",
        labelBorderBrush: "#333",
        tickTextBrush: "#333",
    }}

Heatmap graditentStops:

[
    { offset: 1, color: COLORS.DARK_RED },
    { offset: 0.8, color: COLORS.RED },
    { offset: 0.6, color: COLORS.YELLOW },
    { offset: 0.5, color: COLORS.GREEN },
    { offset: 0.4, color: COLORS.BLUE },
    { offset: 0.01, color: COLORS.DARK_BLUE },
    { offset: 0, color: "Transparent" },
]
0 votes
0 answers
4k views

An empty chart is displayed if a custom axis id is configured for Heatmap series. Only “DefaultAxisId” seems to be supported.
Please suppport custom axis id with Heatmap series (with MVVM) to achieve the same behavior as other series types.

1 vote
2k views

Hi Andrew,

I have 2 independent questions,

Q1.
I have been working with uniform heatmap and I need a way to fix the aspect ratio to 1, for all resize, zoom events, is there an option in heatmap to fix an aspect ration? Please see the attached video
https://youtu.be/obhH6KLExYw

Q2.
I am trying to implement a lasso select method to select and highlight the heatmap data. I did not find lasso select in the documentation hence I went ahead and implemented my own method.

I am drawing an svg using D3 (offsetX and offsetY variables) and then adding it to the annotation as you will see in the video and trying to get all the hitTest data inside the lasso.

If I use the customAnnotation then heatmap is able to draw correct size and location of the SVG
customAnnotation:
https://youtu.be/gL34sAbxYSE

But it does not pan and zoom with the plot data. after looking through documentation I came across OverviewCustomResizableAnnotation which seems designed for zooming and panning with the data.

But while using the OverviewCustomResizableAnnotation the SVG size keeps changing during the update and is not located at the correct location relative to the data.

sciChartSurfaceRef.current.annotations.add(
new OverviewCustomResizableAnnotation({
id: "lassoSVG",
x1: shortestXinData,
y1: shortestYinData,
isEditable: false,
isSelected: false,
yCoordinateMode: ECoordinateMode.DataValue,
xCoordinateMode: ECoordinateMode.DataValue,
verticalAnchorPoint: EVerticalAnchorPoint.Top,
horizontalAnchorPoint: EHorizontalAnchorPoint.Left,
svgString: new XMLSerializer().serializeToString(svg.node())
})
)

OverviewCustomResizableAnnotation:
https://youtu.be/-AOJ9V3l-xI

Thanks,

Pramod

0 votes
4k views

I was looking at the example given at this link for NonUniformHeatmapDataSeries in SciChart. In this example, the width and height of heatmap is given as h=4 and w=7. As I understand h is for Y axis and w is for X axis and data[,] is for Z axis. However, the counts in actual data filled for these axis are not matching wight h and w.

var xRangeMapping = new int[] { 0, 10, 20, 26, 36, 60, 72, 84 };   // 8 points for w
var yRangeMapping = new int[] { 100, 250, 390, 410, 600 };         // 5 points for h

What is the purpose of extra points added at first place (0 and 100)? Are these required to set the starting point for both axis?

Here is the code given at above link:

int w = 7, h = 4;
var data = new double[h, w];
double maxValue = double.MinValue;
for (int x = 0; x < w; x++)
    for (int y = 0; y < h; y++)
    {
        data[y, x] = 3.5 * ((h - y) * (w - x));
        maxValue = Math.Max(maxValue, data[y,x]);
    }
var xRangeMapping = new int[] { 0, 10, 20, 26, 36, 60, 72, 84 };
var yRangeMapping = new int[] { 100, 250, 390, 410, 600 };
var heatmapDataSeries = NonUniformHeatmapDataSeries<int, int, double>(data, i => xRangeMapping[i], i => yRangeMapping[i]);

// Apply the Heatmap DataSeries to a FastNonUniformheatmapRenderableSeries
var heatmapRenderableSeries = new FastUniformHeatmapRenderableSeries()
 {      
     ColorMap = new HeatmapColorPalette()
    {
        Maximum = maxValue,
        Minimum = 0,
        GradientStops = // exercise left to the reader
    }
 };
  • Anil Soman asked 5 years ago
  • last active 5 years ago
1 vote
2k views

I am trying to add an axis annotation to a heatmap legend. When this annotation is dragged, the color mapping of the heatmap series and the heatmap legend will be changed. How can I modify the colorMap.gradientStops of the heatmap series and the heatmap legend while the chart is running?

  • Quyen Sy asked 1 year ago
  • last active 1 year ago
0 votes
10k views

I have two questions on rollover modifier.

One is the tooltip of the rollover is right under the finger on a heatmap chart. Can I move it to the top left section of the touch point?

Second question is how can I implement a callback function whenever Y axis of the rollover modifier changes?

Thanks for your attention in advance.

  • Gang Xu asked 4 years ago
  • last active 4 years ago
0 votes
6k views

I am developing android app where i received data from pressure sensor(attached to arduino) and want to show it in scichart heatmap. i created succesfully scichart heatmap with IPaletteProvider. Now i want to update the heatmap with pressure sensor but currently i am unable to update my heatmap. Here is my Whole(PressureActivity code)code.

if (intent.getAction().equals(Constants.DATA)) {
String data = intent.getStringExtra(“DATA”);
if (data.contains(“ccccc”)) {
int index = data.indexOf(‘/’);
int indexx = data.indexOf(‘#’);
String d = data.substring((index + 1), indexx);
DoubleValues doubleValues=new DoubleValues(1);
doubleValues.add(Double.parseDouble(d));
dataSeries.updateZValues(doubleValues);
}
}

The above code is piece of android code where i actually received data from arduino and want to show it in heatmap so i update my dataSeries value. In my case
i use UniformHeatmapDataSeries<Integer, Integer, Double> dataSeries
But it did not work and shows only a rectangal of blue color and not updating with coming data.
Any one have any idea how to fix it.Thanks in advance.

  • mtg khan asked 6 years ago
  • last active 6 years ago
0 votes
8k views

Hello
Do heatmap dataseries support logarithmic axes? i have a heatmap chart and a line (pic 1), which need to be drawn in logarithmic scale, but i get no heatmap chart and the line is drawn correctly (pic 2) when switch axis type to logarithmic. Something i’m likely to get is on pic 3 .
thanks in advance

0 votes
8k views

I have created a SciChartSurface with the width of 200 px. I have created a data series with data that corresponds to four vertical lines at 0 %, 25 %, 50 % and 75 % of width. When I set the data series’ width to 115 points all four vertical lines are clearly visible. However when I set the width to 116 points or more, the first line (at x == 0) disappears. Data series is still smaller than the renderable series width in px, so there is no reason for any of the vertical lines to go missing. Is this a bug, or did I configure something wrong?

Here is the xml layout:

<com.scichart.charting.visuals.SciChartSurface
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/chart"
    android:layout_width="200px"
    android:layout_height="match_parent"/>

Here is the code for MainActivity:

import android.os.Bundle
import android.support.v7.app.AppCompatActivity
import com.scichart.charting.model.dataSeries.UniformHeatmapDataSeries
import com.scichart.charting.visuals.SciChartSurface
import com.scichart.charting.visuals.renderableSeries.ColorMap
import com.scichart.drawing.utility.ColorUtil
import com.scichart.extensions.builders.SciChartBuilder
import kotlin.math.roundToInt

const val WIDTH = 116
const val HEIGHT = 50

class MainActivity : AppCompatActivity()
{
    override fun onCreate(savedInstanceState: Bundle?)
    {
        super.onCreate(savedInstanceState)

        SciChartSurface.setRuntimeLicenseKey(getString(R.string.sciChart_license))
        SciChartBuilder.init(this)

        setContentView(R.layout.activity_main)

        val chartSurface = findViewById<SciChartSurface>(R.id.chart)
        val chartBuilder = SciChartBuilder.instance()

        val xAxis = chartBuilder.newNumericAxis().build()
        val yAxis = chartBuilder.newNumericAxis().build()

        val dataSeries = UniformHeatmapDataSeries<Int, Int, Int>(Int::class.javaObjectType, Int::class.javaObjectType, Int::class.javaObjectType, WIDTH, HEIGHT)
        for (x in 0 until WIDTH)
        {
            for (y in 0 until HEIGHT)
            {
                val value = when (x)
                {
                    0,
                    (0.25 * WIDTH).roundToInt(),
                    (0.5 * WIDTH).roundToInt(),
                    (0.75 * WIDTH).roundToInt() -> 50
                    else                        -> 0
                }
                dataSeries.updateZAt(x, y, value)
            }
        }

        val series = chartBuilder.newUniformHeatmap()
            .withColorMap(ColorMap(intArrayOf(ColorUtil.DarkBlue, ColorUtil.CornflowerBlue, ColorUtil.DarkGreen, ColorUtil.Chartreuse, ColorUtil.Yellow, ColorUtil.Red), floatArrayOf(0f, 0.2f, 0.4f, 0.6f, 0.8f, 1f)))
            .withDataSeries(dataSeries)
            .build()

        chartSurface.suspendUpdates().use {
            chartSurface.xAxes.add(xAxis)
            chartSurface.yAxes.add(yAxis)
            chartSurface.renderableSeries.add(series)
        }
    }
}
0 votes
0 answers
6k views

Hi,

I am playing with the heatmap chart and stumbled upon an IndexOutOfRange exception when updating the chart.

I initialise my chart where Height=2 and Width=3:

var data = new double[Height, Width]; // 2 rows, 3 columns
double d = 0.0;
for (int y = 0; y < Height; y++)
{
    for (int x = 0; x < Width; x++)
    {
        data[y, x] = d++;
    }
}

heatmapSeries.DataSeries = new UniformHeatmapDataSeries<int, int, double>(data, 0, 1, 0, 1);

Calling the following line returns 5 which is equivalent to getting the value with data[1,2] (all good so far):

dataseries.GetZValue(yIndex: 1, xIndex: 2);

Now let’s update that value to, say 7.1, with:

dataseries.UpdateZValue(xIndex: 2, yIndex: 1, zValue: 7.1);

Executing the above line throws an IndexOutOfRangeException. Looking at the source code, the UpdateZValue() method does:

_zValues[xIndex, yIndex] = zValue;
// ...

No wonder why the exception gets thrown… I reckon it should be _zValues[yIndex, xIndex] = zValue; (xIndex and yIndex swapped).

0 votes
0 answers
6k views

I’m trying to use the VertexSelectionModifier3D inside the example on Heatmap 3D with orthogonal camera. I also tried to follow the usage of said modifier through the “Simple Select Scatter Point 3D Chart” but am unable to make it work.

Of course, there isn’t an IsSelected property in the UniformGridDataSeries3D values, but it even doesn’t hit the DataSeriesChanged event when left clicking in the chart.

Here’s the usage:

< sc3D:VertexSelectionModifier3D ExecuteOn=”MouseLeftButton” ExecuteWhen=”None” >< /sc3D:VertexSelectionModifier3D >

I need to be able to select points (x,y,z) in the heatmap 3D.

Thank you very much.

Regards,
Sebastian

0 votes
11k views

Hi,

Is there any way to get back the 2D data array from the Heatmap2DArrayDataSeries object?

Full of hope for positive answer,
Mark

1 vote
2k views

I am implementing a heatmap. The data size of the heatmap would be changed. When the data size changed, I will replace the zValues of the UniformHeatmapDataSeries with an updated array. But it doesn’t work for me. The heatmap data cannot be plotted after I updated the zValues array. Below are my codes to create the heatmap and update the zValues array.

Draw heatmap:

    const { sciChartSurface, wasmContext } = await SciChartSurface.create("spectrogram-chart-root");
    let xAxisNumberRange = new NumberRange(minFreq/maxFreq);

    spectrogram_xAxis.current = new NumericAxis(wasmContext, {
        axisTitle: "Frequency",
        axisTitleStyle: {
            fontSize: CHART_STYLE.AXIS_FONT_SIZE,
            fontFamily: "sans-serif",
            fontWeight: "bold"
        },
        labelStyle: {
            fontSize: CHART_STYLE.LABEL_FONT_SIZE,
            fontFamily: "sans-serif"
        },
        visibleRange: xAxisNumberRange,
        visibleRangeLimit: xAxisNumberRange,
        zoomExtentsRange: xAxisNumberRange,
        labelFormat: ENumericFormat.Decimal,
        labelPrecision: 2,
        cursorLabelFormat: ENumericFormat.Decimal,
        cursorLabelPrecision: 2,
        drawMajorBands: false,
    });

    // Add XAxis and YAxis
    sciChartSurface.xAxes.add(spectrogram_xAxis.current);
    sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { isVisible: false }));

    // Create a Heatmap Data-series. Pass heatValues as a number[][] to the UniformHeatmapDataSeries
    spectrogramZValues.current = Array.from(Array(SPECTROGRAM_HEIGHT), () => Array(SPECTROGRAM_WIDTH).fill(-200));
    heatmapDataSeries.current = new UniformHeatmapDataSeries(wasmContext, {
        xStart: 0,
        xStep: 1,
        yStart: 0,
        yStep: 1,
        zValues: spectrogramZValues.current
    });

    colorMap.current = new HeatmapColorMap({
        minimum: -200,
        maximum: -50,
        gradientStops: gradientStopsArr.current
    });

    // Create a Heatmap RenderableSeries with the color map. ColorMap.minimum/maximum defines the values in
    // HeatmapDataSeries which correspond to gradient stops at 0..1
    const heatmapSeries = new UniformHeatmapRenderableSeries(wasmContext, {
        dataSeries: heatmapDataSeries.current,
        useLinearTextureFiltering: true,
        isSorted: true, 
        isEvenlySpaced: true, 
        containsNaN: false,
        colorMap: colorMap.current
    });

    // Add heatmap to the chart
    sciChartSurface.renderableSeries.add(heatmapSeries);

Update heatmap data:

        // Update the chart x-axis
        if (xAxisUpdateRequired) {
            let xAxisNumberRange = new NumberRange(newStartFreq, newStopFreq);
            spectrogram_xAxis.current.visibleRange = xAxisNumberRange;
            spectrogram_xAxis.current.visibleRangeLimit = xAxisNumberRange;
            spectrogram_xAxis.current.zoomExtentsRange = xAxisNumberRange;  

            // Reset the heatmap zValues
            heatmapDataSeries.current.clear();
            spectrogramZValues.current = Array.from(Array(SPECTROGRAM_HEIGHT), () => Array(newSampleSize).fill(-200));
            heatmapDataSeries.current.setZValues(spectrogramZValues.current);
        }
        // Update heatmap data
        spectrogramZValues.current.shift();
        spectrogramZValues.current.push(newSpecData);
        heatmapDataSeries.current.notifyDataChanged();
  • Quyen Sy asked 11 months ago
  • last active 11 months ago
0 votes
11k views

Hi,
I have the necessity to allow the user to draw one or several polygons upon a heatmap chart to let him select the region he is interested in. See attached image.

I don’t want to selected the markers inside the drawn polygon, only to know the coordinates (in data coordinates, not screen) of the various point that define the polygon.
I saw that the way to do this is to use Annotations however it’s not clear to me if is it possible to have the same behaviour of the BoxAnnotation but with a polygon (without any side number limit)?

Thank you,

Raphael

Showing 1 - 50 of 70 results

Try SciChart Today

Start a trial and discover why we are the choice
of demanding developers worldwide

Start TrialCase Studies