Tag: waterfall

Hello

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}"/>
...
<s:SciChartSurface.RenderableSeries>
    <s:FastUniformHeatmapRenderableSeries 
        x:Name="heatmapSeries" 
        DataSeries="{Binding Data}"
        ColorMap="{StaticResource HeatmapColorPalette}">
    </s:FastUniformHeatmapRenderableSeries>
 </s:SciChartSurface.RenderableSeries>
...

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}" />
...
<s3D:SciChart3DSurface.RenderableSeries>
    <s3D:WaterfallRenderableSeries3D
        x:Name="waterfallSeries"
        DataSeries="{Binding Data3D}"
        YColorMapping="{StaticResource GradientColorPalette}"
        SliceThickness="1">
    </s3D:WaterfallRenderableSeries3D>
</s3D:SciChart3DSurface.RenderableSeries>
...

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)

Hi,

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?

Thanks

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 SPECTROGRAM_WIDTH = 256; 
const minPower = -200;
spectrogramZValues.current = Array.from(Array(SPECTROGRAM_HEIGHT), () => Array(SPECTROGRAM_WIDTH).fill(minPower));

Update zValues array when new data come:

    spectrogramZValues.current.shift();
        spectrogramZValues.current.push(newData);

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