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
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
0 votes
6k views

Hi,

I want to change the colormap so that the:
– minimum (blue) = 4095
– maximum (red) = 800

Also, I want to set 0 to either black or transparent.

I can easily change the min and max values, just wanting to change the color limit and set 0 = black.

Here is my code for creating the heatmap:

public void heatmap(){
    // Create a SciChartSurface
    SciChartSurface surface = new SciChartSurface(this);
    // Get a layout declared in "activity_main.xml" by id
    LinearLayout chartLayout = findViewById(R.id.chart_layout);
    // Add the SciChartSurface to the layout
    chartLayout.addView(surface);
    // Initialize the SciChartBuilder
    SciChartBuilder.init(this);
    // Obtain the SciChartBuilder instance
    final SciChartBuilder sciChartBuilder = SciChartBuilder.instance();
    final NumericAxis xAxis = sciChartBuilder.newNumericAxis()
            .withGrowBy(0.1, 0.1)
            .build();
    final NumericAxis yAxis = sciChartBuilder.newNumericAxis()
            .withGrowBy(0.1, 0.1)
            .build();
    final FastUniformHeatmapRenderableSeries heatmapRenderableSeries = sciChartBuilder.newUniformHeatmap()
            .withMinimum(4095)
            .withMaximum(800)
            .withCellTextStyle(sciChartBuilder.newFont().withTextSize(8).withTextColor(ColorUtil.White).build())
            .withDrawTextInCell(true)
            .withDataSeries(createDataSeries())
            .build();
    final SciChartSurface chart = surface;
    Collections.addAll(chart.getXAxes(), xAxis);
    Collections.addAll(chart.getYAxes(), yAxis);
    Collections.addAll(chart.getRenderableSeries(), heatmapRenderableSeries);
    Collections.addAll(chart.getChartModifiers(), sciChartBuilder.newModifierGroupWithDefaultModifiers().build());
}
  • Jazz Adams asked 3 years ago
  • last active 3 years ago
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
  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
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!

1 vote
3k views

I have a large data set that I can’t really load into memory at once so instead I am paging the data, grabbing only what I require plus a little buffer either side so that the graph always has something in it.

To implement paging I need to change the position at which the graph starts rendering, unfortunately it seems that it is not possible to change UniformHeatmapDataSeries.xStart as set in the constructor.

Is the only way around this to recreate the heatmap from scratch every time a new page is loaded or am I missing another trick?

1 vote
6k views

We are testing your Android Example application, andwe are trying to find out the capabilities of the 2d Heatmap chart.

I have found in your documentation that you have the “Heatmap Texture Filtering” feature, anyways I am not able to set it as true in the heatmap plot. (found on the [WPF Heatmap Chart documentation][1 )

Is this feature disabled in Android Charts?

I am trying to enable this filtering, but the modification on your example app does not compile.

I have already tried to modify other stuff on your heatmap example chart, and it works, but particularly in our application we need as a must this kind of feature. It will be finally something that helps us to decide if your SciChart library meet our requirement.

Thanks for your attention,

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
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
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
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
1 vote
2k views

I am implementing a heatmap. The data size of the heatmap would be changed. I update the UniformHeatmapDataSeries with the updated zValues according to this post.

https://www.scichart.com/questions/js/failed-to-update-the-zvalues-size-of-uniformheatmapdataseries-in-heatmap

There is no problem if I update the UniformHeatmapDataSeries with a larger size zValues array. However, when I update it with a smaller size zValues array, the heatmap width will be decrease (Please refer to my screenshots). How can I keep the heatmap always 100% width?

  • Quyen Sy asked 11 months ago
  • last active 11 months ago
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
2k views

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.

  • Quyen Sy asked 11 months ago
  • last active 11 months ago
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
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
0 votes
2k views

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

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" },
]
1 vote
2k views

Dear Andrew,

Thank you for the past answers. I have a new question. I have a heatmap with 2 line charts at its left aand top position. the top line chart plot the horizontal values where the mouse if hovering and left chart displays vertical values from the mouse position.

This is working great, but the issue is the heatmap is not always square and I am trying the aligh the line charts with the heatmap dimensions

two issues,

  1. the heatmap X/Y dimension are not always same, in fact I have a function which listens to the changing heatmap zoom factor and makes sure the X/Y are always “square” as we want to show the heatmap with square pixels. (see video #2) https://youtu.be/wXStF-7bWsw

  2. As I dynamically chage the size of the plot the… the proportion of actual chart area to axis lable changes thus varying the overlap. (see video #1) https://youtu.be/loAVpYSRJ38

Let me know if you need more information,

Best,

Pramod

1 vote
0 answers
2k views

If I have a use case, where heatmap data can be sparse in time, and I’m zooming around and panning trough the chart, it is quite possible to end up missing heatmap data, because at certain zoom levels, the heatmap lines just disappear.

Any tips to make this not happen?

Codepen showing the issue: https://codepen.io/jrfv/full/KKbrBdN

Make sure to zoom out slowly, and/or pan around, you should see one, or both lines disappearing.

I would post a video, but doesn’t seem to be allowed here, I’ll post 2 images at slightly different zoom levels then

Showing 51 - 70 of 70 results

Try SciChart Today

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

Start TrialCase Studies