Pre loader

Tag: dataseries

Welcome to the SciChart Forums!

  • Please read our Question Asking Guidelines for how to format a good question
  • Some reputation is required to post answers. Get up-voted to avoid the spam filter!
  • We welcome community answers and upvotes. Every Q&A improves SciChart for everyone

WPF Forums | JavaScript Forums | Android Forums | iOS Forums

1 vote
6k views
  1. SciChartSurface created with category x and numeric y axes
  2. ZoomPanModifier, ZoomExtentsModifier, MouseWheelZoomModifier, RolloverModifier added.
  3. Any series and dataSeries are initialized and added to the surface, but not filled with values yet.
  4. Value streaming started with delay.

The first error occurs when trying to zoom on empty surface :

Uncaught TypeError: Cannot read properties of undefined (reading 'width')
at MouseWheelZoomModifier2.ChartModifierBase2D2.growBy (ChartModifierBase2D.js:121:48)

And the other one when trying to drag:

Uncaught Error: category x axis with id=DefaultAxisId should have data series count > 0
at CategoryAxis2.CategoryAxisBase2.getCurrentCoordinateCalculatorInternal (CategoryAxisBase.js:95:19)

I have seen errors similar to the second one in other scenarios and sometimes it is fatal.
E.g i have tried to add annotation right after first value was added and first line raised similar error:

    const xCalc = this.surface.xAxes.get(0).getCurrentCoordinateCalculator() as CategoryCoordinateCalculator;
    const realX = xCalc.transformDataToIndex(time);
    const target = this.getOrAddAnnotation();
    target.x1 = realX;
    target.y1 = value;

Also getCurrentCoordinateCalculatorInternal error occurs when empty series & seriesData added without suspend.
I would appreciate any help and clarification

1 vote
5k views

Hi,
I am getting an error for “Data has been Appended to a DataSeries which is unsorted in the X-Direction” and trying “to disable this warning and allow unsorted data, by seting DataSeries.AcceptsUnsortedData = true”. I am trying to place this is Data series but its not working. Can you please guide me where I can set this and it doesnot throw an error for unsorted data.

0 votes
15k views

Hi,

I have a question concerning multithreaded access to the DataSeries:

We implemented an overview for our chart as described here. This works fine when we load data, add it to the series and then display it.

Now, for a certain use case we need to display live data. We implemented this in a background thread. We noticed that after some time the application freezes when the update frequency rises. In the documentation I found this:

NOTE: Considerations when a DataSeries is shared across multiple chart surfaces. Currently only a single parent chart is tracked, so DataSeries.SuspendUpdates() where the DataSeries is shared may have unexpected results.

I guess this is what is happening here…so what is the recommended approach to achieve something like this? Do we have to add the data on the UI thread if we want to have the Overview? Here it says:

When appending Data in a background thread, you cannot share a DataSeries between more than one SciChartSurface. You can still share a DataSeries between more than one RenderableSeries.

Does that mean we should create more different RenderableSeries for the main chart surface and the overview surface that are based on the same DataSeries? Any help would be appreciated!

0 votes
8k views

I have created a SciChartSurface with the width of 200 px. I have created a data series with data that corresponds to four vertical lines at 0 %, 25 %, 50 % and 75 % of width. When I set the data series’ width to 115 points all four vertical lines are clearly visible. However when I set the width to 116 points or more, the first line (at x == 0) disappears. Data series is still smaller than the renderable series width in px, so there is no reason for any of the vertical lines to go missing. Is this a bug, or did I configure something wrong?

Here is the xml layout:

<com.scichart.charting.visuals.SciChartSurface
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/chart"
    android:layout_width="200px"
    android:layout_height="match_parent"/>

Here is the code for MainActivity:

import android.os.Bundle
import android.support.v7.app.AppCompatActivity
import com.scichart.charting.model.dataSeries.UniformHeatmapDataSeries
import com.scichart.charting.visuals.SciChartSurface
import com.scichart.charting.visuals.renderableSeries.ColorMap
import com.scichart.drawing.utility.ColorUtil
import com.scichart.extensions.builders.SciChartBuilder
import kotlin.math.roundToInt

const val WIDTH = 116
const val HEIGHT = 50

