// Imports when using Browser Bundle
const {
SciChartSurface,
SciChartDefaults,
XyDataSeries,
FastLineRenderableSeries,
XyScaleOffsetFilter,
NumericAxis,
NumberRange,
ENumericFormat,
EAxisAlignment,
ZoomPanModifier,
ZoomExtentsModifier,
MouseWheelZoomModifier,
CustomAnnotation,
EVerticalAnchorPoint,
EHorizontalAnchorPoint,
BoxAnnotation,
ECoordinateMode,
EXyDirection
} = SciChart;
let count = 0;
let rangeNum = 0;
let dataSize = 1250;
let timerId = null;
let isDragging = false;
let sciChartSurfaceRef;
let wasmContextRef;
let powerAnnotation;
const traceSeries = [];
const dataX = Array.from({ length: dataSize }, (_, i) => i + 1);
const genDataY = () => {
return Array.from({ length: dataSize }, () => Math.floor(Math.random() * 160));
};
// Learn more about the programmatic API at
// https://www.scichart.com/javascript-chart-documentation
async function initSciChartProgrammaticApi() {
const { sciChartSurface, wasmContext } = await SciChartSurface.create("scichart-root");
const xAxesNumberRange = new NumberRange(0, dataSize);
const yAxesNumberRange = new NumberRange(0, 200);
sciChartSurface.xAxes.add(new NumericAxis(wasmContext, {
axisTitle: "Frequency (GHz)",
axisTitleStyle: {
fontSize: 12,
fontFamily: "sans-serif",
fontWeight: "bold"
},
labelStyle: {
fontSize: 12,
fontFamily: "sans-serif"
},
visibleRange: xAxesNumberRange,
zoomExtentsRange: xAxesNumberRange,
labelFormat: ENumericFormat.Decimal,
labelPrecision: 6,
cursorLabelFormat: ENumericFormat.Decimal,
cursorLabelPrecision: 6,
drawMajorBands: false,
}));
sciChartSurface.yAxes.add(new NumericAxis(wasmContext, {
axisTitle: "Power (dBm)",
axisTitleStyle: {
fontSize: 12,
fontFamily: "sans-serif",
fontWeight: "bold"
},
labelStyle: {
fontSize: 12,
fontFamily: "sans-serif"
},
autoTicks: false,
majorDelta: 10,
minorDelta: 5,
axisAlignment: EAxisAlignment.Left,
visibleRange: yAxesNumberRange,
zoomExtentsRange: yAxesNumberRange,
labelFormat: ENumericFormat.Decimal,
labelPrecision: 2,
cursorLabelFormat: ENumericFormat.Decimal,
cursorLabelPrecision: 2,
drawMajorBands: false,
}));
sciChartSurface.chartModifiers.add(new ZoomPanModifier({ isAnimated: false }));
sciChartSurface.chartModifiers.add(new ZoomExtentsModifier({ isAnimated: false }));
sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier());
sciChartSurfaceRef = sciChartSurface;
wasmContextRef = wasmContext;
addTrace(0, "#FF2E00");
xAxesNumberRange = null;
yAxesNumberRange = null;
};
const addTrace = (traceNum, color) => {
traceSeries[traceNum] = {};
traceSeries[traceNum]["xyDataSeries"] = new XyDataSeries(wasmContextRef);
traceSeries[traceNum]["offsetFilter"] = new XyScaleOffsetFilter(traceSeries[traceNum]["xyDataSeries"], { scale: 1, offset: 5 });
traceSeries[traceNum]["series"] = new FastLineRenderableSeries(wasmContextRef, {
id: traceNum,
stroke: color,
strokeThickness: 1,
dataIsSortedInX: true,
dataEvenlySpacedInX: true,
containsNaN: false,
dataSeries: traceSeries[traceNum]["offsetFilter"],
});
sciChartSurfaceRef.renderableSeries.add(traceSeries[traceNum]["series"]);
};
const updateChart = (traceNum) => {
traceSeries[traceNum]["xyDataSeries"].clear();
traceSeries[traceNum]["xyDataSeries"].appendRange(dataX, genDataY());
timerId = setTimeout(() => {
updateChart(0);
}, 100);
};
const updateXVisibleRange = (start, stop) => {
let xAxesNumberRange = new NumberRange(start, stop);
let numericAxis = sciChartSurfaceRef.xAxes.get(0);
numericAxis.visibleRange = xAxesNumberRange;
numericAxis.zoomExtentsRange = xAxesNumberRange;
xAxesNumberRange = null;
};
const startDemo = () => {
if (!timerId) {
updateChart(0);
//addMarker(600, 100);
addPowerAnnotation(400, 800);
}
};
const stopDemo = () => {
clearTimeout(timerId);
timerId = null;
};
const addMarker = (x1, y1) => {
const svgString = '<svg height="26" width="18" xmlns="http://www.w3.org/2000/svg">' +
'<polygon id="SVG_ID" fill="#000" fill-opacity="0.5" stroke="#00fc00" stroke-width="1.5" points="0,12 8,0 16,12 8,24" clip-path="url(#clip_normal)" />' +
'<clipPath id="clip_normal"><use xlink:href="#SVG_ID"/></clipPath>' +
'<text x="5" y="16" fill="#00fc00" font-weight="bold" font-size = "12">1</text>' +
'</svg>';
const markerAnnotation = new CustomAnnotation({
x1,
y1,
isEditable: true,
verticalAnchorPoint: EVerticalAnchorPoint.Center,
horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
svgString: svgString
});
sciChartSurfaceRef.annotations.add(markerAnnotation);
markerAnnotation.dragStarted.handlers.push(() => {
isDragging = true;
console.log("drag started - isDragging: ", isDragging);
});
markerAnnotation.dragEnded.handlers.push(() => {
isDragging = false;
console.log("drag ended - isDragging: ", isDragging);
});
};
const addPowerAnnotation = (x1, x2) => {
x1 = parseFloat(x1);
x2 = parseFloat(x2);
if (x1 != null && x2 != null) {
if (!powerAnnotation) {
powerAnnotation = new BoxAnnotation({
id: "powerBox",
fill: "#0d6efd30",
stroke: "#0d6efd",
strokeThickness: 1,
xCoordinateMode: ECoordinateMode.DataValue,
x1: x1,
x2: x2,
yCoordinateMode: ECoordinateMode.Relative,
y1: 0.0,
y2: 1.0,
isEditable: true,
resizeDirections: EXyDirection.XDirection,
});
sciChartSurfaceRef.annotations.add(powerAnnotation);
} else {
updatePowerAnnotation(x1, x2);
}
}
};
const removePowerAnnotation = () => {
if (powerAnnotation) {
sciChartSurfaceRef.annotations.remove(powerAnnotation);
powerAnnotation.delete();
powerAnnotation = null;
}
};
const updatePowerAnnotation =(x1, x2) => {
x1 = parseFloat(x1);
x2 = parseFloat(x2);
if (powerAnnotation && x1 != null && x2 != null) {
powerAnnotation.x1 = x1;
powerAnnotation.x2 = x2;
}
};
initSciChartProgrammaticApi();