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

Answered
0
0

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?

Version
2D Pro
  • You must to post comments
Best Answer
0
0

Hi there,

XyDataSeries yValues expects an array, so you need to wrap this single value in an array, like this:

// assuming this.x and this.phase1 are a single numerical value, wrap them in array syntax [ ]
new XyDataSeries(wasmContext, { xValues: [this.x], yValues: [this.phase1], dataSeriesName: "Phase 1" });

Alternatively you can pass arrays straight to the XyDataSeries, e.g.

const xValues = [0,1,2];
const yValues = [3,4,5];
const dataSeries = new XyDataSeries(wasmContext, xValues, yValues);

What you can’t do is this:

const xValues = 0;
const yValues = 1;
const dataSeries = new XyDataSeries(wasmContext, xValues, yValues);

not without wrapping the xValues, yValues in array syntax.

Hope this helps!

-Andrew

  • ETS Ong
    Thank you @Andrew. The error is eliminated and the application can be launched.
  • Andrew Burnett-Thompson
    Great, glad to hear it! I would recommend TypeScript as a development tool – it really helps make javascript development easier
  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.