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


My application receives data every 30ms, every data package has a timestamp.
I am using FastUniformHeatmapRenderableSeries.

_spectrogramBuffer = new double[1024, 6144];
HeatmapDataSeries  = new UniformHeatmapDataSeries<int, int, double>(_spectrogramBuffer, 0, 1, 0, 1);

private void UpdateHeatmapSeries(IList<double> newValues, DateTime dateTime) {
     Array.Copy(_spectrogramBuffer, values.Count, _spectrogramBuffer, 0,  _spectrogramBuffer.Length - values.Count);

     for (int i = 0; i < values.Count; i++) {
         _spectrogramBuffer[1023, i] = values[i];

Can I show timestamps for data?

  • You must to post comments

Hello O Aleksandrov,

I have few additional questions for you, that will help me to better understand what you need.

[1] Are those timestamps are values on Y-Axis(or X-Axis)? If so, do you want to show them as Labels on Axis?
According to the screenshots you’ve sent it seems that you show your timeStamps as Y-Axis Labels, is it correct?
— Here we’ve used custom LabelProviders for both X and Y axes that transforms values from 0-7(Y-Axis) to days of the week, and 0-24 to some time values.

As long as you have your X and Y consistent steps you can simply calculate LabelValues on the needed axis to show the data you need.

— useful linls:
— Also you might need to place your YAxis on top of surface, so you’ll need to modify SciChartSurface template.
— If you need any further help with this, please let me know.

[2] Another way is to use ‘metadata’. You can implement your own metada, and put inside it everything you want including timestamps. and then you can use our TooltipModifier that will show any information you need on mouseover the series:
— As you can see here default tooltip will show only X, Y, and Z values, and after switching to metadata mode, tooltips were filled with the data from metadata(elephant, not elephant). You can style that tooltip to suit your needs(make text bigger, show additional data from metadata or\and x,y,z-values, etc)

–useful links:
— If you need any further help with this, please let me know.

  • You must to post comments

Hello, Nazariy Pelyushkevych,

According to the screenshots you’ve sent it seems that you show your
timeStamps as Y-Axis Labels, is it correct?

Yes, it’s correct

For example:

# |Y | X | Z
1 | 15-07-2021 07:35:08:000 | 80 | -80
1 | 15-07-2021 07:35:08:000 | 100 | -60
2 |15-07-2021 07:35:08:030 | 80 | -81
2 |15-07-2021 07:35:08:030 | 100| -59
3 |15-07-2021 07:35:08:060| 80 | -81
3 |15-07-2021 07:35:08:060 | 100| -59
xx|15-07-2021 07:35:38:xxx | 80 | -81
xx|15-07-2021 07:35:38:xxx | 100| -59

Real data X (fixed step):

[0] = {double} 91.25
[1] = {double} 91.25341796875
[2] = {double} 91.2568359375
[3] = {double} 91.26025390625

[6142] = {double} 112.2431640625
[6143] = {double} 112.24658203125

I need to show data for the last 30 seconds (user can change this value) and show unchangeable timestamp labels every 10 seconds.
I tried using TimeSpanLabelProvider

_spectrogramBuffer = new double[1024, 6144];
double xStart = XRange.Min;
double xStep  = (XRange.Max - XRange.Min) / _xBuffer.Length;
var    yStart = TimeSpan.Zero;
var    yStep  = TimeSpan.FromMilliseconds(30);

HeatmapDataSeries = new UniformHeatmapDataSeries<double, TimeSpan, double>(_spectrogramBuffer , xStart, xStep, yStart, yStep);

    public class CustomTimeSpanLabelProvider: TimeSpanLabelProvider
            public override string FormatLabel(IComparable dataValue) {
                if (dataValue is TimeSpan timeSpan) {
// I used current datetime, but I need datetime from my data package.
                    return DateTime.UtcNow.Subtract(timeSpan).ToString("HH:mm:ss");
                return null;

But I need unchangeable labels like this:

This app draws better than FastUniformHeatmapRenderableSeries. Is FastUniformHeatmapRenderableSeries the best renderable series type for this?

  <s:SciChartSurface s:VisualXcceleratorEngine.IsEnabled="True" s:VisualXcceleratorEngine.FallbackType="{x:Type s:HighQualityRenderSurface}"
                     s:VisualXcceleratorEngine.DowngradeWithoutException="True" >
            <s:FastUniformHeatmapRenderableSeries DataSeries="{Binding HeatmapDataSeries}">
  • You must to post comments

Hello there,

I’ve modified one of our Heatmap examples to achieve what you need:

  1. The idea here is: to append your RenderableSeries with the new portion of data(each portion will be equal to the value that user can change 30sec, 60sec, etc)

  2. For making your axis updating you should set your Y-Axis.AutoRange property to ‘Always’.

  3. On each tick you have to prepare a new portion of data for your heatmap and re-set it to your RenderableSeries.

  4. to give the step for your Y-Axis labels you have to turn AutoTicks=’False’ for you Y-Axis and set appropriate MajorDelta and MinorDelta values(in TimeSpan format ==>> MajorDelta=”00:00:10″ MinorDelta=”00:00:00.10″).
    useful link:,%20MinorDelta%20and%20AutoTicks.html

  1. You can use custom labelProvider to give appropriate format for your labels and also use a custom style for your labels to achieve the same look as in ‘original’ app
    useful links:

Please Find Attached:
Please try it, and if you’ll have any other questions I’ll gladly help you.

P.P.S. Sorry for a late reply, I was on a sick-leave for a few days.

  • You must to post comments
Showing 3 results
Your Answer

Please first to submit.