Tag: Heatmap

Hello, I’ve been trying to create a SCIUniformHeatMap, but I only get a blank, black screen.
Can anyone recommend why colors and the graph aren’t showing up? Thanks

var ecmSurface: SCIChartSurface = SCIChartSurface()
var ecmDataSeries = SCIUniformHeatmapDataSeries(xType: .double, yType: .double, zType: .double, xSize: ReviewModeData.MATRIX_COLUMNS, ySize:ReviewModeData.MATRIX_ROWS)
var heatmapRenderableSeries: SCIFastUniformHeatmapRenderableSeries = SCIFastUniformHeatmapRenderableSeries()
private let countColors = 6
private var colorRGBArray: [UIColor] = [
UIColor(red: 0.0/255.0, green: 0.0/255.0, blue: 131.0/255.0, alpha: 1),
UIColor(red: 0.0/255.0, green: 0.0/255.0, blue: 255.0/255.0, alpha: 1),
UIColor(red: 0.0/255.0, green: 255.0/255.0, blue: 255.0/255.0, alpha: 1),
UIColor(red: 255.0/255.0, green: 255.0/255.0, blue: 0.0/255.0, alpha: 1),
UIColor(red: 255.0/255.0, green: 0.0/255.0, blue: 0.0/255.0, alpha: 1),
UIColor(red: 128.0/255.0, green: 0.0/255.0, blue: 0.0/255.0, alpha: 1)
]
for i in 0..<ReviewModeData.MATRIX_COLUMNS {
for j in 0 ..< ReviewModeData.MATRIX_ROWS {
ecmDataSeries.update(z: ecm2DMatrix[i][j], atX: i, y: j)
}
}
var colorZValueArray: [Double] = determineColorMapValues(clim1: 0, clim2: 1);
var colorMap = SCIColorMap(colors: colorRGBArray, andStops: colorZValueArray as [NSNumber])

//configure ECM heatmap
heatmapRenderableSeries.minimum = ReviewModeData.ECM_CLIM1
heatmapRenderableSeries.maximum = ReviewModeData.ECM_CLIM2
heatmapRenderableSeries.dataSeries = ecmDataSeries
heatmapRenderableSeries.colorMap = colorMap!

I am using UniformHeatMapDataSeries to plot a heat map in WPF/C#. However, the data is very large in size and as a result it is throwing OutOfMemoryException while populating the first parameter value of this data series. which is a two dimensional array TZ (generic).

As per definition:

public UniformHeatmapDataSeries(TZ[,] zValues, TX xStart, TX xStep, TY yStart, TY yStep, IPointMetadata[,] metadata = null);

Here I am filling this array with double[,] data.

This error is happening due to TZ double[,] is filled with very big size of data going out of max defined range of double 2D array size. Please suggest if I can replace the values of double[,] with any other data type which allow larger data.

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

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?

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

I want to create a chart like the attached image file.
I want to mark points with different colors depending on the number of data corresponding to the x and y axes.
As a result of searching, there is a HeatmapColorPalette. Is it good to use this?
If there is a more suitable chart, please introduce it.
thank you

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?

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!

I am trying to create a live updated non-uniform heatmap with uniform xStep but non-uniform yStep. But I got color mapping problem when I tried to create the non-uniform heatmap. The color showing in the chart doesn’t map with the ColorMap value. Below are my codes:

Draw the non-uniform 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: 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" },
        ]
    });

    // 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;
};

I fill the zValues array with the minimum value -200, but the data displayed in the chart is COLORS.YELLOW. I don’t understand what’s wrong.

We have a scalablecustomannotation and i have embedded a png in side the snnotation svg. currently when I zoom in on the svg it does interpolation/smoothening of the pixels by default. what would like to set is pixellated mode where there is no automatic smoothening.

Any ideas how to achieve that?

E.g. please see the video below, what you see on the right in the video is what I get from scichart. what I am trying to achieve is the effect in the left window

video