Hi,
I have added a data series and also a custom box annotation which is overlapping the data series.
But the question is I am trying to move the box annotation which drag and drop but have to clip on the data series as well.
May I know if is scichart js able to do so? Or best if I just convert it into svg and make it drag and drop will do?
- eva yeoh asked 1 year ago
- last active 1 year ago
I have a chart in the center of the page and the chart will resize according to the browser window size. When I expand the browser window, the chart will expand to fit the browser size. In this case, the chart grows downward gradually (with animation). How can I remove this animation effect when resizing the chart?
In case it’s related to my style. Here are my markup and style for reference:
//Markup
//Style
.contentPanel {
flex: 1 1 auto;
width: calc(100% – 335px);
max-height: calc(100vh – 108px);
display: flex;
flex-direction: column;
}
.chartContainer {
position: relative;
margin: 10px 0;
display: flex;
flex-direction: column;
flex: 1;
}
.scichart-root {
width: 100%;
height: 100%;
}
- Kelly Chan asked 1 year ago
- last active 1 year ago
Content description: The performance of scichart in single line rendering data is amazing. My current requirement is to render multiple lines at a time (up to 1800 lines). I hope that after loading, when moving the mouse, the tooltips for specific points will be displayed quickly. Are there similar cases for my reference?
- js scichart asked 1 year ago
- last active 1 year ago
Hello, I need to use tooltips to display information to users. However, after using the tooltip, there will be a jam after the tooltip appears and when zooming. How can I optimize the performance.
The following is the code. I use the js example: “Load 500 Series x 500 Points Performance Demo” for transformation
import { NumericAxis } from "scichart/Charting/Visuals/Axis/NumericAxis";
import { FastLineRenderableSeries } from "scichart/Charting/Visuals/RenderableSeries/FastLineRenderableSeries";
import { EllipsePointMarker } from "scichart/Charting/Visuals/PointMarkers/EllipsePointMarker";
import {
RolloverModifier,
TRolloverTooltipDataTemplate
} from "scichart/Charting/ChartModifiers/RolloverModifier";
import { ZoomPanModifier } from "scichart/Charting/ChartModifiers/ZoomPanModifier";
import { ZoomExtentsModifier } from "scichart/Charting/ChartModifiers/ZoomExtentsModifier";
import { MouseWheelZoomModifier } from "scichart/Charting/ChartModifiers/MouseWheelZoomModifier";
import { SciChartSurface } from "scichart";
import {
IXyDataSeriesOptions,
XyDataSeries
} from "scichart/Charting/Model/XyDataSeries";
import { NumberRange } from "scichart/Core/NumberRange";
import { EAutoRange } from "scichart/types/AutoRange";
import { convertRgbToHexColor } from "scichart/utils/convertColor";
// eslint-disable-next-line
SciChartSurface.useWasmFromCDN();
const divElementId = "scichart-root";
const color = "#368BC1";
const SERIES = 1500;
const POINTS = 188;
const drawExample = async (updateTimeSpans) => {
const { sciChartSurface, wasmContext } = await SciChartSurface.create(
divElementId,{ widthAspect: 3, heightAspect: 2}
);
const xAxis = new NumericAxis(wasmContext, {
visibleRange: new NumberRange(0, POINTS),
autoRange: EAutoRange.Never
});
sciChartSurface.xAxes.add(xAxis);
const dataSeriesArray= new Array(SERIES);;
const rendSeriesArray=new Array(SERIES);
const yAxis = new NumericAxis(wasmContext, {
visibleRange: new NumberRange(-5000, 5000),
autoRange: EAutoRange.Never
});
// yAxis.labelProvider.numericFormat = ENumericFormat.Decimal_0;
sciChartSurface.yAxes.add(yAxis);
for (let i = 0; i < SERIES; i++) {
const dataSeries= new XyDataSeries(wasmContext);
const rendSeries= new FastLineRenderableSeries(wasmContext, {
dataSeries,
stroke: color,
strokeThickness: 3,
pointMarker: new EllipsePointMarker(wasmContext, {
width: 5,
height: 5,
strokeThickness: 2,
fill: "white",
stroke: color
})
});
dataSeriesArray[i] = dataSeries;
rendSeriesArray[i] = rendSeries;
sciChartSurface.renderableSeries.add(rendSeries);
}
sciChartSurface.chartModifiers.add(new ZoomExtentsModifier(), new ZoomPanModifier(), new MouseWheelZoomModifier(),new RolloverModifier(wasmContext));
const loadPoints = () => {
const newTimeSpans=[];
// Start counting Points generation time
const generateTimestamp = Date.now();
const xValuesArray = new Array(SERIES);
const yValuesArray = new Array(SERIES);
const strokeArray = new Array(SERIES);
for (let i = 0; i < SERIES; i++) {
// Allocate data arrays
xValuesArray[i] = new Array(POINTS);
yValuesArray[i] = new Array(POINTS);
// Clear data, if any
dataSeriesArray[i].clear();
// Generate stroke
const r = Math.random();
const g = Math.random();
const b = Math.random();
strokeArray[i] = convertRgbToHexColor(r, g, b);
// Generate points
let prevYValue = 0;
for (let j = 0; j < POINTS; j++) {
const curYValue = Math.random() * 10 - 5;
xValuesArray[i][j] = j;
yValuesArray[i][j] = prevYValue + curYValue;
prevYValue += curYValue;
}
}
// Add the first time span: Generating 1M data points
newTimeSpans.push({
title: "Generate 500x500 Data Points",
durationMs: Date.now() - generateTimestamp
});
// Start counting batch append time
const appendTimestamp = Date.now();
for (let i = 0; i < SERIES; i++) {
dataSeriesArray[i].appendRange(xValuesArray[i], yValuesArray[i]);
rendSeriesArray[i].stroke = strokeArray[i];
}
// Add the second time span: Generation of data point
newTimeSpans.push({
title: "Append 500x500 Data Points",
durationMs: Date.now() - appendTimestamp
});
// Subscribe to sciChartSurface.rendered event,
// and calculate time duration between the append and
// the first frame after it
const firstFrameTimestamp = Date.now();
let frameIndex = 0;
let nextFramesTimestamp;
const handler = () => {
if (frameIndex === 0) {
// Add the third time span: Render the first frame
newTimeSpans.push({
title: "Render the frame",
durationMs: Date.now() - firstFrameTimestamp
});
nextFramesTimestamp = Date.now();
} else {
// Unsubscribe from sciChartSurface.rendered
updateTimeSpans(newTimeSpans);
sciChartSurface.rendered.unsubscribe(handler);
// Zoom extents at the end of performance measurement
sciChartSurface.zoomExtents();
}
setTimeout(sciChartSurface.invalidateElement, 0);
// Increment frame index
frameIndex++;
};
sciChartSurface.rendered.subscribe(handler);
};
loadPoints()
};
drawExample();
- js scichart asked 2 years ago
- last active 2 years ago
I am using NextJS with the SciChart trial license for development and suddenly got the error “SciChart: WebGL not supported! ” with Chrome. It worked fine before, and I didn’t change any codes for launching the chart. Also, it works fine with Firefox. The chrome version I am using is 107.0.5304.107.
BTW, the error is gone after I restarted my computer. Is it possible to be related to memory issue?
Below are my codes for initializing the chart:
const initSciChart = () => {
// LICENSING //
SciChartSurface.setRuntimeLicenseKey("xxx");
SciChartDefaults.enableResampling = true;
SciChartDefaults.asyncLabels = true;
SciChartDefaults.useSharedCache = true;
drawSpecChart();
};
async function drawSpecChart() {
// Create the SciChartSurface in the div 'scichart-root'
// The SciChartSurface, and webassembly context 'wasmContext' are paired. This wasmContext
// instance must be passed to other types that exist on the same surface.
let xAxesNumberRange = new NumberRange(0, 18);
let yAxesNumberRange = new NumberRange(-140, -40);
const chartDefinition = {
xAxes: [{
type: EAxisType.NumericAxis,
options: {
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,
}
}],
yAxes: [{
type: EAxisType.NumericAxis,
options: {
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,
},
}],
series: [],
modifiers: [
{ type: EChart2DModifierType.MouseWheelZoom },
{
type: EChart2DModifierType.ZoomExtents,
options: {
isAnimated: false
}
}
]
};
const { sciChartSurface, wasmContext } = await chartBuilder.build2DChart("scichart-root", chartDefinition);
xAxesNumberRange = null;
yAxesNumberRange = null;
};
- Kelly Chan asked 2 years ago
- last active 2 years ago
Hello!
Tell me what I’m doing wrong?
Here’s the code
import { NumericAxis } from "scichart/Charting/Visuals/Axis/NumericAxis";
import { FastLineRenderableSeries } from "scichart/Charting/Visuals/RenderableSeries/FastLineRenderableSeries";
import { EllipsePointMarker } from "scichart/Charting/Visuals/PointMarkers/EllipsePointMarker";
import { RolloverModifier, TRolloverTooltipDataTemplate } from "scichart/Charting/ChartModifiers/RolloverModifier";
import { ZoomPanModifier } from "scichart/Charting/ChartModifiers/ZoomPanModifier";
import { ZoomExtentsModifier } from "scichart/Charting/ChartModifiers/ZoomExtentsModifier";
import { MouseWheelZoomModifier } from "scichart/Charting/ChartModifiers/MouseWheelZoomModifier";
import { SciChartSurface } from "scichart";
import { parseColorToUIntArgb } from "scichart/utils/parseColor";
import { XyDataSeries } from "scichart/Charting/Model/XyDataSeries";
import { CategoryAxis } from "scichart/Charting/Visuals/Axis/CategoryAxis";
import { TextLabelProvider } from "scichart/Charting/Visuals/Axis/LabelProvider/TextLabelProvider";
import { Thickness } from "scichart/Core/Thickness";
import { ELabelAlignment } from "scichart/types/LabelAlignment";
const dataData=[
"2022-10-22 00:09:41",
"2022-10-22 00:19:37",
"2022-10-22 00:29:16",
"2022-10-22 00:38:51",
"2022-10-22 00:49:49",
"2022-10-22 00:59:37",
"2022-10-22 01:09:25",
"2022-10-22 01:19:26",
"2022-10-22 01:28:35",
"2022-10-22 01:38:47",
"2022-10-22 01:48:29",
"2022-10-22 01:58:30",
"2022-10-22 02:09:11",
"2022-10-22 02:18:45",
"2022-10-22 02:28:41",
"2022-10-22 02:38:38",
"2022-10-22 02:48:53",
"2022-10-22 02:59:39",
"2022-10-22 03:08:51",
"2022-10-22 03:19:00",
"2022-10-22 03:28:30",
"2022-10-22 03:38:51",
"2022-10-22 03:49:01",
"2022-10-22 03:58:35",
"2022-10-22 04:08:47",
"2022-10-22 04:19:11",
"2022-10-22 04:29:05",
"2022-10-22 04:38:39",
"2022-10-22 04:48:46",
"2022-10-22 04:58:57",
"2022-10-22 05:08:22",
"2022-10-22 05:18:30",
"2022-10-22 05:29:09",
"2022-10-22 05:38:56",
"2022-10-22 05:48:35",
"2022-10-22 05:58:34",
"2022-10-22 06:08:26",
"2022-10-22 06:18:58",
"2022-10-22 06:28:33",
"2022-10-22 06:38:56",
"2022-10-22 06:48:42",
"2022-10-22 06:58:55",
"2022-10-22 07:08:59",
"2022-10-22 07:19:03",
"2022-10-22 07:28:28",
"2022-10-22 07:38:18",
"2022-10-22 07:48:35",
"2022-10-22 07:58:18",
"2022-10-22 08:08:22",
"2022-10-22 08:18:43",
"2022-10-22 08:29:01",
"2022-10-22 08:38:59",
"2022-10-22 08:49:16",
"2022-10-22 08:59:13",
"2022-10-22 09:09:24",
"2022-10-22 09:18:36",
"2022-10-22 09:28:56",
"2022-10-22 09:39:13",
"2022-10-22 09:48:35",
"2022-10-22 09:59:14",
"2022-10-22 10:09:18",
"2022-10-22 10:19:04",
"2022-10-22 10:29:34",
"2022-10-22 10:39:14",
"2022-10-22 10:48:53",
"2022-10-22 10:58:40",
"2022-10-22 11:08:58",
"2022-10-22 11:18:47",
"2022-10-22 11:28:39",
"2022-10-22 11:39:13",
"2022-10-22 11:49:00",
"2022-10-22 11:59:13",
"2022-10-22 14:20:05",
"2022-10-22 14:29:37",
"2022-10-22 14:39:49",
"2022-10-22 14:49:41",
"2022-10-22 15:00:10",
"2022-10-22 15:09:27",
"2022-10-22 15:19:49",
"2022-10-22 15:29:41",
"2022-10-22 15:39:16",
"2022-10-22 15:49:48",
"2022-10-22 15:59:52",
"2022-10-22 16:09:29",
"2022-10-22 16:19:48",
"2022-10-22 16:29:40",
"2022-10-22 16:39:20",
"2022-10-22 16:49:57",
"2022-10-22 16:59:11",
"2022-10-22 17:09:37",
"2022-10-22 17:19:00",
"2022-10-22 17:29:21",
"2022-10-22 17:39:52",
"2022-10-22 17:49:44",
"2022-10-22 17:59:50",
"2022-10-22 18:09:38",
"2022-10-22 18:19:24",
"2022-10-22 18:29:13",
"2022-10-22 18:39:05",
"2022-10-22 18:49:09",
"2022-10-22 18:59:13",
"2022-10-22 19:09:17",
"2022-10-22 19:19:06",
"2022-10-22 19:29:37",
"2022-10-22 19:40:11",
"2022-10-22 19:49:33",
"2022-10-22 19:59:14",
"2022-10-22 20:09:07",
"2022-10-22 20:20:02",
"2022-10-22 20:29:19",
"2022-10-22 20:39:13",
"2022-10-22 20:49:43",
"2022-10-22 20:59:28",
"2022-10-22 21:08:59",
"2022-10-22 21:19:03",
"2022-10-22 21:29:14",
"2022-10-22 21:39:19",
"2022-10-22 21:49:40",
"2022-10-22 21:59:04",
"2022-10-22 22:09:33",
"2022-10-22 22:20:00",
"2022-10-22 22:30:25",
"2022-10-22 22:39:43",
"2022-10-22 22:49:13",
"2022-10-22 22:58:58",
"2022-10-22 23:09:05",
"2022-10-22 23:19:12",
"2022-10-22 23:29:49",
"2022-10-22 23:38:55",
"2022-10-22 23:49:41",
"2022-10-22 23:59:32",
"2022-10-23 00:08:34",
"2022-10-23 00:18:43",
"2022-10-23 00:29:20",
"2022-10-23 00:39:13",
"2022-10-23 00:48:30",
"2022-10-23 00:59:44",
"2022-10-23 01:08:49",
"2022-10-23 01:19:00",
"2022-10-23 01:29:22",
"2022-10-23 01:39:06",
"2022-10-23 01:49:08",
"2022-10-23 01:59:19",
"2022-10-23 02:09:28",
"2022-10-23 02:18:57",
"2022-10-23 02:28:53",
"2022-10-23 02:38:44",
"2022-10-23 02:49:12",
"2022-10-23 02:58:41",
"2022-10-23 03:09:04",
"2022-10-23 03:19:28",
"2022-10-23 03:29:23",
"2022-10-23 03:38:38",
"2022-10-23 03:49:00",
"2022-10-23 03:59:16",
"2022-10-23 04:09:13",
"2022-10-23 04:18:54",
"2022-10-23 04:29:43",
"2022-10-23 04:39:27",
"2022-10-23 04:49:12",
"2022-10-23 04:59:07",
"2022-10-23 05:09:04",
"2022-10-23 05:18:50",
"2022-10-23 05:29:20",
"2022-10-23 05:39:06",
"2022-10-23 05:49:17",
"2022-10-23 05:58:48",
"2022-10-23 06:08:46",
"2022-10-23 06:18:36",
"2022-10-23 06:29:15",
"2022-10-23 06:38:57",
"2022-10-23 06:49:23",
"2022-10-23 06:58:55",
"2022-10-23 07:09:06",
"2022-10-23 07:19:01",
"2022-10-23 07:29:09",
"2022-10-23 07:39:10",
"2022-10-23 07:49:06",
"2022-10-23 07:59:06",
"2022-10-23 08:09:07",
"2022-10-23 08:19:23",
"2022-10-24 14:19:20",
"2022-10-24 14:30:23",
"2022-10-25 11:10:12",
"2022-10-25 11:20:56",
"2022-10-28 19:19:35",
"2022-10-28 19:30:53",
"2022-10-28 19:49:34"
]
const divElementId = "scichart-root"
class MyMetadata {
static create(title, previousValue, isSelected) {
const md = new MyMetadata()
md.title = title
md.previousValue = previousValue ?? md.previousValue
md.isSelected = isSelected ?? md.isSelected
return md
}
isSelected = false
palettedStrokeRed = parseColorToUIntArgb("red")
palettedStrokeGreen = parseColorToUIntArgb("green")
constructor() {}
}
const tooltipDataTemplateRS = seriesInfo => {
const valuesWithLabels = []
// Line Series
const xySeriesInfo = seriesInfo
if (seriesInfo.pointMetadata) {
const testMd = seriesInfo.pointMetadata
valuesWithLabels.push(
testMd.title + " Previous: " + testMd.previousValue.toFixed(1)
)
}
valuesWithLabels.push(
"X: " + xySeriesInfo.formattedXValue + " Y: " + xySeriesInfo.formattedYValue
)
return valuesWithLabels
}
const color = "#368BC1"
const drawExample = async () => {
const { sciChartSurface, wasmContext } = await SciChartSurface.create(
divElementId
)
const xAxis = new CategoryAxis(wasmContext);
const labelProvider = new TextLabelProvider({
// When passed as an array, labels will be used in order
labels: dataData,
maxLength: 188
});
xAxis.labelProvider = labelProvider;
xAxis.labelStyle.alignment = ELabelAlignment.Center;
xAxis.labelStyle.padding = new Thickness(2,1,2,1);
xAxis.axisRenderer.hideOverlappingLabels = false;
xAxis.axisRenderer.keepLabelsWithinAxis = false;
sciChartSurface.xAxes.add(xAxis)
const yAxis = new NumericAxis(wasmContext)
sciChartSurface.yAxes.add(yAxis)
for (let seriesIndex = 0; seriesIndex < 5; seriesIndex++) {
const firstSeriesData = createDataSeries(wasmContext, seriesIndex, {
dataSeriesName: "Sinewave"+seriesIndex
})
const renderableSeries1 = new FastLineRenderableSeries(wasmContext, {
stroke: color,
strokeThickness: 3,
dataSeries: firstSeriesData,
pointMarker: new EllipsePointMarker(wasmContext, {
width: 5,
height: 5,
strokeThickness: 2,
fill: "white",
stroke: color
})
})
renderableSeries1.rolloverModifierProps.markerColor = color
renderableSeries1.rolloverModifierProps.tooltipColor = color
sciChartSurface.renderableSeries.add(renderableSeries1)
renderableSeries1.rolloverModifierProps.tooltipDataTemplate = tooltipDataTemplateRS
}
sciChartSurface.chartModifiers.add(new RolloverModifier())
sciChartSurface.chartModifiers.add(new ZoomPanModifier())
sciChartSurface.chartModifiers.add(new ZoomExtentsModifier())
sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier())
sciChartSurface.zoomExtents()
return { sciChartSurface, wasmContext }
}
// Generate some data, including metadata
const createDataSeries = (wasmContext, index, options) => {
const sigma = Math.pow(0.6, index)
const dataSeries = new XyDataSeries(wasmContext, options)
let prev = 0
for (let i = 0; i < 188; i++) {
const grow = 1 + i / 99
const metadata =i > 0 ? MyMetadata.create("Metadata " + i.toString(), prev) : undefined
const y = Math.sin((Math.PI * i) / 15) * grow * sigma
// metadata is an optional parameter on all data manipulation methods on dataseries,
// so it can also be added as an array eg dataSeries.appendRange(xValues, yValues, metadataArray);
dataSeries.append(i+1, y, metadata)
prev = y
}
return dataSeries
}
drawExample()
- js scichart asked 2 years ago
- last active 2 years ago
I tried to add a cursorModifier and then modify the stroke color later. But the color changes don’t work. Anything wrong with my codes?
Add cursorModified:
let cursorModifier = new CursorModifier({
crosshairStroke: #fff,
crosshairStrokeThickness: 1,
showTooltip: true,
showAxisLabels: false,
tooltipContainerBackground: "transparent",
tooltipTextStroke: #fff,
});
sciChartSurfaceRef.chartModifiers.add(cursorModifier);
Change the stroke color:
let cursorModifier = sciChartSurfaceRef.chartModifiers.get(0);
if (cursorModifier) {
cursorModifier.crosshairStroke = #333;
cursorModifier.tooltipTextStroke = #333;
}
- Kelly Chan asked 2 years ago
- last active 2 years ago
I have a real-time updated chart with multiple series. Is it possible for me to add a custom annotation to the chart by just providing the x1 value? i.e. The y1 value will be the y value of the data point in certain series with the provided x1 value. It will look like that the annotation will be sticked to the series with a fixed x1 value while the chart is updating.
- Kelly Chan asked 2 years ago
- last active 2 years ago
I am using the MouseWheelZoomModifier and ZoomExtentsModifier on the line chart. Beside double clicking the chart area to Zoom Extents the chart, I would like to add a button outside the chart and this button will trigger the Zoom Extents. Is it possible to do it?
- Kelly Chan asked 2 years ago
- last active 2 years ago
The x, y values showing in the tooltip of crosshair are rounded to 1 decimal place. How I can I modify the tooltip to show the actual x, y values? And how can I change the text font size in the tooltip?
- Kelly Chan asked 2 years ago
- last active 2 years ago
I added the cursor modifier as below:
const chartDefinition = {
......,
modifiers: [
{
type: EChart2DModifierType.Cursor,
options: { crosshairStroke: "green", crosshairStrokeThickness: 1}
},
{ type: EChart2DModifierType.MouseWheelZoom },
{ type: EChart2DModifierType.ZoomExtents }
]
};
const { sciChartSurface, wasmContext } = await chartBuilder.build2DChart("scichart-root", chartDefinition);
As I want to show the x, y values of the cursor somewhere outside the chart instead of showing the tooltip. How can I get the x, y values when the cursor moving?
- Kelly Chan asked 2 years ago
- last active 2 years ago
I am using SciChart with Next.js to create a real-time updated line chart. It works fine if there is 1 trace running with 130k datapoints. But when there are 4 traces (each with 130k datapoints) running in the chart, there is performance issue. After running for a while, this error is showing in the browser console:
“RangeError: Failed to execute ‘texImage2D’ on ‘WebGL2RenderingContext’: The ArrayBuffer/ArrayBufferView size exceeds the supported range.”
I tried to optimize the chart by following this page, but it doesn’t help on the lag issue.
https://www.scichart.com/documentation/js/current/Performance%20Tips.html
Here are my codes for updating the chart data:
if (SciChartSurface.renderableSeries.get(trace_num)) {
SciChartSurface.renderableSeries.get(trace_num).dataSeries = new XyDataSeries(WasmContext, { xValues: dataX, yValues: dataY });
} else {
const lineSeries = new FastLineRenderableSeries(WasmContext);
lineSeries.strokeThickness = 1;
lineSeries.stroke = tracesInfoRef[trace_num].color;
lineSeries.dataSeries = new XyDataSeries(WasmContext, { xValues: dataX, yValues: dataY, dataIsSortedInX: true, dataEvenlySpacedInX: true, containsNaN: false });
SciChartSurface.renderableSeries.add(lineSeries);
}
Can SciChart perform well with multiple traces which total datapoints larger than 500k? How can I fix the texImage2D error ?
- Kelly Chan asked 2 years ago
- last active 2 years ago
I tried to use the trial version of SciChart with Next.js. But I got “SciChartSurface.setRuntimeLicenseKey is not a function” error. I don’t know what’s wrong, could you provide guideline for using SciChart with Next.js?
These are the codes in my next.config.js:
const CopyPlugin = require("copy-webpack-plugin");
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
webpack: ( config, { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack } ) => {
config.plugins.push(
new CopyPlugin({
patterns: [
{ from: "node_modules/scichart/_wasm/scichart2d.data", to: "" },
{ from: "node_modules/scichart/_wasm/scichart2d.wasm", to: "" }
]
})
);
return config;
},
}
module.exports = nextConfig
And I have imported these files in pages/index.js
import {SciChartSurface} from "scichart/Charting/Visuals/SciChartSurface";
import {NumericAxis} from "scichart/Charting/Visuals/Axis/NumericAxis";
- Kelly Chan asked 2 years ago
- last active 2 years ago
I am considering applying server-side licensing for my javerScript application.
In the document below, there is a phrase “Our server-side licensing component is written in C++.”
(https://support.scichart.com/index.php?/Knowledgebase/Article/View/17256/42/)
However, there is only asp.net sample code on the provided github.
(https://github.com/ABTSoftware/SciChart.JS.Examples/tree/master/Sandbox/demo-dotnet-server-licensing)
I wonder if there is a sample code implemented in C++ for server-side licensing.
Can you provide c++ sample code?
Also, are there any examples to run on Ubuntu?
- samini retnam asked 2 years ago
- last active 2 years ago
A client responded that the line diagram drawn by scient.js on the mobile phone could not be seen.
We follow the user’s log and find that there is such content
2022/09/21 07:02:27.981 exception thrown: RuntimeError: function signature mismatch,RuntimeError: function signature mismatch
at <anonymous>:wasm-function[2101]:0x5fc72
at <anonymous>:wasm-function[1355]:0x2a029
at <anonymous>:wasm-function[2409]:0x7ef3a
at Ch (<anonymous>:wasm-function[4028]:0x12f27f)
at r._main (<anonymous>:16:687711)
at Object.Ma [as callMain] (<anonymous>:16:688823)
at <anonymous>:16:565075
2022/09/21 07:02:27.981 Could not load SciChart WebAssembly module.
Check your build process and ensure that your scichart2d.wasm, scichart2d.data and scichart2d.js files are from the same version
.
We try to reproduce many different devices. At present, it seems that only the device will happen. The following is the information of the device
- chinghung lai asked 2 years ago
- last active 1 year ago
I am trying to implement Scichart JS into a Create React App web application.
So far I have gotten it working for all the functionality I need except for a very key feature.
Is the Zoom functionality completely absent for iOS safari (touch interaction)?
If so, is there a workaround to make it work (ie manually adding pointer events to the chart surface?)
Thanks
- Deryk Richardson asked 2 years ago
Hello I am using the following unixtimestamp format for the x axis and it renders some random numbers instead of treating them as dates. What is the correct format? please see attached screenshot.
export const dateValues: number[] = [
1546300800000,
1546304400000,
1546308000000,
1546311600000,
1546315200000,
1546318800000,
1546322400000,
1546326000000,
1546329600000,
1546333200000,
1546336800000,
1546340400000,
1546344000000,
1546347600000,
1546351200000,
1546354800000,
1546358400000,
1546362000000,
1546365600000,
1546369200000,
1546372800000,
1546376400000, ]
Here’s the code for creating the chart
// Create a SciChartSurface
const { sciChartSurface, wasmContext } = await SciChartSurface.create(
"scichart-root"
);
sciChartSurface.xAxes.add(
new CategoryAxis(wasmContext, {
labelProvider: new SmartDateLabelProvider(),
defaultXStep: 1546304400000 - 1546300800000,
//growBy: new NumberRange(0.05, 0.05),
drawMajorGridLines: true,
drawMinorGridLines: true,
axisAlignment: EAxisAlignment.Bottom,
autoRange: EAutoRange.Once,
drawMajorBands: false,
})
);
- mason jackson asked 2 years ago
- last active 2 years ago
Hello,
Is it possible to access the native canvas context to draw on the javascript chart surface? like for example, draw a circle or arc using HTML5 canvas apis.
-jackson
- mason jackson asked 2 years ago
- last active 2 years ago
I have a bunch of series (XyScatterSeries) that I am using to draw different markers (triangle, circle, cross) based on the data. I also have couple line series too in the chart.
The line series should be displayed in the LegendModifier, but not any of the scatter series.
I tried setting “includeSeries” function here but that didn’t work (typescript kept complaining about it but I kept it and while running the app it didn’t hide the series):
return new LegendModifier({
showCheckboxes: true,
orientation: ELegendOrientation.Vertical,
placement: ELegendPlacement.TopRight,
includeSeries: (series: IRenderableSeries, isIncluded: boolean): void => { return false; },
});
Then I created my own class “MyLegendModifier” deriving from LegendModifier, but that didn’t do anything either.
class MyLegendModifier extends LegendModifier {
constructor(options?: ILegendModifierOptions) {
super(options);
}
includeSeries(series: IRenderableSeries, isIncluded: boolean) {
console.log('includeSeries:', series.id);
if (series.id.startsWith('BUY:') || series.id.startsWith('SELL:')) {
isIncluded = false;
}
super.includeSeries(series, isIncluded);
}
}
Any advise please.
- sachin patel asked 2 years ago
- last active 2 years ago
I am considering applying server-side licensing for my javerScript application.
In the document below, there is a phrase “Our server-side licensing component is written in C++.”
(https://support.scichart.com/index.php?/Knowledgebase/Article/View/17256/42/)
However, there is only asp.net sample code on the provided github.
(https://github.com/ABTSoftware/SciChart.JS.Examples/tree/master/Sandbox/demo-dotnet-server-licensing)
I wonder if there is a sample code implemented in C++ for server-side licensing.
Can you provide c++ sample code?
Also, are there any examples to run on Ubuntu?
- Samini Retnam asked 2 years ago
- last active 2 years ago
I have a top chart that is a heatmap and there is another bottom chart that is a temperature map. I want the heatmap not show any y-axis labels but still keep the x-axis start aligned from the left side. I tried turning off the y-axis lables (which I do not need in the heatmap), but that moves the heatmap to the left and not kept aligned with the bottom chart.
const yAxis = new NumericAxis(wasmContext, {
autoRange: EAutoRange.Always,
labelFormat: ENumericFormat.Decimal,
labelPrecision: 2,
labelPostfix: "C",
drawLabels: false
});
The above code hides the y-axis labels but also removes the space on the left side so the x-axis of both graphs does not remained aligned. I need a way to somehow keep the start of x-axis aligned for both top and bottom graphs.
- Joel Roberts asked 2 years ago
- last active 2 years ago
I have a simple need to display a horizontal heatmap based on values along the x-axis. So if value on x-axis is 1, color shown on the heatmap should be orange, if the next value is 2, red color bar appears to next the previous orange etc. Something like this (see attached graphic also):
Heatmap: [=orange=red=green]
values along x-axis: [22.05, 24.00, 30.00 ]
So the code I am trying is as follows:
export async function renderHeatMap(element)
{
const { sciChartSurface, wasmContext } = await SciChartSurface.create(element);
sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
sciChartSurface.yAxes.add(new NumericAxis(wasmContext));
var heatMapData = zeroArray2D([1, 5]);
heatMapData[0][0] = 22.05; //should appear as color1 in heatmap
heatMapData[0][1] = 24.00; //...
heatMapData[0][2] = 30.00; //should appear as color2 in heatmap
heatMapData[0][3] = 26.75;
heatMapData[0][4] = 30.00; //should appear as color3 in heatmap
const heatmapDataSeries = new UniformHeatmapDataSeries(wasmContext, 0, 1, 0, 1, heatMapData);
const heatmapSeries = new UniformHeatmapRenderableSeries(wasmContext, {
dataSeries: heatmapDataSeries,
colorMap: new HeatmapColorMap({
minimum: 20, // min value in the zValues (data) to map to offset 0 in the colormap
maximum: 30, // max value in the zValues (data) to map to offset 1 in the colormap
gradientStops: [
{ offset: 0, color: "#00008B" },
{ offset: 0.3, color: "#7FFF00" },
{ offset: 0.7, color: "#FFFF00" },
{ offset: 1.0, color: "#FF0000" },
],
}),
});
sciChartSurface.renderableSeries.add(heatmapSeries);
}
But this only displays an empty grid. I don’t see a heatmap. Anyone can point out what may be wrong? Not even the axis is showing up correctly.
- Joel Roberts asked 2 years ago
- last active 5 months ago
Hi There,
I’m new to SciChart, I have a question regarding DateTimeAxis that is it possible to display the date when plotting data based on hours for multiple days?
For example, I’m plotting data for Aug/07, Aug/06, and Aug/05, so I have 72 data points to display, but the problem is the user can see all the data based on hours however, they will not be able to see when the day has changed. Is there any way I can achieve this.
- Umer Nawaz asked 2 years ago
- last active 2 years ago
Hi,
I am using SciChart trial version to create a a simple line chart but when running an application for a while, I got this error in the dev console log – not sure what the root cause is but it seems to come from SciChart library
- Atanai W. asked 2 years ago
- last active 2 years ago
Hi,
I have an issue with Rollover modifier line styling in sci chart using java script. we need the horizontal dashed line for the rollover modifier. How is it possible?
- Ayana VS asked 2 years ago
- last active 2 years ago
Hi,
I’ve had a request from the client of our app to set logarithmic axis to have their major ticks at powers of 10, for example 0.1|1|10|100|1000|10000 – they would be expressed as 1e-1|1e0|1e1|1e2|1e3|1e4…. etc.
Is this possible within the current implantation of the logarithmic axis?
Cheers,
- Adam Stone asked 2 years ago
- last active 2 years ago
Hi,
Is it possible to either rotate a TextAnnotation, not necessarily by user interaction but even just in code to have text going vertically?
Cheers,
- Adam Stone asked 2 years ago
- last active 2 years ago
Hi,
I would like to display the rollovermodifier line that must be parallel to the X axis and the Rollovermodifier line must be a dashed line. In the y axis I need to add a label annotation with svg .How can I fix the problem. Kindly provide me the solution.
This is the code I have given,
const horizontalline = new RolloverModifier({
IsEnabled: true,
DrawVerticalLine: true,
showTooltip: false,
rolloverLineStroke: “white”,
rolloverLineStrokeThickness : 1
})
sciChartSurface.chartModifiers.add(horizontalline);
- Ayana VS asked 2 years ago
- last active 2 years ago
Hello,
We are working on our Angular Dashboard again using the JS Chart component and one item we would like to tidy up is the Meta Data displayed in the Tool Tips against data points.
When the cursor is enabled and a data point is hovered over, tool tips with the meta data is displayed for all data points in the vertical line; please refer to the screenshot attached.
We would like the tool tip to only be shown when the cursor is on a specific data point. We are currently working with an offshore team and any help surrounding this would be appreciated.
Kind regards,
- Nathan Weatherington asked 2 years ago
- last active 2 years ago
Hi
I am running Ubuntu 22.04.
I have done the following:
1. Downloaded licensing tool AppImage
2. chmod +x SciChart-Licensing-Wizard.AppImage
3. ./SciChart-Licensing-Wizard.AppImage
Response:
./SciChart-Licensing-Wizard.AppImage: 9: Syntax error: newline unexpected
Please advise.
Thanks
- Ryan van Jaarsveld asked 2 years ago
- last active 1 year ago
What languages are wrappers for the licensing server in? Where can I get information on what c++ functions to call?
- Ryan Campo asked 2 years ago
- last active 2 years ago
Hello I have been having a difficult time getting the correct time displayed on my xAxis and labels.
Passing in an xValue to an OHLC data series of 60 and the setting cursorLabelFormat: ENumericFormat.Date_DDMMHHMM this should produce a label “01/01 00:01” With the year as 1970.
When the computers timezone is set to UTC + 0 this behaves as expected.
However when the computers timezone is set to anything negative (UTC – 7) the label is formatted as “31/12 00:01” with the year 1969. If scichart is trying to convert to local time I would expect a reading of “31/12 17:01” 1969.
And when the timezone is set to anything positive (UTC + 7) the label is formatted as it is UTC +0 “01/01 00:01” 1970 again I would expect the hour to corrispond to the UTC offset if scichart is trying to convert to local time.
Looking at the later case I would assume that no time conversion is taking place which is what I would prefer. But looking at the former case (UTC -X) there appears to be some manipulation happening somewhere, I just have not been able to find any documentation explaining this. Am I missing something to get this to work properly out of the box without a custom label provider?
Thank you,
Update:
I do not want to worry about timezones. I want sciChart to plot the time that I give it. Again this is acting as expected when the computer timezone is in anything greater than UTC 0. But when the computer timezone is less than UTC 0 the label and axes are showing a date 24 hours prior to what I give it.
See attached images for the error. Note the only change that is happening is changing the computer timezone from UTC – 4 to UTC + 4.
See below for code setting up the chart.
Why is changing the computer timezone affecting the data labels?
export async function example(element) {
let { sciChartSurface, wasmContext } = chartInstances.hasOwnProperty(element.id) && chartInstances[element.id];
// initialize sciChart and add created chart to chartInstances
if (sciChartSurface === undefined) {
const newContext = await SciChartSurface.create(element.id);
sciChartSurface = newContext.sciChartSurface;
wasmContext = newContext.wasmContext;
chartInstances[element.id] = { sciChartSurface, wasmContext };
}
//create and add xAxis
let xAxis = new CategoryAxis(wasmContext, {
drawLabels: true,
drawMajorTickLines: true,
drawMinorTickLines: true,
axisAlignment: EAxisAlignment.Bottom,
autoRange: EAutoRange.Once,
cursorLabelFormat: ENumericFormat.Date_DDMMHHMM,
labelFormat: ENumericFormat.Date_DDMMYYYY,
});
sciChartSurface.xAxes.add(xAxis);
//create and add yAxis
let yAxis = new NumericAxis(wasmContext, {
maxAutoTicks: 5,
autoRange: EAutoRange.Always,
growBy: new NumberRange(0.3, 0.11),
axisAlignment: EAxisAlignment.Right,
labelPrecision: 4
});
sciChartSurface.yAxes.add(yAxis);
//add chart modifiers
sciChartSurface.chartModifiers.add(new ZoomPanModifier({ xyDirection: EXyDirection.XDirection }));
sciChartSurface.chartModifiers.add(new ZoomExtentsModifier({ xyDirection: EXyDirection.XDirection }));
sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier({ xyDirection: EXyDirection.XDirection }));
sciChartSurface.chartModifiers.add(new RolloverModifier({ modifierGroup: "first", showTooltip: false }));
sciChartSurface.chartModifiers.add(new CursorModifier(
{
crosshairStroke: "#9598a1",
crosshairStrokeDashArray: [10, 5],
}));
//apply desired theme
sciChartSurface.applyTheme(new SciChartJSDarkTheme());
//create three bars
_ohlcDataSeries = new OhlcDataSeries(wasmContext, {
xValues: [60,120,180], //1 min, 2 min, 3 min post epoch
openValues: [10,10,10],
highValues: [15,15,15],
lowValues: [5,5,5],
closeValues: [11,11,11],
dataSeriesName: "PriceDataSeries"
});
//create and style fastCandRendSeries
const fcRendSeries = new FastCandlestickRenderableSeries(wasmContext,
{
dataSeries: _ohlcDataSeries,
strokeThickness: 1,
dataPointWidth: 0.5,
brushUp: "#50ff50B2",
brushDown: "#ff5050B2",
strokeUp: "#50ff50",
strokeDown: "#ff5050",
animation: new WaveAnimation({ fadeEffect: true, duration: 800 })
});
sciChartSurface.renderableSeries.add(fcRendSeries);
}
- Leland asked 2 years ago
- last active 2 years ago
How to setup SciChart.js in React native frame work?
- Subin Raj asked 2 years ago
- last active 10 months ago
Hello,
I am attempting to get SciChart working in a Blazor Server app.
I have followed the examples here:
https://github.com/ABTSoftware/SciChart.JS.Examples/tree/master/Sandbox/demo-browser-global-module
https://github.com/ABTSoftware/SciChart.JS.Examples/blob/master/Tutorials/2D_Browser_CDN_Tutorials_JavaScript/Tutorial_2_Adding_Series_and_data/index.html
https://www.scichart.com/documentation/js/current/webframe.html#Deploying%20Wasm%20or%20WebAssembly%20and%20Data%20Files%20with%20your%20app.html
https://cdn.jsdelivr.net/npm/[email protected]/README.md
I have the following line in my “_Layout.cshtml” file in the head section:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/_wasm/scichart.browser.js" crossorigin="anonymous"></script>
In my scichart js I have:
export async function initSciChart() {
SciChart.SciChartSurface.setRuntimeLicenseKey("....");
SciChart.SciChartSurface.useWasmFromCDN();
}
However when I call this over JSInterop i get the following error:
Error: Microsoft.JSInterop.JSException: SciChart.SciChartSurface.useWasmFromCDN is not a function
TypeError: SciChart.SciChartSurface.useWasmFromCDN is not a function
at Module.initSciChart (https://localhost:7195/Pages/Strategy/StrategyMain.razor.js:33:30)
at https://localhost:7195/_framework/blazor.server.js:1:3501
at new Promise ()
at kt.beginInvokeJSFromDotNet (https://localhost:7195/_framework/blazor.server.js:1:3475)
at https://localhost:7195/_framework/blazor.server.js:1:72001
at Array.forEach ()
at kt._invokeClientMethod (https://localhost:7195/_framework/blazor.server.js:1:71987)
at kt._processIncomingData (https://localhost:7195/_framework/blazor.server.js:1:70029)
at connection.onreceive (https://localhost:7195/_framework/blazor.server.js:1:64432)
at o.onmessage (https://localhost:7195/_framework/blazor.server.js:1:48766)
at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
at Microsoft.JSInterop.JSObjectReferenceExtensions.InvokeVoidAsync(IJSObjectReference jsObjectReference, String identifier, Object[] args)
at TradeLogicBS.Web.Pages.Strategy.StrategyMain.OnAfterRenderAsync(Boolean firstRender) in D:\Repos\TradeLogicBS\TradeLogicBS\TradeLogicBS.Web\Pages\Strategy\StrategyMain.razor:line 63
at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)
How do we set this up properly to access the scichart modules in a blazor server application?
Thank you,
- Leland asked 2 years ago
- last active 2 years ago
Hi,
In my application I am hiding some of the line chart by changing the visibility. When changing the visibility the markers is not hiding from the chart. Its happening only the mouse pointer is inside the chart before the visibility change. I have created a sample application and created the video recording also. Please check the attached file for example code and video. On the video you can saw that 2 line visibility is changed and line are hidden from the chart and the markers not hiding from the chart.
- Arun Surendran asked 2 years ago
- last active 2 years ago
Hi. I’m trying to add 3DChart to my vue project. And I have a question about the configuration. Can I download .data and .wasm files from the CDN.
For 2D charts , I’ve used recomendation of your release v.2.2:
SciChartSurface.useWasmFromCDN()
It works for me. How I can use CDN for SciChart3DSurface?
- Volodymyr Stoyanovskyy asked 2 years ago
- last active 2 years ago
Hey, how would I go about adding a custom template for the cursor axis labels using the Javascript 2D chart API?
I’d like the x-axis to not just have a date in MM/DD/YYYY format but a date and time displayed. The current implementation is below, and below that is the desired implementation.
Current: https://ibb.co/qJgJ36j
Desired: https://ibb.co/XzTkDgw
I have looked through the documentation but I may have missed something. If I have, please point me in the right direction, thanks!
- NICOS TOMBROS asked 2 years ago
- last active 2 years ago
Hi,
I am facing a issue with RolloverModifier. I have multiple charts in single window. For some points the lines over the chart are missing.
Please find the attached images for some examples and the code for reproduce the issue. on the attachment you can see that the line on some chart is missing when mouse on left and right corner area of the chart.
Posting again because on latest version also the same issue not resolved.
https://www.scichart.com/questions/js/rollovermodifier-in-multiple-chart-line-missing-on-some-areas
- Arun Surendran asked 2 years ago
- last active 2 years ago
Hello,
I have a BlazorWASM app. I am wondering how to sync the x values of different renderable series that have different number of data points.
In a simple form, I am passing in the data for a moving average to be rendered on the chart that has already been populated with data. The moving average data has already been calculated and has the correct date timestamps. But when I add this series to the chart it is starting at index 0 of where the the price data started instead of where the xAxis date of this renderable series has.
I prefer not to use the filters api to regenerate this data as some will be complex and have already been calculated by study or pulled from a database. I have seen the article to offset a series but this seems unnecessary since I already have the x axis coordinate that I want each point of the new line series to be rendered.
Is there somewhere in the docs that I missed how to get these renderable series to line up properly to their own x data points?
Thank you
- Leland asked 2 years ago
- last active 2 years ago
I have combed through KB articles and other documentations and samples here and SO, but I am not able to fix the issue. I am desperate for any help.
I have a react app that shows the chart, but at the top of the page, I have a header section and the remaining height is filled with Chart. All the samples and answers that I have seen thus far has no header section on the page. So the chart is 100% filled within it’s container. But, in my case the chart does not fit its container width & height and I end up with a scroll-bar. This is especially evident when you maximize the page (Chrome maximize window).
I am on Windows 10.
I have attached the code and a screen-shot of what the resulting page in Chrome. I have tried with and without CSS and it made no difference in terms of chart filling its container.
React Code:
import { useCallback, useEffect, useState } from 'react';
import { createRoot } from 'react-dom/client';
import './Chart-styles.scss';
import { SciChartSurface } from 'scichart/Charting/Visuals/SciChartSurface';
import { NumericAxis } from 'scichart/Charting/Visuals/Axis/NumericAxis';
import { getSciChartLicense } from '../common/chartUtils';
const Chart = () => {
const [chartId] = useState('line-chart');
const initChartAsync = useCallback(async () => {
const { sciChartSurface, wasmContext } = await SciChartSurface.create(chartId);
const xAxis = new NumericAxis(wasmContext);
const yAxis = new NumericAxis(wasmContext);
sciChartSurface.xAxes.add(xAxis);
sciChartSurface.yAxes.add(yAxis);
}, []);
useEffect(() => {
SciChartSurface.setRuntimeLicenseKey(getSciChartLicense());
initChartAsync()
.catch(error => {
console.error('ChartRenderer | useEffect | initChartAsync failed!', error);
});
}, [chartId]);
return (
<div className="App">
<div className='App-header'>
<h2>Chart Header</h2>
<h3>Chart Sub-Header</h3>
</div>
<div
id={chartId}
style={{width: '100%', height: '100%'}}
/>
</div>
);
};
const container = document.getElementById('app');
const root = createRoot(container!);
root.render(<Chart/>);
Chart-Style.scss
#app {
display: flex;
flex-flow: column nowrap;
margin: 0;
padding: 0;
}
.App {
flex: 1 1 auto;
display: flex;
flex-flow: column nowrap;
text-align: center;
}
.App-header {
flex: 0 1 auto;
display: flex;
flex-flow: column nowrap;
background-color: #855b24;
color: white;
h2 {
background-color: #2e2e2d;
flex: 0 1 auto;
margin: 0;
padding: 2px;
}
h3 {
background-color: #5c5c5b;
flex: 0 1 auto;
margin: 0;
padding: 2px;
}
}
#line-chart {
flex: 1 1 auto;
}
- sachin patel asked 2 years ago
- last active 2 years ago
Hello, I am running scichart in a blazorwasm app. On updating from 1.x to 2.2.2351 I am getting an uncaught error for a missing module on app startup before I make any calls to scichart to initialize.
The error is:
Uncaught Error: Cannot find module ‘../Charting/Model/Filters/HlcScaleOffsetFilter’
at webpackMissingModule (buildDataSeries.js:15:94)
at eval (buildDataSeries.js:15:215)
at Object../node_modules/scichart/Builder/buildDataSeries.js (strategyChart.js:133:1)
at webpack_require (strategyChart.js:21:30)
at eval (chartBuilder.js:45:25)
at Object../node_modules/scichart/Builder/chartBuilder.js (strategyChart.js:181:1)
at webpack_require (strategyChart.js:21:30)
at eval (SciChartSurface.js:30:22)
at Object../node_modules/scichart/Charting/Visuals/SciChartSurface.js (strategyChart.js:3253:1)
at webpack_require (strategyChart.js:21:30)
My webpack is:
const path = require("path");
const CopyPlugin = require("copy-webpack-plugin");
const webpack = require("webpack");
module.exports = {
mode: "development",
entry: {
strategyChart: './src/strategyChart.js'
},
module: {
rules: []
},
resolve: {
extensions: [".js"]
},
output: {
path: path.resolve(__dirname, '../wwwroot'),
filename: "[name].js",
library: "[name]"
},
plugins: [
new CopyPlugin({
patterns: [
{ from: "node_modules/scichart/_wasm/scichart2d.data", to: "" },
{ from: "node_modules/scichart/_wasm/scichart2d.wasm", to: "" }
]
}),
new webpack.IgnorePlugin(/(fs)/)
]
};
- Leland asked 2 years ago
- last active 2 years ago
Hello,
I have a Blazor WASM app running Scichart JS. In attempting to get any of the filters working listed in the Filters API docs I am unable to build my application and get thrown an error.
As listed in Moving Average Filter Docs I import the XyMovingAverageFilter:
import { XyMovingAverageFilter } from ‘scichart/Charting/Model/Filters/XyMovingAverageFilter’;
Run npm install and build the application and I get the error:
Module not found: Error: Can’t resolve ‘scichart/Charting/Model/Filters/XyMovingAverageFilter’ in …
So far I have not run into any issues getting any of the Scichart JS APIs working in this manner.
- Leland asked 2 years ago
- last active 2 years ago
I would like to create an arc annotation as shown in the attached image in Scichart JavaScript.
Please guide me on what will be the best way.
- Ramesh Sippy asked 2 years ago
- last active 2 years ago
Hi,
I am facing a issue with RolloverModifier. I have multiple charts in single window. For some points the lines over the chart are missing.
Please find the attached images for some examples and the code for reproduce the issue. on the attachment you can see that the line on some chart is missing when mouse on left and right corner area of the chart
- Arun Surendran asked 2 years ago
- last active 2 years ago
@TypeScriptError Getting an 800A0404 error when opening any javascript file. This is happening in the Windows Script Host panel. Telling me that I have bad code, that’s not bad. This has been happening since upgrading my Java Version.
- julie diane asked 2 years ago
- last active 2 years ago
Do you have Fibonacci Arcs and Retracements in JavaScript charts? If yes could you please provide a sample to build them.
- kijogi kijogi asked 2 years ago
- last active 2 years ago
I would like to create an annotation in which users can have a multi-line text annotation which can be looks like text-box
- Ramesh Sippy asked 2 years ago
Javascript Stock Chart CategoryAxis date display minute ,second and microsecond
How to display date format HH:MM:SS.ssssss .
Can you please help me,
- sara uçar asked 2 years ago
- last active 2 years ago
Hi guys, I got problem that cursor modifier is not display full lines on x and y axis, ( also it breaks when browser zoom changes ) is there any solution now ?
- Alexandr Zhuk asked 2 years ago
- last active 2 years ago
I have a large data set that I can’t really load into memory at once so instead I am paging the data, grabbing only what I require plus a little buffer either side so that the graph always has something in it.
To implement paging I need to change the position at which the graph starts rendering, unfortunately it seems that it is not possible to change UniformHeatmapDataSeries.xStart as set in the constructor.
Is the only way around this to recreate the heatmap from scratch every time a new page is loaded or am I missing another trick?
- Paul Hodgson asked 2 years ago
- last active 2 years ago
