Pre loader

Tag: waterfall

0 votes


I’ve the following problem.

We have an application where we have many spectrums (frequency or order spectrums). To get a better overview and to select one for a more detailed analysis, we would like to display them as a waterfall chart. A spectrum always has a high resolution of 32768 points. If I now display between 60 and 100 spectrums in a waterfall chart, it takes quite a long time to render this and it is almost impossible to operate the chart.

However, a high-resolution spectrum is not required for a good overview in the waterfall diagram. Therefore my idea is to resample every single spectrum to e.g. 8192 points and then display it in the waterfall diagram.

Is there a possibility to use the internal SciChart resampler (e.g. Min/Max) or do I have to develop an own algorithm for this?

Or does a similar function already exist in SciChart?


0 votes

I am trying to implement a waterfall chart with uniform heatmap. The data is updated from the top of the chart and keeps pushing the old data down. I would like to show the y-axis with time. How can I update the y-axis with updated data?

Assume the heatmap is 256 height, I created the zValues array with min value when draw the heatmap:

const minPower = -200;
spectrogramZValues.current = Array.from(Array(SPECTROGRAM_HEIGHT), () => Array(SPECTROGRAM_WIDTH).fill(minPower));

Update zValues array when new data come:


When the first data pushed to the chart. There will be one row shown in the axis with timestamp t1. When the second data comes, the top row of the y-axis should be t2 and the t1 is pushed down. When the waterfall chart is filled with 256 data, the bottom of the y-axis should be t1 and the top of the y-axis should be t256. Is it possible to implement this?

Now I am using the uniform heatmap to implement it with yStart=0 and yStep=1. I tried to add the labelProvider to the y-axis to show the timestamp of each row. I am keeping an array locally to store the timestamp of each row which will be updated with the new data. I tried to map this array and return the timestamp in the y-axis labelProvider. But it doesn’t work. The y-axis will not be refreshed when data updated.

        yAxis.labelProvider.formatLabel = (dataValue) => {
        const ts = timestampArray[dataValue];
        if (ts) {
            const timeObj = new Date(ts);
            const hours = ('0' + timeObj.getHours()).slice(-2);
            const minutes = ('0' + timeObj.getMinutes()).slice(-2);
            const seconds = ('0' + timeObj.getSeconds()).slice(-2);
            const milliseconds = ('0' + timeObj.getMilliseconds()).slice(-3);
            return `${hours}:${minutes}:${seconds}.${milliseconds}`;
        } else {
            return "";
  • Quyen Sy asked 4 months ago
  • last active 4 months ago
0 votes


I have 2 charts, a 2D Heatmap and a 3D Waterfall chart, and I want to be able to programmatically change their color palettes.

The 2D heatmap is set up like this, with the GradientStops bound to an ObservableCollection:

<s:HeatmapColorPalette x:Key="HeatmapColorPalette" Maximum="{Binding MaxValue,Mode=TwoWay}"  GradientStops="{Binding ColorPalette}"/>
        DataSeries="{Binding Data}"
        ColorMap="{StaticResource HeatmapColorPalette}">

This works as expected. When the binding changes the palette/heatmap changes.

The 3D waterfall is set up the similarly:

<s3D:GradientColorPalette x:Key="GradientColorPalette" IsStepped="False"  GradientStops="{Binding ColorPalette}" />
        DataSeries="{Binding Data3D}"
        YColorMapping="{StaticResource GradientColorPalette}"

This, when passed the same data, doesn’t render the chart.
This chart otherwise works fine if I define the GradientStops statically in the XAML.

This is the GradientStops definition (in f#):

let BlueRed = 
        new ObservableCollection<GradientStop>([
            new GradientStop(Color.FromRgb(0x00uy,0x00uy,0xFFuy),0.0)
            new GradientStop(Color.FromRgb(0xFFuy,0x00uy,0x00uy),1.0)

I am not sure what I am missing.

(edit: apologies for formatting issues in the question)

Showing 3 results

Try SciChart Today

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

Start TrialCase Studies