class MainActivity : AppCompatActivity()
{
    override fun onCreate(savedInstanceState: Bundle?)
    {
        super.onCreate(savedInstanceState)

        SciChartSurface.setRuntimeLicenseKey(getString(R.string.sciChart_license))
        SciChartBuilder.init(this)

        setContentView(R.layout.activity_main)

        val chartSurface = findViewById<SciChartSurface>(R.id.chart)
        val chartBuilder = SciChartBuilder.instance()

        val xAxis = chartBuilder.newNumericAxis().build()
        val yAxis = chartBuilder.newNumericAxis().build()

        val dataSeries = UniformHeatmapDataSeries<Int, Int, Int>(Int::class.javaObjectType, Int::class.javaObjectType, Int::class.javaObjectType, WIDTH, HEIGHT)
        for (x in 0 until WIDTH)
        {
            for (y in 0 until HEIGHT)
            {
                val value = when (x)
                {
                    0,
                    (0.25 * WIDTH).roundToInt(),
                    (0.5 * WIDTH).roundToInt(),
                    (0.75 * WIDTH).roundToInt() -> 50
                    else                        -> 0
                }
                dataSeries.updateZAt(x, y, value)
            }
        }

        val series = chartBuilder.newUniformHeatmap()
            .withColorMap(ColorMap(intArrayOf(ColorUtil.DarkBlue, ColorUtil.CornflowerBlue, ColorUtil.DarkGreen, ColorUtil.Chartreuse, ColorUtil.Yellow, ColorUtil.Red), floatArrayOf(0f, 0.2f, 0.4f, 0.6f, 0.8f, 1f)))
            .withDataSeries(dataSeries)
            .build()

        chartSurface.suspendUpdates().use {
            chartSurface.xAxes.add(xAxis)
            chartSurface.yAxes.add(yAxis)
            chartSurface.renderableSeries.add(series)
        }
    }
}
0 votes
8k views

Hello everybody.

What is the best way to pass 3 y-values to single x-value?

Currently i’m using XyyDataSeries + XyDataSeries

Don’t know, if it’s best approach?

0 votes
5k views

To whom this may concern:

I would like to create a custom data series where I can manipulate the X-Values more efficiently for a ColumnRenderableSeries, where if I remove a column from the chart or there is a gap in the data, I won’t have any spaces between any of the columns in the chart. I also haven’t found any documentation on creating a custom data series.

My approach is to treat the X values like a stack.
– If a point is appended, a value is pushed to the X values stack and the Y values list.
– If a point is to be removed using RemoveAt(), it only removes the Y-Axis value from the index and pops the X values stack so the order and spacing of the x-values remain the same.

This is similar to Microsoft Excel, where removing a data row linked to a chart deletes the X-axis value instead of leaving a gap.

