SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, and now iOS Charting & Android Chart Components

Welcome to the SciChart Community Forums!

Please use the forums below to ask questions about SciChart. Take a moment to read our Question asking guidelines on how to ask a good question and our support policy

We also have a tag=SciChart on where you can earn rep for your questions!


I am going through the showcase example for the spectrogram and I had a confusion on the sizeX and Y parameter of SCIUniformHeatmapDataSeries. Are these sizes as per the width and height of the surfaceChart ? I am going to plot an array of data. How do I determine the correct sizes for X and Y.
Moreover, is it necessary that the size array used for updating the dataSeries has to be (xSize*ySize)?

  • You must to post comments

Hi there,

The SizeX, SizeY in the heat map: these are sizes of the two dimensional array of values in the X and Y direction. This does not dictate the size of the SCIChartSurface -rather the surface will resize to fit its parent under normal conditions.

The array size for updating the heat map does need to be xSize * ySize. You can change the size of the array by creating a new SCIUniformHeatmapDataSeries.

Colours are mapped with a colormap of gradient stops. Please see the example here:

let stops = UnsafeMutablePointer<Float>.allocate(capacity: countColors)
stops[0] = 0.0
stops[1] = 0.2
stops[2] = 0.4
stops[3] = 0.6
stops[4] = 0.8
stops[5] = 1.0

let gradientColor = UnsafeMutablePointer<uint>.allocate(capacity: countColors)
gradientColor[0] = 0xFF00008B;
gradientColor[1] = 0xFF6495ED;
gradientColor[2] = 0xFF006400;
gradientColor[3] = 0xFF7FFF00;
gradientColor[4] = 0xFFFFFF00;
gradientColor[5] = 0xFFFF0000;

let colorMap = SCITextureOpenGL.init(gradientCoords: stops,
                                     colors: gradientColor,
                                     count: Int32(countColors))

let heatRenderableSeries = SCIFastUniformHeatmapRenderableSeries()
heatRenderableSeries.maximum = 200.0
heatRenderableSeries.minimum = 1.0
heatRenderableSeries.dataSeries = heatmapDataSeries
heatRenderableSeries.colorMap = colorMap

You can see here we create a collection of gradient stops and create a colorMap texture which is applied to the heatmapRenderableSeries.colorMap.

How these are mapped are:

  • When Z Value = heatRenderableSeries.maximum, then use the maximum color
  • When Z value = heatRenderableSeries.minimum, then use the minimum color (the first gradient stop)
  • Any value in between is linear interpolated.

Let me know if this helps!

Best regards,

  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.