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
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 1 year ago
- last active 1 year ago
Hi everyone,
I am using SciChart trial in Angular and I find it so powerful
Thanks for developing this
However, I am having some troubles using it with plotting realtime stock data
From having searched around I found that it is recommended to use CategoryAxis for stock charts to avoid gaps on days without data
However, how do I append/update the data with new data coming in
XYDataSeries.append takes a number for the x-value
In the code below, assume “addNewData” is called every second
How do I properly add the new data with the new DateTime and also format it however i would like
Thanks for your help
sciChartSurface.xAxes.add(new CategoryAxis(wasmContext));
sciChartSurface.yAxes.add(new NumericAxis(wasmContext,{
axisAlignment: EAxisAlignment.Left,
}));
addNewData(){
const x = new Number(new Date()).toString()
if(this.sciChartSurface){
const series = this.sciChartSurface.renderableSeries.get(0);
const dataSeries = <XyDataSeries> series.dataSeries;
const x = dataSeries.count();
const y = Math.random()
dataSeries.append(x, y)
this.sciChartSurface.zoomExtents()
}
}
- Himura Kenshin asked 5 months ago
- last active 5 months 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 1 year ago
- last active 1 year ago
stack overflow link : https://stackoverflow.com/questions/77781766/reactjs-sweep-line-optimizing-scichartjs-performance-reusing-wasmcontext-for-m
I have a performance problem with scichartjs, when initializing about 40 charts/surfaces the rendering state drops to 5-10 frames per second.
I think it might be related to the fact that I run the create function each time and not reusing the wasmContext maybe?
but I am not sure how to reuse the wasmContext or what is the best performance for this kind of type
demo : https://9669tv.csb.app/
(sorry for the low quality of the Giff due to 2 MB max size of upload)
this is my init function
export const initScichart = async (divElementId) => {
SciChartSurface.UseCommunityLicense();
//console.log(divElementId.id);
const { sciChartSurface, wasmContext } = await SciChartSurface.create(
divElementId,
{
theme: new SciChartJsNavyTheme(),
}
);
sciChartSurface.xAxes.add(
new NumericAxis(wasmContext, {
visibleRange: new NumberRange(0, 5),
})
);
sciChartSurface.yAxes.add(
new NumericAxis(wasmContext, {
autoRange: EAutoRange.Always,
})
);
const xyDataSeries = new XyDataSeries(wasmContext, {
fifoCapacity: 220_000, // set fifoCapacity. Requires scichart.js v3.2 or later
fifoSweeping: true,
fifoSweepingGap: 2_200,
containsNaN: false,
isSorted: true,
});
sciChartSurface.renderableSeries.add(
new FastLineRenderableSeries(wasmContext, {
dataSeries: xyDataSeries,
strokeThickness: 1,
stroke: "#50C7E0",
})
);
xyDataSeries.sciChartSurfaceToDelete = sciChartSurface;
return xyDataSeries;
};
the reason I need the charts on different surfaces is that I need to wrap them in SortableJS (to be able to drag them across the website)
- dolev dublon asked 3 months ago
- last active 2 months ago
Error from chart in div instrument_candle_chart_2
RuntimeError: call_indirect to a signature that does not match (evaluating ‘invoker(fn, thisWired, arg0Wired, arg1Wired, arg2Wired, arg3Wired, arg4Wired, arg5Wired, arg6Wired, arg7Wired, arg8Wired)
error here: OhlcSeriesDrawingProvider.prototype.draw:
this.nativeDrawingProvider.DrawPointsVec(nativeContext, xDrawValues, openValues, highValues, lowValues, closeValues, renderPassData.xCoordinateCalculator.nativeCalculator, renderPassData.yCoordinateCalculator.nativeCalculator, this.args);
- Const Goose asked 5 months ago
- last active 3 months ago
Implementation scenario: multiple polylines are displayed. After clicking the polyline, the name of the polyline is displayed in the icon.
Question: I can get the Series Name through the SeriesSelectionModifier now, but I don’t know how to display the Series Name in the chart when the user clicks a polyline. Is there a corresponding API?
- js scichart asked 1 year ago
- last active 1 year ago
I have a chart with a box annotation. When I try to resize the box annotation by dragging the left or right border, I got the “Uncaught TypeError: Cannot read properties of undefined (reading ‘x’)”. It’s not always reproducible and cannot be reproduced by dragging the whole box. Also, it only occurs with SciChart version 3 but not SciChart version 2. Please check the screenshots for more details.
- Quyen Sy asked 1 year ago
- last active 12 months ago
Dear Andrew,
As mentioned in the previous question. we are getting ready to implement a comprehensive annotation and labeling functionality to our application. Although I know how to add scalable custom-annotations (your team guided us with the implementation in the past), an important part of of annotation functionality is. ability to edit the annotations. But I am having trouble accessing and interacting the the annotations.
How can I access the svg polygon nodes from the custom annotation and drag and move them? I have attched a video to show the existing functionality.
Best,
Pramod
- pramod butte asked 4 months ago
- last active 3 months ago
I am working on a proof of concept for our company to move some of our desktop apps to the web. We use SciChart WPF in our desktop apps so we are going with SciChart.JS for the web apps. Is it possible to stack the FastLineRenderableSeries in SciChart.JS like we do in WPF?
Edit: Found the answer just after I posted this question.
sciChartSurface.layoutManager.leftOuterAxesLayoutStrategy = new LeftAlignedOuterVerticallyStackedAxisLayoutStrategy();
- Tim Stephansen asked 2 years ago
- last active 5 months ago
Hi,
I’m trying to render a mountain series with different colors in specific ranges.
I understand that this could be done using the palette provider.
I have done that, but the chart is behaving in a very strange way.
When dividing the chart to 2 color parts, when panning and scrolling it to a point that some of the points are out of window, the coloring starts to go crazy.
I have attached a few images that show the problem, and have also attached a file with the source code.
I have tested this on chrome version 116
Here’s the code
import {FastMountainRenderableSeries, XyDataSeries,ZoomPanModifier,EXyDirection,MouseWheelZoomModifier,NumericAxis,SciChartJSLightTheme, SciChartSurface, parseColorToUIntArgb, DefaultPaletteProvider, EStrokePaletteMode} from 'scichart'
SciChartSurface.UseCommunityLicense();
SciChartSurface.useWasmFromCDN();
class PaletteProvider extends DefaultPaletteProvider {
constructor() {
super();
this.strokePaletteMode = EStrokePaletteMode.SOLID;
}
overrideStrokeArgb(xvalue) {
return xvalue > 200 ? parseColorToUIntArgb('#ff0000') : undefined
}
overrideFillArgb(xvalue) {
return xvalue > 200 ? parseColorToUIntArgb('#ff0000') : undefined
}
}
const init = async () => {
const {wasmContext, sciChartSurface} = await SciChartSurface.create('container', {theme: new SciChartJSLightTheme()})
const xAxis = new NumericAxis(wasmContext);
const yAxis = new NumericAxis(wasmContext);
sciChartSurface.xAxes.add(xAxis)
sciChartSurface.yAxes.add(yAxis)
sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier({xyDirection: EXyDirection.XDirection}))
sciChartSurface.chartModifiers.add(new ZoomPanModifier({xyDirection: EXyDirection.XDirection}))
const array = new Array(500).fill(0).map(val => Math.max(Math.random(), 0));
const array2 = new Array(500).fill(0).map((val, index) => index);
const dataSeries = new XyDataSeries(wasmContext)
dataSeries.appendRange(array2, array);
const series = new FastMountainRenderableSeries(wasmContext, {
stroke: 'blue',
fill: 'blue',
strokeThickness: 3,
zeroLineY: 0,
dataSeries,
paletteProvider: new PaletteProvider()
})
sciChartSurface.renderableSeries.add(series);
}
init();
Thanks for the help!
- haba haba asked 7 months ago
- last active 7 months ago
Hi all,
I have another question about SciChart.js, I hope someone can teach me.
First, please download this video
This chart in video is made by d3.js, I hope I can use SciChart.js to make the same features,
please watch from 7 second to the end, when I click the mouse and move to the right direction, then click mouse again,
the section from first click to the second click will make different color, someone can teach me how to do that
PS: English is not my mother language, I wish you all can understand what I mean, Please download the video and watch, thanks.
- YEN-WEN WANG asked 3 years ago
- last active 3 years ago
It seems to me that DateTimeNumericAxis has edge cases where it can’t calculate deltas for some ranges.
This results in a console error, and the chart not loading:
Error from chart in div date-axis-bug RangeError: Maximum call stack size exceeded
at get minTicks [as minTicks] (index.min.js:1:577149)
at a (index.min.js:1:577393)
at a (index.min.js:1:577567)
at a (index.min.js:1:577483)
at a (index.min.js:1:577567)
at a (index.min.js:1:577483)
at a (index.min.js:1:577567)
at a (index.min.js:1:577483)
at a (index.min.js:1:577567)
at a (index.min.js:1:577483)
Provided codepen: https://codepen.io/jrfv/pen/xxQawom
Any suggestions?
Thanks!
- João Velasques asked 8 months ago
- last active 8 months ago
Imagine I have a chart with a RolloverModifier, such that I see the point marker, and also a CursorModifier so I see the axis labels with the exact value I’m hovering.
This chart has the axis title hidden, and also the labels hidden, so I can really only see them trough the CursorModifier axis labels.
Since the axis title and labels are hidden, the axis labels spawn inside the chart, and the point marker from the RolloverModifier may be drawn on top of the labels.
I’d like to properly control drawing order here, so my axis labels get prioritised.
Is there a way to do so?
Codepen example: https://codepen.io/jrfv/full/VwqVBdo
- João Velasques asked 6 months ago
- last active 3 months ago
Hi there,
I am using scichart on a web application to plot 4 different plots simultaneously ( three using FastBandRenderableSeries and one using UniformHeatmapDataSeries).
When running on local environment everything works as expected (browser is very responsive) but when I push it to the production website it lags and my computer seems to be having hard time with the browser. I am still debugging it but thought to ask in case you have any recommendations ? Do you have performance related tips you can share?
I was reading on other posts about SciChartSurface.RenderPriority but it does not seem to exist in JS Scichart. Is there a workaround you can suggest?
Thank you,
- Ihab Skafi asked 3 years ago
- last active 3 years ago
Hello,
When annotations and the rollover modifiers are displayed on the very left side of a chart they align with the center of the candlesticks on the chart. However, as they get displayed toward the right side of the chart they get more and more offset to the right side of the candlestick.
Can anyone point me in the right direction to figure out how to fix this issue seemingly with my xAxis?
See attached screenshots,
- Leland asked 10 months ago
- last active 10 months ago
Hello,
I am experiencing an issue with the BoxAnnotation in SciChart where the precision of the box’s boundaries does not accurately match the data points it is supposed to represent. When dynamically creating a BoxAnnotation to highlight a range of values on a chart, the upper boundary (y2) is set to match the maximum value within the specified range. Despite the calculation seeming accurate, the rendered annotation’s top edge is visually lower than the top of the highest column it encompasses, creating a slight discrepancy. In my application, I am creating a lot of charts, and this issue occurs only on charts with a big data range.
Environment:
SciChart Version: 3.2.532
Browser: Chrome
Attaching code snippet on jsfiddle:
https://jsfiddle.net/c9dekx6v/2/
Regards,
Dmytro
- Dmytro Smirnov asked 2 months ago
- last active 1 month ago
I’ve been trying to implement the scichart js blazor wrapper in a serverside application. The chart starts to load, but gives the following error:
Failed to load resource: the server responded with a status of 404 () :5001/scichart2d.data:1
it looks like scichart2d.data is in the wrong place, but as far as I can tell it’s where it should be (in wwwroot).
is there something special I need to do in sever side? I can get it working fine in webAssembly Blazor
- Michael Hollas asked 3 years ago
- last active 2 years ago
Hi,
We found that the part of our project that uses scichart does not work correctly on iOS12, and then we tried to open a browser on iOS12 to the scichart javascript demo webpage, and found that it did not work.
What is the minimum iOS version supported by javscript scichart?
- chinghung lai asked 2 years ago
- last active 3 months ago
We created a medical simulation similar to your demo: https://demo.scichart.com/javascript-vital-signs-ecg-medical-chart-example
We choose scichart (JS) as the app has to be high performant. In development (I’m working on a mac machine) everything is working great. Now in production I’m surprised, that most computers in our hospital can’t handle scichart, as it is running extremely slow (really slow motion).
I checked also your demo app, which also runs only in slow motion. So it seems not to be an application problem, but a scichart problem. On my development machines there is no problem with the demo.
The slow motion problem occurs on our iPads and on multiple windows machines (VM) with e.g. intel i5 processor.
Is there anything I can do to get scichart JS apps running?
- J Quader asked 2 months ago
- last active 2 months ago
Hi there,
Wow this library has come along way in ten years. My question is related to interaction between RS and the legend that is rendered by the chartmodifier.
I declare the legend something like this during the initial bootstrapping of the plot view:
const legend = new LegendModifier({placementDivId: "legend-goes-here", id:"legend"});
sciChartSurface.chartModifiers.add(legend);
After that, I have a custom interface available for users to change things, which eventually results in visibility or color changes, updating an RS something like this:
const thisRs = surface.renderableSeries.getById(`${s.fileId}-${s.name}`);
if (thisRs) {
thisRs.isVisible = s.isVisible;
thisRs.stroke = s.visualInfo?.colorCode ?? "#FFFFFF";
}
These changes do not appear to be propagated to the legend despite the series on the plot changing. I guess my questions are:
1) What’s the expected behavior/is there something obvious I’m missing about the model?
2) Any suggestions?
It may very well be somewhere lost in my fairly complex React app, but I first wanted to confirm that I’m not missing something in the api.
Thanks!
Dan
- Daniel Santimore asked 10 months ago
- last active 5 months ago
Hi Andrew,
I have 2 independent questions,
Q1.
I have been working with uniform heatmap and I need a way to fix the aspect ratio to 1, for all resize, zoom events, is there an option in heatmap to fix an aspect ration? Please see the attached video
https://youtu.be/obhH6KLExYw
Q2.
I am trying to implement a lasso select method to select and highlight the heatmap data. I did not find lasso select in the documentation hence I went ahead and implemented my own method.
I am drawing an svg using D3 (offsetX and offsetY variables) and then adding it to the annotation as you will see in the video and trying to get all the hitTest data inside the lasso.
If I use the customAnnotation then heatmap is able to draw correct size and location of the SVG
customAnnotation:
https://youtu.be/gL34sAbxYSE
But it does not pan and zoom with the plot data. after looking through documentation I came across OverviewCustomResizableAnnotation which seems designed for zooming and panning with the data.
But while using the OverviewCustomResizableAnnotation the SVG size keeps changing during the update and is not located at the correct location relative to the data.
sciChartSurfaceRef.current.annotations.add(
new OverviewCustomResizableAnnotation({
id: "lassoSVG",
x1: shortestXinData,
y1: shortestYinData,
isEditable: false,
isSelected: false,
yCoordinateMode: ECoordinateMode.DataValue,
xCoordinateMode: ECoordinateMode.DataValue,
verticalAnchorPoint: EVerticalAnchorPoint.Top,
horizontalAnchorPoint: EHorizontalAnchorPoint.Left,
svgString: new XMLSerializer().serializeToString(svg.node())
})
)
OverviewCustomResizableAnnotation:
https://youtu.be/-AOJ9V3l-xI
Thanks,
Pramod
- pramod butte asked 11 months ago
- last active 11 months ago
Hello, I am using SciChartJS and have a new requirement from our users as follows that I need help with the implementation. Any pointers from anyone would be a great help.
**Requirements: **
- Assume that x-axis is Time and y-axis is prices.
- There are multiple series in the chart (e.g., Bid Price, Ask Price)
- Allow user to select a time on xAxis using
CTRL + CLICK
- When the user selects the time, show the rollover line and the tooltip for all series at the selected time
- This rollover line and tooltip should remain visible until the user selects a new time on the x-axis at which point the rollover tooltip should display the tooltip for the new point.
I started inheriting the RolloverModifier
but couldn’t find an appropriate method to show the tooltip.
So, I started implementing the above feature using CustomModifierBase2d
and adding a VerticalLineAnnotation
for the rollover line. But again, struggling with the tooltip.
If someone could help me out or give me pointers, that would be highly appreciated.
Best Regards,
Sachin Patel.
- sachin patel asked 8 months ago
- last active 7 months ago
Hi. Is it possible to implement a depth chart like in the screenshot using scichart?! depth chart
- alex korzh asked 1 year ago
- last active 1 year ago
Hi Folks,
Wanted to ensure I’m working in the right direction here. Requirement is to add inline series labels on the plot surface. It’s an awkward requirement at times, but it keeps coming up with because other providers do this sometimes.
I’ve been playing with the examples of using data labels ( https://github.com/ABTSoftware/SciChart.JS.Examples/blob/master/Examples/src/components/Examples/Charts2D/TooltipsAndHittest/UsingVerticalSliceModifier/index.tsx ).
This might work. It’s a little strange since I only need to show at most one label per series. So I use the data label provider I assume and have to manually space them along the index range.
The only alternative I’m aware of is the annotations api, which of course is quite robust and probably a little too fancy for this case.
Appreciate any thoughts on the approach here — thanks!
EDIT: Attached very contrived example. The idea is to supply a label to name the series inline (apparently a legend is not sufficient), but in a way that is reasonably useful visually (similar to the spacing capabilities in the data labels api). The text would be some piece of metadata that is derived from the series (or at least has a 1:1 relationship with the series).
- Dan Santimore asked 5 months ago
- last active 5 months ago
Greetings,
i have three Series in a SciChart.js (Community-Version) Surface.
The Legend i added shows me all three of them and their names and checkboxes do hide or show the series.
Here is my problem: Is there a way to hide one Series (a FastCandlestickRenderableSeries) from the Legend? I only want to show the other two Series (FastLinerenderableSeries).
Somethin like a Parameter “showInLegend: false,”? I did not find something like this in the documentation(https://www.scichart.com/documentation/js/current/typedoc/classes/legendmodifier.html).
Thank you
- Sebastian Affeld asked 8 months ago
- last active 7 months ago
Hello!
Tell me what I’m doing wrong?
The error does not always appear (floating error).
In my code, along the stack, it will go to your product
- Roman Gavrilow asked 3 years ago
- last active 2 years ago
Hi,
Currently when we scroll the mouse pointer the zoom level is increasing/decreasing and when we click and drag the pan the chart. I want is when we scroll the chart should change the visible range (Pan chart), and clicking and selecting the area need to zoom like RubberBandXyZoomModifier. But I need to zoom only the X axis. Y axis should be the same as before zoom. Is this possible with SCI chart??
- Arun Surendran asked 3 years ago
- last active 3 years 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 1 year ago
- last active 1 year 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 I have an application where I would like to get the color information of the the pixel clicked on the uniformheatmap.
I am of course able to get the value, x, y using the hitTestProvider.hitTest but it does not contain any additional information regarding the color of the clicked pixel
Any help of direction is appreciated.
Pramod
- pramod butte asked 11 months ago
- last active 11 months ago
Hi,
I am creating an application where, we fetch data and display it in multiple heatmaps. The user can manipulate the heatmaps with changing colormap or changing ranges on the colormap.
Data from these multiple heatmaps is composited to another chart for visualization.
I was able to get a reference to the series, but adding the series to another chart errors with a message:
Invalid operation in sciChartSurface.attachSeries, this series has already been attached to a SciChartSurface. Please detach it from a SciChartSurface before attaching to another
at BaseRenderableSeries.onAttach (BaseRenderableSeries.js:634:1)
at __webpack_modules__../node_modules/scichart/Charting/Visuals/SciChartSurface.js.SciChartSurface.attachSeries (SciChartSurface.js:1385:1)
of course this means we cannot attach the same series to two different charts, but is there a way around this such as deepcloning?
renderable series: attached image
sample code: attached image
- pramod butte asked 8 months ago
- last active 7 months ago
Hello, has anyone found any solution with regards to using BigInt in SciChartJS. I am building an app that renders time series chart of say last 2 hours of market data activity of a given instrument (ESH3, a CME futures instrument).
The backend sends the data as JSON object in fragments (1000 fragments with 1000 items in an array fragment, so the total data for 2 hours is 1000 x 1000 = 1,000,000 items in an array).
Each item in the array has a time field (for x-axis) and say TradePrice (for y-axis). The time field is a unix time and it just cannot fit into the number field. So we parse it using BigInt as follows:
JSON.parse(rawData, (key, value) => {
if (key.includes('time')) return BigInt(value);
return value;
});
The parsing works, but, now SciChartJS is not happy about that. It needs number to append the data into its XyDataSeries object.
Has anyone come across this situation before and how have you solved this?
I am thinking the following and would appreciate if someone would give their 2nd opinion as well:
1. Convert to BigInt during deserializing
2. Create a global offset value — eg. Offset = nanoseconds since mid-night of 2020
3. Use Value – Offset as x value when appending to XyDataSeries
4. When a data-point is selected in chart, use SelectedTime + Offset for get to the original value from backend
Question for ScichartJS Support:
– Any provision to support BigInt in SciChartJS in near future? This would definitely help those in financial sector with requirements like I metioned above.
- sachin patel asked 1 year ago
- last active 11 months ago
Can I implement a feature in SciChart that allows me to pause and resume rendering activity on a SciChart renderable surface when a user clicks on the SciChart renderable surface?
- Vishnu K U asked 5 months ago
- last active 4 months ago
RenderableSeries Hit-Test is not working as expected. Some bugs on the the RenderableSeries Hit-Test. Distance between two points are less then its working most of the time and getting the isHit variable getting true. But the distance is high then the lines near to the point only getting the isHit true. I am attaching the image when the red marked area is working fine and the blue marked area not working.
- Arun Surendran asked 3 years ago
- last active 3 years ago
I have two charts in my app. Is there a way that I can make a rollover tooltip on a heatmap chart and the x visible range updates accordingly on another chart when the cursor moving around on the heatmap?
I had this function in Android version with the method InternalUpdate from CustomHeatmapTooltip which extended from UniformHeatmapTooltip. I wonder if there’s a listener for the tooltip.
Thanks.
- Gang Xu asked 2 years 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
I was just going through the tutorial and had my project initializing the graph and drawing a few datapoints. Out of the blue after recently building with no new changes, I’ve been getting hit with the attached message. I’ve even tried deleting the scichart sub-folder within node_modules and reinstalling scichart via npm to no avail.
- Dylan Krupp asked 3 years ago
- last active 3 years ago
Hello, I just started evaluating your 2D JS chart library and am running into an error (below) and don’t know what I should do to continue forward:
Error:
wasm streaming compile failed: TypeError: Failed to execute ‘compile’
on ‘WebAssembly’: Incorrect response MIME type. Expected
‘application/wasm’.falling back to ArrayBuffer instantiation
failed to asynchronously prepare wasm: CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 44 4f @+0
CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 44 4f @+0
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 versionUncaught (in promise) 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
I am copying the scichart2d.data and scichart2d.wasm in my webpack config as follows (according to your tutorials):
config.plugins.push(
new CopyPlugin({
patterns: [
// {
// from: 'src/index.html',
// to: '',
// },
{
from: 'node_modules/scichart/_wasm/scichart2d.data',
to: '',
},
{
from: 'node_modules/scichart/_wasm/scichart2d.wasm',
to: '',
},
],
})
I have since then done the following but to no avail:
- Restart my webpack-dev-server -> In chrome, “Empty cache and refresh”
- Delete my node_modules folder -> yarn install -> yarn start
Can someone please help me with this issue at an earliest convenience.
- sachin patel asked 2 years ago
- last active 3 months ago
When hardware acceleration is not enabled from the client side i am getting the follwong error in the console and the chart becomes empty.
Can we have a caetain fallback ui for this error so that when hardware acceleration is disabled we can show some error in the client side instead of frozen screen
- Saksham Jaiswal asked 1 year ago
- last active 1 year ago
I’m trying to add rollover / tooltip to a chart, which uses sweeping. First, everything is working fine, but after updating the data over more then one page, the rollover is messing around with the data.
I created a codesandbox with the vitalsign demo: https://codesandbox.io/p/sandbox/javascript-vital-signs-ecg-medical-chart-example-forked-2zqcs3
First the rollover works great. Wait until the data is updated to the left side. Then you’ll see the messed up values and rollover points.
- J Quader asked 3 months ago
- last active 3 months ago
Hello Scichart Team again,
I’m trying to replicate anything like this (check Screenshot_2.png).
I can update the scichart background, but I just wanted to have a single color in the background, but it seems that there is an overlap of colors in X / Y as I show in the next printscreen (check Screenshot_3.png)
How I can solve this?
Waiting for feedback.
Many thanks,
Pedro Cruz
- Ricardo Diz asked 3 years ago
- last active 3 years ago
Hi there,
I am experiencing a problem with a license key error when I deployed the project to the staging environment.
Here are the steps I followed:
- I registered the domain and test domain on scichart.com/profile.
- I generated a runtime key.
- I included that key in the code base and then deployed it.
I have attached a screenshot below that shows the errors.
- Umer Nawaz asked 8 months ago
- last active 8 months ago
I want to create two xAxis, the first one will be a normal xAxis and the second one will be an array of date ranges, but the issue then is that since all the xAxis are inside one array together, they all are stacked on top of each other.
I tried sciChartSurface.layoutManager.bottomOuterAxesLayoutStrategy = new BottomAlignedOuterHorizontallyStackedAxisLayoutStrategy(); but that only create all xAxis into one line of xAxis.
I want two line of xAxis, where the first one is normal, but second xAxis should be Horizontally Stacked Axis Layout.
The first image is before horizontal stacked is applied and the second after.
The third image show the xAxes array from sciChartSurface.xAxes, the index(0) of the array is the first xAxis, which should be normal, and the rest (index 1 – 8) should be horizontally stacked.
The horizontal stacked xAxis should be right below the first xAxis.
- Nung Khual asked 8 months ago
- last active 8 months 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?
- eddy trouchaud asked 1 year ago
- last active 1 year ago
I’m trying to have a transparent axisLabelFill for my yAxis and a black axisLabelFill for my xAxis. How can I achieve that?
- Eliezer Veras asked 2 years ago
- last active 2 years ago
Hi there,
I got a error message, please tell me what’s wrong about my code ?
Please check the image, thank
Best Regards.
Yen Wen
- YEN-WEN WANG asked 3 years ago
- last active 3 years ago
I need to set range for stock chart from some records(first today’s record, first record of day before yesterday, etc for week, month, start of current year and the first record of chart) to last record.
To set the range i need to get indexes of this rows. Tell me please how can i do this for stock xValues. May be i can mark some records to find if faster or i need to check every records from 0 to MAX and then select the range?
Thank you!
- Yevhenii Krasovskyi asked 9 months ago
- last active 9 months ago
Hello,
How can I animate an update of a candle or a bar in an OHLC type charts? I use realtime stock chart like this example.
When i update candle it redraws immediately with new values. But i want it to be updated with animation.
- Vita Bubko asked 3 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 1 year ago
- last active 1 year ago