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 5 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 4 months ago
- last active 4 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
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?
- haba haba asked 8 months ago
- last active 1 month 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 10 months ago
- last active 9 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 9 months ago
- last active 9 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 11 months ago
- last active 10 months ago
Hi,
We use SciChart extensively in our WPF applications and make use of CustomRenderableSeries, writing all kinds of different lines and bitmaps directly to the IRenderContext2D depending on the point metadata.
We’re now looking at doing something similar in JavaScript, but can’t find any examples of this kind of customisation in the documentation. In the JavaScript library, is it possible to draw directly to a ‘canvas’ in the same way as in the WPF version? If so, could you please point to an example?
Many thanks,
Graham.
- Graham Stoneman asked 1 year ago
- last active 1 year ago
Hello,
I want to render a base64 image in ScichartJS without actually rendering it in DOM. I saw that you have these guides in WPF:
https://support.scichart.com/index.php?/Knowledgebase/Article/View/17213/34/
https://www.scichart.com/documentation/win/current/webframe.html#Screenshots,_Printing_and_Export_to_XPS.html
However it is difficult to achieve it in Typescript. Is there a guide or any ideas on how to do it? I would appreciate any answer.
- Zino As asked 9 months ago
- last active 9 months ago
Hello,
Can you show this example(https://codepen.io/PodaRocheK/pen/yLGxGEL?editors=0011) and tell me, why metadata labels are not displayed in some cases? May be you can tell me how to do it correctly? A have similar chart with a lot of datapoints and can’t understand why labels show only in some time(20s or > 1m after start the chart)
Thank you!
- Yevhenii Krasovskyi asked 7 months ago
- last active 6 months 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
I recently upgraded SciChart from version 2 to version 3.0.266. It was working fine. But I got error (please refer to the attached screenshot) when I try to run my application today. It’s so strange as it worked fine yesterday and I didn’t make any codes change today.
- Quyen Sy asked 1 year ago
- last active 1 year ago
I am trying to create a live updated non-uniform heatmap with uniform xStep but non-uniform yStep. But I got color mapping problem when I tried to create the non-uniform heatmap. The color showing in the chart doesn’t map with the ColorMap value. Below are my codes:
Draw the non-uniform heatmap:
const SPECTROGRAM_HEIGHT = 256;
const SPECTROGRAM_WIDTH = 100;
const { sciChartSurface, wasmContext } = await SciChartSurface.create("spectrogram-chart-root");
const xAxis = new NumericAxis(wasmContext, {
axisTitle: "Frequency",
axisTitleStyle: {
fontSize: CHART_STYLE.AXIS_FONT_SIZE,
fontFamily: "sans-serif",
fontWeight: "bold"
},
labelStyle: {
fontSize: CHART_STYLE.LABEL_FONT_SIZE,
fontFamily: "sans-serif"
},
labelFormat: ENumericFormat.Decimal,
labelPrecision: 6,
cursorLabelFormat: ENumericFormat.Decimal,
cursorLabelPrecision: 6,
drawMajorBands: false,
});
const yAxis = new NumericAxis(wasmContext, {
axisTitle: "Time",
axisTitleStyle: {
fontSize: CHART_STYLE.AXIS_FONT_SIZE,
fontFamily: "sans-serif",
fontWeight: "bold"
},
labelStyle: {
fontSize: CHART_STYLE.LABEL_FONT_SIZE,
fontFamily: "sans-serif"
},
drawMajorBands: false,
});
// Add XAxis and YAxis
sciChartSurface.xAxes.add(xAxis);
sciChartSurface.yAxes.add(yAxis);
const colorMap = new HeatmapColorMap({
minimum: -200,
maximum: -50,
gradientStops: [
{ offset: 1, color: COLORS.DARK_RED },
{ offset: 0.8, color: COLORS.RED },
{ offset: 0.6, color: COLORS.YELLOW },
{ offset: 0.5, color: COLORS.GREEN },
{ offset: 0.4, color: COLORS.BLUE },
{ offset: 0.01, color: COLORS.DARK_BLUE },
{ offset: 0, color: "Transparent" },
]
});
// Create a Heatmap Data-series. Pass heatValues as a number[][] to the UniformHeatmapDataSeries
zValues = Array.from(Array(SPECTROGRAM_HEIGHT), () => Array(SPECTROGRAM_WIDTH).fill(-200));
const heatmapSeries = new NonUniformHeatmapRenderableSeries(wasmContext, {
dataSeries: new NonUniformHeatmapDataSeries(wasmContext, { zValues: zValues, xCellOffsets: getHeatmapXOffset, yCellOffsets: getHeatmapYOffset }),
colorMap: colorMap,
useLinearTextureFiltering: true,
fillValuesOutOfRange: true,
});
// Add heatmap to the chart
sciChartSurface.renderableSeries.add(heatmapSeries);
I simply return the index for testing in the getHeatmapXOffset and getHeatmapYOffset functions:
const getHeatmapXOffset = (index) => {
return index;
};
const getHeatmapYOffset = (index) => {
return index;
};
I fill the zValues array with the minimum value -200, but the data displayed in the chart is COLORS.YELLOW. I don’t understand what’s wrong.
- Quyen Sy asked 12 months ago
- last active 12 months ago
Working on an application that requires toggling between Linear and Logarithmic scales. I am using the JavaScript version of the library, and I see that there is a LogarithmicNumericAxis available in the WPF version but there is not one currently supported in the JS version.
Curious if there were any recommendations on how to go about hand rolling this type of functionality?
The application is doing realtime streaming of data points so need to be able to update existing values as well as handle incoming values.
- James Miller asked 3 years ago
- last active 3 years ago
We found that when the entered data is wrong and SciChart exception occurs, we can’t get back to normal without F5 reloading.
In our application, when switching the symbol/screen, it will start over from SciChartSurface.create(), but it just cannot return to normal.
If the abnormal data causes scichart exception, what can we do to minimize the damage ?
Here is demo video :
https://youtu.be/N066BHB83Ik
- chinghung lai asked 2 years ago
- last active 2 years ago
Tell me, please, how best to organize the graph in the case when on the time axis we can have more than 100-1000 records within 1 second. The problem seems to be that the X value must be accurate to at least 1 second? How to make records with even greater accuracy. and at the same time the time on the axis was shown correctly for this kind of data?
- Yevhenii Krasovskyi asked 11 months ago
- last active 10 months ago
Hi
I am trying out JS SciChart based on the Blazor example you have posted more than a year ago.
I cannot get the auto scaling to work by code (the default behavior does auto scale once right after adding the data). Calling sciChartSurface.zoomExtents(); (or zoomExtentsX() and zoomExtentsY() after one another) does zoom into a very details portion of the graph.
Also (maybe related) the tooltip does not update when moving the cursor around, it always keeps the same data. I tried using CursorModifier as well as RolloverModifier, both having the same problem.
Attached the JS code and the c# files and a picture how this looks like after calling the autoScale() method.
Thanks for any help
Regards
Reto
- Reto Stahel 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
Is there a way to get discreet colormap for the heatmap? currently no matter how many or how few colors are defined in the colormap table it always adds a gradient. how can we get a discreet ranges for colormap?
Thanks
- pramod butte asked 3 weeks ago
- last active 2 weeks ago
Hello, I’d like to know how is possible to draw Axis Bands from one data point to another.
I’m currently creating real-time stock charts and I need to display the after-hours with a different band.
Thanks in advanced for your help,
- Eliezer Veras 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 1 year ago
I updated schichart to the very last version and turn on the memory usage debug mode to see if there are any memory leaks in our application and ran into the following problem.
When MemoryUsageHelper.isMemoryUsageDebugEnabled = true; and sciChartSurface has the following modifiers(RolloverModifier, CursorModifier) when moving the mouse over the chart I have the following console warnings.
From RolloverModifier instance
From CursorModifier instance
The message below is written on your docs about debugging, so I gues this is the case with the chart modifiers console warnings.
Usually this boils down to failing to call SciChartSurface.delete() (or series.delete(), annotation.delete() when adding/removing objects) or plain JavaScript memory leaks where references to SciChart are held in the customer application & not garbage collected by the browser.
Steps To Reproduce
- Follow the codesandbox example by the link https://codesandbox.io/s/ts-band-chart-xwlxcm?file=/src/App.tsx;
- Once the chart is loaded and rendered, try moving the mouse cursor over the chart;
- Open the browser console ⇒ You will see the warnings I wrote about above.
The current behavior
Moving the mouse over the chart causes warning logs to appear in the browser console and possibly memory leaks.
The expected behavior
No warning logs while moving the mouse over the chart.
- Sergey Chernyakov asked 8 months ago
- last active 8 months ago
Remove the white spaces on the chart when we using drawLabels: false. I am using multiple x-axes and no of x-axis increase the empty white space on the x-axis is also increasing.
- Jerin Mathew asked 3 years ago
- last active 3 years ago
Hi,
Is it possible to toggle the DataLabels dynamically in the chart? Setting some values to true or false like isVisible property.
- Mathew George asked 8 months ago
- last active 8 months ago
Multiple instances of sci chart any appearance changes reflecting on other instances. When I changed the background of one instance the same is reflected in the other instance. I have updated with createSingle to resolve this issue, But i am getting one alert when using createSingle.
- Arun Surendran asked 3 years ago
- last active 3 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 chart with default majorDelta 10 for y-axis. Users are allowed to change the scale (majorDelta) of the chart. When it’s changed to 0.1, the y-axis labels are gone. The y-axis labels can still be seen when the majorDelta is 0.2. Please check my screenshots for details.
- Quyen Sy asked 1 year ago
- last active 1 year ago
Hi!
I have chart with mountain series with a palette provider.
It performs extremely well with 50k points.
However, I noticed that when I drag the chart away, to a point where the series is not visible, the performance sinks and the chart is extremely laggy.
I have uploaded my code to codepen: https://codepen.io/robrob123/pen/KKJjyvp
I checked the performance using the chrome performance profiler and I found that a function called applyStrokeFillPalletting is called repeatedly many times and each time it takes way too long to execute, considering there is no series to draw.
I have attached a screenshot showing the performance profiling.
Thank you!
- Roger Cooper asked 5 months ago
- last active 4 months 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 1 year ago
- last active 1 year ago
I have XyDataSeries with 50 data points and I’m trying to insert another 50 data points to index 5. The same values can be inserted as a range to the beginning of the data series or inserted one by one starting from index 5. But they fail with “RuntimeError: memory access out of bounds” whenever I try to insert them as a range from index 5.
Code snippet:
const { xValues, yValues } = generateData(50);
const dataSeries = new XyDataSeries(wasmContext, { xValues, yValues, isSorted: false });
sciChartSurface.renderableSeries.add(new FastLineRenderableSeries(wasmContext, { dataSeries }));
// this works
dataSeries.insertRange(0, xValues, yValues);
// this works
for (let i = 0; i < xValues.length; i++) {
dataSeries.insert(i + 5, xValues[i], yValues[i]);
}
// this fails
dataSeries.insertRange(5, xValues, yValues);
Codesandbox link: https://codesandbox.io/s/scichart-js-boilerplate-forked-hokfcn
I wonder if I’m doing something wrong or if this is an actual issue?
Side note: Index 5 is just an example, because it seems I can use the insertRange method when inserting to index 0-2, but it fails when inserting to index 3+ (in case of a chart with 50 existing data points)
- Timo Betina asked 1 year ago
- last active 1 year ago
I am trying to implement a waterfall chart with uniform heatmap. The data is updated from the top of the chart and keeps pushing the old data down. I would like to show the y-axis with time. How can I update the y-axis with updated data?
Assume the heatmap is 256 height, I created the zValues array with min value when draw the heatmap:
const SPECTROGRAM_WIDTH = 256;
const minPower = -200;
spectrogramZValues.current = Array.from(Array(SPECTROGRAM_HEIGHT), () => Array(SPECTROGRAM_WIDTH).fill(minPower));
Update zValues array when new data come:
spectrogramZValues.current.shift();
spectrogramZValues.current.push(newData);
When the first data pushed to the chart. There will be one row shown in the axis with timestamp t1. When the second data comes, the top row of the y-axis should be t2 and the t1 is pushed down. When the waterfall chart is filled with 256 data, the bottom of the y-axis should be t1 and the top of the y-axis should be t256. Is it possible to implement this?
Now I am using the uniform heatmap to implement it with yStart=0 and yStep=1. I tried to add the labelProvider to the y-axis to show the timestamp of each row. I am keeping an array locally to store the timestamp of each row which will be updated with the new data. I tried to map this array and return the timestamp in the y-axis labelProvider. But it doesn’t work. The y-axis will not be refreshed when data updated.
yAxis.labelProvider.formatLabel = (dataValue) => {
const ts = timestampArray[dataValue];
if (ts) {
const timeObj = new Date(ts);
const hours = ('0' + timeObj.getHours()).slice(-2);
const minutes = ('0' + timeObj.getMinutes()).slice(-2);
const seconds = ('0' + timeObj.getSeconds()).slice(-2);
const milliseconds = ('0' + timeObj.getMilliseconds()).slice(-3);
return `${hours}:${minutes}:${seconds}.${milliseconds}`;
} else {
return "";
}
};
- Quyen Sy asked 12 months ago
- last active 12 months ago
In our app we have a feature by which user can add indicators. These indicators can consist of 2 or a maximum of 4 lines.
We don’t want to render svg tooltips(which setted up by the default) with data for each line, instead of that we get point data and pass it to our app inner service that can render indicator legend.
To prevent default tooltips from being displayed we set for each renderable series of an indicator the following values.
rolloverModifierProps.width = 0; rolloverModifierProps.height = 0;
But of course tooltips are still rendered in the DOM and this leads to performance issues when we have 3 or more indicators of this type.
My question is the following
How we can render only circles svg for rollover modifier and completely dont render svg for tooltips in the DOM?
This is what the indicators look like
- Sergey Chernyakov asked 8 months ago
- last active 8 months ago
Hello,
I found an issue with very high memory usage by the application. after some tests I found the problem and moved it to a separate example(https://codepen.io/PodaRocheK/pen/PoVmzvP?editors=0011). Please check this code and observe the memory usage on this page. With prolonged use (after 10 minutes), it is clear that more and more memory is used. After hours, the memory used may already be more than several gigabytes. Tell me what the problem is, maybe I’m doing something wrong. Maybe I’m somehow storing old data incorrectly or adding it incorrectly.
This example is not a working example, it has been sped up in order to quickly identify the problem. In our example, an unnecessary data update will occur once every few seconds and after a night of inactivity, the entire page will die. Please tell me what the problem is.
Thank you!
- Yevhenii Krasovskyi asked 6 months ago
- last active 6 months ago
I have a chart with multiple series, left and right y-axes and one x-axis, some series are assign to left y-axis and some are right y-axis and they all have the same x-axis.
But there is one specific serie that need to be control on its own. I consider adding another y-axis either on the left or right axis, but the issue with that is that both the left and right axes are vertically stacked with some other y-axes. So, if I add another y-axis, it will just be stacked, but I need this y-axis to be on its own and not stacked.
The image below show my current chart, and the white line serie is the one that need a y-axis of its own. Currently it is attach to the right y-axis.
- Nung Khual asked 4 months ago
- last active 4 months ago
Hi,
I’ve been following your instructions on linking multiple charts here: https://www.scichart.com/documentation/js/current/webframe.html#Tutorial%2009%20-%20Linking%20Multiple%20Charts.html
I have found that one chart in isolation runs at the full 60fps smoothness, but with each chart that is synchronised, it gets progressively slower until 5+ synced charts, at which point it becomes almost unusable. This is definitely an issue for our use-case, which will require a large number of synchronised charts.
This is currently using uniform heatmap charts only, I haven’t tried it with any others.
The issue occurs with and without data, i.e. a completely empty heatmap.
I also found that if I follow the instructions to the letter (i.e. a full two-directional link, with one chart pushing position changes to the other, and vice-versa), I get “Maximum depth exceeded” errors due to the infinite loop.
Am I doing something wrong? Are you able to recreate this issue?
Thanks
Joe
- Henrique Rodrigues asked 3 years ago
- last active 3 years ago
Is there any way to provide annotation tooltip onmouseover? Perhaps I can subscribe on surface mouse events and manage visibility and positions on “tooltip” annotations by myself? If so, could you please provide reference to surface mouse events API.
- Sergey Chernyakov asked 2 years ago
- last active 4 months ago
Hello, i want to customize tooltip in graph (SplineBandRenderableSeries), i can change the tooltip content but if i return svg like your example ( return <svg width="${width}" height="${height}">))
<circle cx="50%" cy="50%" r="50%" fill="${tooltipColor}"/>
<svg width="100%">
<text y="40" font-size="13" font-family="Verdana" dy="0" fill="${tooltipTextColor}">
<tspan x="15" dy="1.2em">${tooltipTitle}</tspan>
<tspan x="15" dy="1.2em">x: ${seriesInfo.formattedXValue} y: ${seriesInfo.formattedYValue}</tspan>
</text>
</svg>
</svg>
It doesn’t work. I have this error in console: Error from chart in div band0 TypeError: valuesWithLabels.reduce is not a function
and
Error from chart in div band0 DOMException: Failed to execute ‘removeChild’ on ‘Node’: The node to be removed is not a child of this node.
at RolloverTooltipSvgAnnotation.delete …
My graph has 3 renderableSeries (1 XyDataSeries and 2 XyyDataSeries)
Please can you send me an example in (javascript) for modify tooltip styling ?
Thanks.
- Marjorie lesage asked 10 months ago
- last active 8 months ago
There seems to be no documentation on how to configure scichart when using app router with nextJS, and I am running into an error.
I have followed a combination of this tutorial, and additional setup for nextJS found here, specifically the next.config.js file, copy-files-from-to.json, and additions to package.json. But I continue to get the error: ‘Module has already been declared’. (first/second pics in PDF)
I have attached a photos inside the pdf, including my project structure, and a zip with the files to duplicate.
Steps to replicate:
1) extract files and add root package.json to a directory of your choice
2) from within this directory, use ‘yarn create next-app scichart-prototype’ (use set-up options from 4th image in PDF)
3) Replace root layout.tsx and page.tsx with files in zip, add SciChartDemo directory and add page.tsx from that (also in zip)
4) replace the next.config.mjs file with the next.config.mjs file from the zip
5) add the copy-files-from-to.json from the zip
6) replace the package.json file in scichart-prototype directory with file from the zip.
7) run ‘yarn install’ to add packages
8) run ‘turbo dev’
9) after visiting localhost:3000/ click the Sci Chart Demo link to see error.
Thanks for taking a look.
- max keirn asked 2 months ago
- last active 2 months 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
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 there a way to render textbox as an annotation in the chart ? The workaround i could think of is to use CustomAnnotation and supply SVG (svgString) with HTML input tag enclosed. Please let me know if there is a better way to perform this.
- vamsi kunchaparthi asked 3 years ago
- last active 3 years ago
Hi, Custom tooltip is not working on v2.0.2179.
Its working on v2.0.2146. Can you please check the issue..
import { SciChartSurface } from "scichart/Charting/Visuals/SciChartSurface";
import { NumericAxis } from "scichart/Charting/Visuals/Axis/NumericAxis";
import { XyDataSeries } from "scichart/Charting/Model/XyDataSeries";
import { FastLineRenderableSeries } from "scichart/Charting/Visuals/RenderableSeries/FastLineRenderableSeries";
import { RangeSelectionChartModifier } from "./RangeSelectionChartModifier";
import { RubberBandXyZoomModifier } from "scichart/Charting/ChartModifiers/RubberBandXyZoomModifier";
import { MouseWheelZoomModifier } from "scichart/Charting/ChartModifiers/MouseWheelZoomModifier";
import { EXyDirection } from "scichart/types/XyDirection";
import { ZoomExtentsModifier } from "scichart/Charting/ChartModifiers/ZoomExtentsModifier";
import { EClipMode } from "scichart/Charting/Visuals/Axis/AxisBase2D";
import { MouseButtonZoomChartModifier } from "./MouseButtonZoomChartModifier";
import { SeriesInfo } from "scichart/Charting/Model/ChartData/SeriesInfo";
import { CursorTooltipSvgAnnotation } from "scichart/Charting/Visuals/Annotations/CursorTooltipSvgAnnotation";
import { CursorModifier } from "scichart/Charting/ChartModifiers/CursorModifier";
async function initSciChart() {
const { sciChartSurface, wasmContext } = await SciChartSurface.create("scichart-root");
const xAxis = new NumericAxis(wasmContext);
const yAxis = new NumericAxis(wasmContext);
sciChartSurface.xAxes.add(xAxis);
sciChartSurface.yAxes.add(yAxis);
const xyData = new XyDataSeries(wasmContext);
for (let i = 0; i < 250; i++) {
xyData.append(i, Math.sin(i * 0.1));
}
sciChartSurface.renderableSeries.add(
new FastLineRenderableSeries(wasmContext, { dataSeries: xyData })
);
const cursorModifier = new CursorModifier({
crosshairStrokeThickness: 1,
showTooltip: true,
showAxisLabels: false,
crosshairStroke: "transparent",
});
cursorModifier.tooltipSvgTemplate = (seriesInfo, svgAnnotation) => {
let rowString = "";
seriesInfo.forEach(() => {
rowString = rowString + `<tspan x="8" dy="1.2em" fill="red">Test : 123</tspan>`;
});
const string = `<svg width="300" height="33" x="0"><defs>
<filter id="id_1610011455082" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceAlpha" dx="3" dy="3"></feOffset>
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="3"></feGaussianBlur>
<feBlend in="SourceGraphic" in2="blurOut" mode="normal"></feBlend>
</filter>
</defs>
<rect rx="4" ry="4" width="95%" height="90%" style="stroke-width:1;stroke:'#ffffff'}"></rect>
<svg width="100%"><text x="8" y="3" font-size="13" font-family="Verdana" dy="0">`;
svgAnnotation.xCoordShift = 5;
svgAnnotation.yCoordShift = 5;
return string + rowString + `</text></svg></svg>`;
};
sciChartSurface.chartModifiers.add(
cursorModifier
);
const mouseWheelModifier = new MouseWheelZoomModifier();
mouseWheelModifier.modifierMouseWheel = args => {
const delta = args.mouseWheelDelta * 0.1;
mouseWheelModifier.parentSurface.xAxes.asArray().forEach(x => {
x.scroll(delta, EClipMode.None);
});
};
sciChartSurface.chartModifiers.add(
new RubberBandXyZoomModifier({ xyDirection: EXyDirection.XDirection })
);
sciChartSurface.chartModifiers.add(mouseWheelModifier);
sciChartSurface.chartModifiers.add(new ZoomExtentsModifier());
}
initSciChart();
- Arun Surendran 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
Hi everyone! We have a problem, the chart does not start on macOS and Windows 11 operating systems – a black screen is displayed.
I have a license (javascript): The javascript license must work on all Windows/Linux/macOS browsers.
also for mobile browsers.
The problem is displayed in any browser.
The parameters of the MacBook on which the chart does not start are attached below in the screenshot.
What could be the problem?
- Alexandr Zhuk asked 2 years ago
- last active 9 months ago
We are using JavaScript Chart Editable Annotations but we need some more modificaions in that which can enhance this feature in terms of user experience.
Currently when the anonations are loaded they are havinng a fixed shape but we want the annotations to be draggable as soon as they are loaded in the charts whitout any extra clicks,this feature is provided by tradingView charts and we also want to provide the same to our users.
I have attached images and videos for better understanding of the issue.
Hope we can get the solution of this issue asap.
Please refer to the below video link for beter understanding.
https://www.loom.com/share/213b66eb21db44f9ac2457a89563a21a
- Saksham Jaiswal asked 1 year ago
- last active 1 year ago