My thinking is making the following derivation of XYDataSeries (in C# pseudocode):

ColumnDataSeries<TY> : XyDataSeries<int, TY> where TY : IComparable
{
    Stack<IComparable> XValues { get; set; }
    IList<IComparable> YValues { get; set; }

    Append (T value) 
    {
        XValues.Push (XMax + 1);
        YValues.Add (value);
    }

    RemoveAt (int index) 
    {
        XValues.Pop ();
        YValues.RemoveAt (index);
    }
}

Can you please advise or provide any documentation for this?

Thank you, and best regards!

— Ari

Edit: Sorry if the code doesn’t look right, I don’t know how to properly wrap C# code on the forums.
Edit 2: Second attempt at posting code. Should see the generics now.

  • Ari Sagiv asked 5 years ago
  • last active 5 years ago
0 votes
8k views

Sorry for the simple question and please point me to the correct place if I have missed this in the docs.

I am just trying to easily bind the DataSeries of a FastLineRenderableSeries as a custom UserControl.

In my MainView I have placed the custom control:

<customUserControls:CustomLineChart x:Name="CustomLineChart1"
                                                    Grid.Column="1"
                                                    Grid.Row="0" />

My CustomLineChart.xaml is:

 <Grid>
    <sci:SciChartSurface x:Name="simpleLineChart">
        <sci:SciChartSurface.RenderableSeries>
            <sci:FastLineRenderableSeries x:Name="lineRenderSeries"
                                          Stroke="Blue"
                                          StrokeThickness="2" >
            </sci:FastLineRenderableSeries>
        </sci:SciChartSurface.RenderableSeries>

        <!--  Create an X Axis with GrowBy  -->
        <sci:SciChartSurface.XAxis>
            <sci:NumericAxis DrawMajorBands="True"
                             GrowBy="0.1, 0.1" />
        </sci:SciChartSurface.XAxis>

        <!--  Create a Y Axis with GrowBy. Optional bands give a cool look and feel for minimal performance impact  -->
        <sci:SciChartSurface.YAxis>
            <sci:NumericAxis DrawMajorBands="True"
                             GrowBy="0.5, 0.5" />
        </sci:SciChartSurface.YAxis>
    </sci:SciChartSurface>

    <!--ect.....-->

</Grid>

I am trying to figure out how to bind the UserControl lineRenderSeries.DataSeries property in my MainViewModel

So something like this in my MainView.cs:

public partial class MainView : Window
{
    public MainView(MainViewModel vm, IMainFactory mainFactory)
    {
        InitializeComponent();
        DataContext = vm;

        CustomLineChart1.lineRenderSeries.DataSeries = vm.SomeXyDataSeries;
    }
}

Which works if the SomeXyDataSeries is set prior to this object getting created and does not update because it is not bound

Or something like this in my MainView.xaml

<customUserControls:SimpleLineChart x:Name="CoreStrategyPLGraph"
                                                    Grid.Column="1"
                                                    Grid.Row="0" 
                                                    DataSeries="{Binding SomeXyDataSeries}"/>

I have just been having an issue understanding how to properly set up this binding on the UserControl.

Any input/clarification on how to do this would be great!

Thank you,

  • Leland asked 4 years ago
  • last active 4 years ago
0 votes
10k views

Is there an efficient way to append a subset of an array to a DataSeries? Manually looping with Append is slow (as expected). Iterating over an IEnumerable introduces overhead. I’ve read in the performance tips and tricks section that “Arrays have the biggest impact as these can be indexed using unsafe code”. The help documentation doesn’t list an Append overload specifically for an array so I assume the type is checked within the method.

I am reusing arrays whenever possible; however, my arriving data is not always the same length. In order to reduce allocations and garbage collection, I make use of Memory, Span, and ArraySegment elsewhere in my project. This allows me to pool and reuse memory. I have not found any DataSeries.Append overloads that would accept any of these types or otherwise allow me to specify the usable range of the array. Please let me know if I’ve overlooked something.

Thank you.

0 votes
7k views

I want to build a Stacked Column Side by Side Chart by referring to the reference here.

My code:

export class OutputAmplitudeComponent implements OnInit, OnDestroy {

yValues:any;
x:any;

constructor(@Inject(SETTING_SERVICE) private settingService: SettingService, private cdr: ChangeDetectorRef) {}

ngOnInit() {        
                this.settingService.registerSetting(OutputAmpSetting).pipe(takeUntil(this.ngUnsubAmplitudeData)).subscribe(setting => {
                    const OutputAmplitudeData = setting.value;

                    for (let x = 1; x < this.numberOfOutput; x++) {
                        if (this.OutputMode === 'Voltage') {
                            if (phaseNum === 1) {
                                this.ampSource.data[x-1].voltage1 = OutputAmplitudeData[x];
                            } else if (phaseNum === 2) {
                                this.ampSource.data[x-1].voltage2 = OutputAmplitudeData[x];
                            } else if (phaseNum === 3) {
                                this.ampSource.data[x-1].voltage3 = OutputAmplitudeData[x]; 
                            }
                        } else if (this.OutputMode === 'Current') {
                            if (phaseNum === 1) {
                                this.ampSource.data[x-1].current1 = OutputAmplitudeData[x];
                            } else if (phaseNum === 2) {
                                this.ampSource.data[x-1].current2 = OutputAmplitudeData[x];
                            } else if (phaseNum === 3) {
                                this.ampSource.data[x-1].current3 = OutputAmplitudeData[x];
                            }
                        }
        this.sciChartInit();
                    }   
                });
            }   

xValues = this.x;

phase1:number = parseFloat(this.ampSource.data[this.x-1].voltage1);
phase2:number = parseFloat(this.ampSource.data[this.x-1].voltage2);
phase3:number = parseFloat(this.ampSource.data[this.x-1].voltage3);

async sciChartInit() {

    const { wasmContext, sciChartSurface } = await SciChartSurface.create("chart");
    const xAxis = new NumericAxis(wasmContext);
    xAxis.labelProvider.numericFormat = ENumericFormat.Decimal_0;
    sciChartSurface.xAxes.add(xAxis);
    const yAxis = new NumericAxis(wasmContext);
    sciChartSurface.yAxes.add(yAxis);

    const dataSeries1 = new XyDataSeries(wasmContext, { xValues:this.x, yValues:this.phase1, dataSeriesName: "Phase 1" });
    const dataSeries2 = new XyDataSeries(wasmContext, { xValues:this.x, yValues:this.phase2, dataSeriesName: "Phase 2" });
    const dataSeries3 = new XyDataSeries(wasmContext, { xValues:this.x, yValues:this.phase3, dataSeriesName: "Phase 3" });

    const rendSeries1 = new StackedColumnRenderableSeries(wasmContext);
    rendSeries1.fill = "#dc443f";
    rendSeries1.stroke = "black";
    rendSeries1.strokeThickness = 1;
    rendSeries1.dataSeries = dataSeries1;
    rendSeries1.rolloverModifierProps.markerColor = "#b83735";
    rendSeries1.rolloverModifierProps.tooltipColor = "#dc443f";
    rendSeries1.rolloverModifierProps.tooltipTextColor = "#fff";
    rendSeries1.stackedGroupId = "one";

    const rendSeries2 = new StackedColumnRenderableSeries(wasmContext);
    rendSeries2.fill = "#aad34f";
    rendSeries2.stroke = "black";
    rendSeries2.strokeThickness = 1;
    rendSeries2.dataSeries = dataSeries2;
    rendSeries2.rolloverModifierProps.markerColor = "#87a73e";
    rendSeries2.rolloverModifierProps.tooltipColor = "#aad34f";
    rendSeries2.rolloverModifierProps.tooltipTextColor = "#000";
    rendSeries2.stackedGroupId = "two";

    const rendSeries3 = new StackedColumnRenderableSeries(wasmContext);
    rendSeries3.fill = "#8562b4";
    rendSeries3.stroke = "black";
    rendSeries3.strokeThickness = 1;
    rendSeries3.dataSeries = dataSeries3;
    rendSeries3.rolloverModifierProps.markerColor = "#715195";
    rendSeries3.rolloverModifierProps.tooltipColor = "#8562b4";
    rendSeries3.rolloverModifierProps.tooltipTextColor = "#fff";
    rendSeries3.stackedGroupId = "three";

    const verticallyStackedColumnCollection = new StackedColumnCollection(wasmContext);
    verticallyStackedColumnCollection.dataPointWidth = 0.5;
    verticallyStackedColumnCollection.add(rendSeries1, rendSeries2, rendSeries3);
    verticallyStackedColumnCollection.animation = new ScaleAnimation({ duration: 1000, fadeEffect: true });

    sciChartSurface.renderableSeries.add(verticallyStackedColumnCollection);

    sciChartSurface.chartModifiers.add(new ZoomExtentsModifier(), new ZoomPanModifier(), new MouseWheelZoomModifier());

    sciChartSurface.zoomExtents();

    sciChartSurface.chartModifiers.add(new RolloverModifier({ rolloverLineStroke: "#228B22" }));
    sciChartSurface.chartModifiers.add(
        new LegendModifier({
            placement: ELegendPlacement.TopRight,
            orientation: ELegendOrientation.Horizontal,
            showLegend: true,
            showCheckboxes: true,
            showSeriesMarkers: true
        })
    );
    return { wasmContext, sciChartSurface };
} }

.
Error:

ERROR in output-amplitude.component.ts: - error TS2322: Type 'number' is not assignable to type 'number[]'.
const dataSeries1 = new XyDataSeries(wasmContext, { xValues:this.x, yValues:this.phase1, dataSeriesName: "Phase 1" });                                                                     
node_modules/scichart/Charting/Model/XyDataSeries.d.ts:
yValues?: number[]; 
The expected type comes from property 'yValues' which is declared here on type 'IXyDataSeriesOptions'

.
.
I tried to parse the variables to numbers by using parseFloat in phase1 to phase3 but it did not solve error in yValues.
Any idea on the solution?

  • ETS Ong asked 3 years ago
  • last active 3 years ago
0 votes
16k views

I want to build a column chart but I got the following error:

ERROR TypeError: Cannot read property ‘append’ of undefined

The error happened in line #42.

My code:

export class OutputAmplitudeComponent implements OnInit, OnDestroy {

constructor(@Inject(SETTING_SERVICE) private settingService: SettingService, private cdr: ChangeDetectorRef) {}

ngOnInit() {        
                this.settingService.registerSetting(HarmonicAmpSetting).pipe(takeUntil(this.ngUnsubHarmonicData)).subscribe(setting => {
                    const OutputAmplitudeData = setting.value;

                    for (let x = 1; x < this.numberOfOutput; x++) {
                        if (this.OutputMode === 'Voltage') {
                            if (phaseNum === 1) {
                                this.ampSource.data[x-1].voltage1 = OutputAmplitudeData[x];
                            } else if (phaseNum === 2) {
                                this.ampSource.data[x-1].voltage2 = OutputAmplitudeData[x];
                            } else if (phaseNum === 3) {
                                this.ampSource.data[x-1].voltage3 = OutputAmplitudeData[x]; 
                            }
                        } else if (this.OutputMode === 'Current') {
                            if (phaseNum === 1) {
                                this.ampSource.data[x-1].current1 = OutputAmplitudeData[x];
                            } else if (phaseNum === 2) {
                                this.ampSource.data[x-1].current2 = OutputAmplitudeData[x];
                            } else if (phaseNum === 3) {
                                this.ampSource.data[x-1].current3 = OutputAmplitudeData[x];
                            }
                        }

                    }   
                    this.updateData();
                });
                this.sciChartInit();
            }   

updateData(){
    var phaseNum1 = [];
    var xData = [];
    for (let x = 1; x < this.numberOfOutput; x++) {
        if (this.ampSource.data != null && this.ampSource.data[x-1] != null) {
            phaseNum1[x - 1] = parseFloat(this.ampSource.data[x - 1].voltage1);
            xData[x - 1] = x;
            if (!isNaN(phaseNum1[x - 1])) {
                this.dataSeries1.append(x,x);
            } else {
                console.log("No num");
            }
        }
    }
}       

async sciChartInit() {

    const { wasmContext, sciChartSurface } = await SciChartSurface.create("chart");

    var phaseNum1 = [];
    var xData = [];
    this.dataSeries1 = new XyDataSeries(wasmContext);
    for (let x = 1; x < this.numberOfOutput; x++) {
        this.dataSeries1.append(x, x);
    }

    const xAxis = new NumericAxis(wasmContext);
    sciChartSurface.xAxes.add(xAxis);
    const yAxis = new NumericAxis(wasmContext);
    sciChartSurface.yAxes.add(yAxis);

    const rendSeries1 = new StackedColumnRenderableSeries(wasmContext);
    rendSeries1.fill = "#dc443f";
    rendSeries1.stroke = "green";
    rendSeries1.strokeThickness = 1;
    rendSeries1.dataSeries = this.dataSeries1;
    rendSeries1.stackedGroupId = "one";

    const verticallyStackedColumnCollection = new StackedColumnCollection(wasmContext);
    verticallyStackedColumnCollection.dataPointWidth = 0.5;
    verticallyStackedColumnCollection.add(rendSeries1);
    verticallyStackedColumnCollection.animation = new ScaleAnimation({ duration: 1000, fadeEffect: true });

    sciChartSurface.renderableSeries.add(verticallyStackedColumnCollection);
    sciChartSurface.chartModifiers.add(new ZoomExtentsModifier(), new ZoomPanModifier(), new MouseWheelZoomModifier());
    sciChartSurface.zoomExtents();

    sciChartSurface.chartModifiers.add(
        new LegendModifier({
            placement: ELegendPlacement.TopRight,
            orientation: ELegendOrientation.Horizontal,
            showLegend: true,
            showCheckboxes: true,
            showSeriesMarkers: true
        })
    );
    return { wasmContext, sciChartSurface };
}}

I don’t understand what is undefined and why.

Thank you.

  • ETS Ong asked 3 years ago
  • last active 3 years ago
0 votes
15k views

Hello,

I wonder what the most efficient way is to completely reset (clean up) a SciChartGroup? I add all kinds of panes, add data series, add renderable series on different panes. Now, with a single call I like to reset the SciChartSurface to its original state (empty). I want to have all panes removed, as well as references the sciChartGroup may hold to panes, and references the panes hold to different renderable series and data series. I tried to clear ChartPaneViewModels, an observable collection that holds objects of type BaseChartPaneViewModel (which in turn implements IChildPane and ViewModelBase) but that did not have any effect. My SciChartGroup binds via ItemsSource to ChartPaneViewModels

What is your recommendation how to best reset the whole sciChartGroup?

Thanks,
Matt

  • bbmat asked 9 years ago
  • last active 9 years ago
0 votes
11k views

Hi,

Is there any way to get back the 2D data array from the Heatmap2DArrayDataSeries object?

Full of hope for positive answer,
Mark

Showing 13 results

Try SciChart Today

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

Start TrialCase Studies