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

0 votes
0 answers
457 views

I am rendering a HeatMap on WPF page using FastUniformHeatmapRenderableSeries which has 3 axes X, Y and Z. The Z values are represented with colors by defining the color palette and gradients. This works perfectly. Now there a need to define color palette in such a way that it will get applied to different parts of the map based on min and max value at that area of the map. To elaborate more, the Z values are basically representing peaks at different areas. So there can be multiple peaks distributed on the map.

What I need is that the top-most part of each peak should be shown in red color and then going down till its base with change in color like orange, yellow, green and blue based on certain range in %. The point to note here is, every peak can have its own min and max values. Peak 1 can start from Z=15 and end at Z=48 and peak 2 can start from Z=3 and end at Z=20. So the colors in the palette should get distributed equally for both these peaks. Top-most area of peak 1 and that of peak 2 should be having same color.
Is this possible in heat map? having say a conditional color palette based on multiple value ranges?

0 votes
3k views

Hi, i want to make something like that : https://i.ibb.co/617TmD2/screenshot-line.png

I have tried HorizontalLineAnnotation but i successed to have it only on bottom graph : https://i.ibb.co/qsCjjGd/screen-bot-graph.png

Here how i initialize my top graph :

@Override
public void initGraph(Context context) {
    Log.d(TAG, "initGraphs");
    SciChartSurface spectogramSciChart = new SciChartSurface(context);
    spectogram.addView(spectogramSciChart);

    xAxis = new NumericAxis(context);
    xAxis.setAutoRange(AutoRange.Always);
    xAxis.setDrawMinorTicks(false);
    xAxis.setDrawMajorBands(false);
    xAxis.setDrawMinorGridLines(false);
    xAxis.setAxisAlignment(AxisAlignment.Left);
    xAxis.setFlipCoordinates(true);
    xAxis.setAxisTitle("Frequences (KHz)");
    xAxis.setAxisTitleOrientation(AxisTitleOrientation.VerticalFlipped);
    spectogramSciChart.getXAxes().add(xAxis);


    yAxis = new NumericAxis(context);
    yAxis.setVisibleRange(new DoubleRange(startSpectrogramRange, endSpectrogramRange));
    yAxis.setDrawLabels(false);
    yAxis.setDrawMinorTicks(false);
    yAxis.setDrawMajorBands(false);
    yAxis.setDrawMinorGridLines(false);
    yAxis.setAxisAlignment(AxisAlignment.Bottom);
    yAxis.setFlipCoordinates(true);
    yAxis.setAxisTitleOrientation(AxisTitleOrientation.Horizontal);
    spectogramSciChart.getYAxes().add(yAxis);

    FastUniformHeatmapRenderableSeries f = new FastUniformHeatmapRenderableSeries();
    scichartTools.getSpectrogramDS().setStartX(0f);
    scichartTools.getSpectrogramDS().setStepX(0.9f);
    f.setDataSeries(scichartTools.getSpectrogramDS());
    f.setMaximum(100);
    f.setMinimum(-30.0);
    f.setColorMap(new ColorMap(
            new int[]{ColorUtil.Transparent, ColorUtil.DarkBlue, ColorUtil.Purple, ColorUtil.Red, ColorUtil.Yellow, ColorUtil.White},
            new float[]{0f, 0.0001f, 0.25f, 0.50f, 0.75f, 1f}
    ));

    spectogramSciChart.getRenderableSeries().add(f);
    scichartTools.getSpectrogramValues().setSize(scichartTools.getFftSize() * scichartTools.getBatchSize() * 2);

    // I add the line but it's not displayed
    HorizontalLineAnnotation horizontalLine = new HorizontalLineAnnotation(context);
    horizontalLine.setHorizontalGravity(Gravity.FILL_HORIZONTAL);
    horizontalLine.setY1(5f);
    horizontalLine.setLabelValue("Label");
    spectogramSciChart.getAnnotations().add(horizontalLine);
}

You can see at the bottom of the function that i added it, but it doesn’t work on this graph. Why ? Maybe the graph is drawing over my line ?

Thanks,
Best regards

1 vote
2k views

Hello,

I am currently developing an application of this type (spectrogram + audiostream) :
https://i.ibb.co/sPXMbf1/screenshot-framed-1.png

But i have one problem and one question :

Problem :

I generate the spectrum with this function :

    @JvmStatic
    fun generateSpectrum(shortArray: ShortArray) {
        val sw = Stopwatch()
        sw.start()
        val buffer = ShortValues(shortArray)

        val fft = Radix2FFT(buffer.size())
        val fftData = DoubleValues()

        fft.run(buffer, fftData)
        fftData.setSize(fftSize)
        val spectrogramItems = spectrogramValues.itemsArray
        val fftItems = fftData.itemsArray

        val spectrogramSize = spectrogramValues.size()
        val fftSize = fftData.size()
        val offset = spectrogramSize - fftSize

        System.arraycopy(spectrogramItems, fftSize, spectrogramItems, 0, offset)
        System.arraycopy(fftItems, 0, spectrogramItems, offset, fftSize)

        spectrogramDS.updateZValues(spectrogramValues)
        sw.stop()
        Log.v(TAG, "SPECTRUM : " + sw.elapsedTime.toString())
    }

It works very well to generate data from a shortarray (from microphone or saved shortarray). Except that, sometime when I launch replays, on average 1 in 10 replays will be very slow. As you can see, I put stopwatch to isolate the problems and it comes from this function. This function takes an average of 2 to 3 milliseconds in normal time to perform. When a replay is slow, this function takes on average between 6 and 8 milliseconds to execute.

Why? Do you have any ideas?

Question :

I can read data from a microphone as shown on the screenshot. I also know how to replay them by cleaning spectrogramDS and sending back the read data.

Now, let’s say I want to replay but in the form of :
What is not yet played is drawn in grey (so i don’t clean) and as the dataset plays back, it takes the same color as the recording. Basically, we see in advance the sound template that is being replayed but also where we are currently in the replay.
Is it possible ?

Thanks for you answer,
Wavely

0 votes
2k views

Hi, i am developping a spectogram, screenshot : https://i.ibb.co/7CPTZbg/screenshot-framed.png

I get the same result from your showcase, now there is some things i want to change but can’t resolve to know how to :
– How can i change data direction to spread from left to right ? (currently right to left)
– How can i clear FastUniformHeatmapRenderableSeries ? Method clear doesn’t work
– How can we set width of FastUniformHeatmapRenderableSeries’s layout to be fixed to a specific seconds number ? (example : there is 10 seconds of data between left and right)

Thank you,
Wavely

Showing 4 results
This template supports the sidebar's widgets. Add one or use Full Width layout.