Currently, I am creating a line chart and appending a lot of fetched data to the data series. The problem is that I have to recreate the chart when I move to another page that is using the same chart from the previous page. Therefore, I have to fetch the data and append it to the chart data series again.
Is there any way to reuse the chart itself without recreating the whole chart on another page?
- info vcanus asked 4 days ago
- last active 4 days ago
I am using a axis line chart from the js scichart. I want to change the font size of a legend. How do I change the font size of a legend?
- info vcanus asked 6 days ago
- last active 2 days ago
My application supports two themes (dark/light) for the charts. The background of the chart will be set to black if the dark mode is applied, and white if the light mode applied. It works well with the line chart. But there is strange grey background appeared in the heatmap chart when light mode is applied (Please check the attached screenshots). The color of gradient stop of offset 0 (min. heatmap zValues) is set to transparent and it works well with the dark mode. Do you know what’s wrong in my case?
Dark theme object applied to the chart:
{...new SciChartJSDarkTheme(), ...{
sciChartBackground: "#1c1c1c",
axisTitleColor: "#dee2e6",
labelBorderBrush: "#dee2e6",
tickTextBrush: "#dee2e6",
majorGridLineBrush: "#1F3D68",
minorGridLineBrush: "#102A47",
}
Light theme object applied to the chart:
{...new SciChartJSLightTheme(), ...{
sciChartBackground: "#fff",
axisTitleColor: "#333",
labelBorderBrush: "#333",
tickTextBrush: "#333",
}}
Heatmap graditentStops:
[
{ 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" },
]
- Quyen Sy asked 2 weeks 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 3 weeks ago
- last active 1 week ago
I am implementing a waterfall chart with non-uniforma heatmap. I found that the live update doesn’t work. I keep updating the zValues with live data but the chart just show 1 row of data. If I resize the chart (my heatmap is inside a resizable container), I can see the updated data (i.e. Each time I resize the chart, the chart updated and show updated data). Do you have any example of live updated non-uniform heatmap? Below are my codes:
Draw the 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: 0, color: "Transparent" },
{ offset: 0.01, color: COLORS.DARK_BLUE },
{ offset: 0.4, color: COLORS.BLUE },
{ offset: 0.5, color: COLORS.GREEN },
{ offset: 0.6, color: COLORS.YELLOW },
{ offset: 0.8, color: COLORS.RED },
{ offset: 1, color: COLORS.DARK_RED },
]
});
// 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;
};
Reset zValues when number of data point changed:
spectrogramZValues = Array.from(Array(SPECTROGRAM_HEIGHT), () => Array(newWidth).fill(-200));
heatmapSeries.dataSeries.setZValues(spectrogramZValues);
sciChartSurface.zoomExtents();
Update the zValues array when there is new data (I tried to add call zoomExtens() after notifyDataChanged but still didn’t work):
spectrogramZValues.shift();
spectrogramZValues.push(newData);
heatmapSeries.current.dataSeries.notifyDataChanged();
- Quyen Sy asked 3 weeks ago
- last active 3 weeks ago
Is it possible to change the heatmap legend from vertical to horizontal?
- Quyen Sy asked 3 weeks ago
- last active 2 weeks 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 3 weeks ago
- last active 3 weeks ago
I used NPM to complete the deployment and development validation of SCICHART JS, and I completed the demo as follows:
At present, I have two unresolved issues that we will make a purchase decision after they are resolved:
1、How to set the sampling rate for chart?
Using the wpf control, the sampling rate can be set through the “FifoCapacity” property of XyDataSeries, but I did not find this property in the JS control.
2、How to hide the preview of the SciChartOverview control?
I don't want to display the data of the bound chart
- max tu asked 3 weeks ago
- last active 3 weeks 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 3 weeks ago
- last active 3 weeks ago
Hello All,
I was trying to set the visual range property on a numeric axis but i get the error that the “equals” is not a function of NumerixAxis. This happens when i try the following.
export function setXAxisVisibleRange(element, visibleRange) {
const { sciChartSurface } = resolveContext(element);
var axis = sciChartSurface.xAxes.get(0);
axis.visibleRange = visibleRange; **//error here**
}
attached is a picture of a more detailed error. Ultimately what I am trying to do is to sync up the visual range of two charts x axis like in the following tutorial
Thanks for your help in advance.
UPDATE
So my issue was that I had a serialization issue with the NumberRange class. I can now sync up the charts just like in the tutorial. The problem now is that if I scroll or zoom very fast eventually the charts start to flicker in an endless loop. Has anyone ever seen this behavior? One thing I notice is that the min and max value have over 10 decimal points.
Here is a quick printout of the value change events between the two charts when the flickering starts.
Any ideas?
–> CH.1 Min: 0.532180460735786 Max: 3.457511660735786
–> CH.2 Min: -0.17488026755852848 Max: 4.339519732441472
–> CH.2 Min: 0.025927491638795958 Max: 4.088887491638796
–> CH.2 Min: 0.38738145819397996 Max: 3.63774945819398
–> CH.1 Min: 0.5319630448160535 Max: 3.4572942448160537
–> CH.2 Min: 0.532180460735786 Max: 3.457511660735786
–> CH.1 Min: -0.17488026755852848 Max: 4.339519732441472
–> CH.1 Min: 0.025927491638795958 Max: 4.088887491638796
–> CH.1 Min: 0.38738145819397996 Max: 3.63774945819398
–> CH.2 Min: 0.5319630448160535 Max: 3.4572942448160537
–> CH.1 Min: 0.532180460735786 Max: 3.457511660735786
–> CH.2 Min: -0.17488026755852848 Max: 4.339519732441472
–> CH.2 Min: 0.025927491638795958 Max: 4.088887491638796
–> CH.2 Min: 0.38738145819397996 Max: 3.63774945819398
–> CH.1 Min: 0.5319630448160535 Max: 3.4572942448160537
–> CH.2 Min: 0.532180460735786 Max: 3.457511660735786
–> CH.1 Min: -0.17488026755852848 Max: 4.339519732441472
–> CH.1 Min: 0.025927491638795958 Max: 4.088887491638796
–> CH.1 Min: 0.38738145819397996 Max: 3.63774945819398
–> CH.2 Min: 0.5319630448160535 Max: 3.4572942448160537
–> CH.1 Min: 0.532180460735786 Max: 3.457511660735786
–> CH.2 Min: -0.17488026755852848 Max: 4.339519732441472
–> CH.2 Min: 0.025927491638795958 Max: 4.088887491638796
–> CH.2 Min: 0.38738145819397996 Max: 3.63774945819398
–> CH.1 Min: 0.5319630448160535 Max: 3.4572942448160537
–> CH.2 Min: 0.532180460735786 Max: 3.457511660735786
–> CH.1 Min: -0.17488026755852848 Max: 4.339519732441472
–> CH.1 Min: 0.025927491638795958 Max: 4.088887491638796
–> CH.1 Min: 0.38738145819397996 Max: 3.63774945819398
–> CH.2 Min: 0.5319630448160535 Max: 3.4572942448160537
–> CH.1 Min: 0.532180460735786 Max: 3.457511660735786
–> CH.2 Min: -0.17488026755852848 Max: 4.339519732441472
- Sergio Faura asked 4 weeks ago
- last active 4 weeks ago
I am implementing a heatmap. The data size of the heatmap would be changed. I update the UniformHeatmapDataSeries with the updated zValues according to this post.
There is no problem if I update the UniformHeatmapDataSeries with a larger size zValues array. However, when I update it with a smaller size zValues array, the heatmap width will be decrease (Please refer to my screenshots). How can I keep the heatmap always 100% width?
- Quyen Sy asked 4 weeks ago
- last active 4 weeks ago
Hi there,
I encountered a problem that the labels, lineAnnotations and chart are not sharp, a little blurry. Is there any way to fix this?
- Diamond Aleska asked 1 month ago
- last active 1 month 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 1 month ago
- last active 3 weeks ago
Hello. I noticed that a canvas appears in the DOM tree, which completely duplicates the main chart, but it is set to display: none.
can i ask what it is used for? does it affect performance? and can i remove it?
- wisipab619@lieboe.com wisipab619@lieboe.com asked 1 month ago
- last active 1 month ago
I am implementing a heatmap. The data size of the heatmap would be changed. When the data size changed, I will replace the zValues of the UniformHeatmapDataSeries with an updated array. But it doesn’t work for me. The heatmap data cannot be plotted after I updated the zValues array. Below are my codes to create the heatmap and update the zValues array.
Draw heatmap:
const { sciChartSurface, wasmContext } = await SciChartSurface.create("spectrogram-chart-root");
let xAxisNumberRange = new NumberRange(minFreq/maxFreq);
spectrogram_xAxis.current = 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"
},
visibleRange: xAxisNumberRange,
visibleRangeLimit: xAxisNumberRange,
zoomExtentsRange: xAxisNumberRange,
labelFormat: ENumericFormat.Decimal,
labelPrecision: 2,
cursorLabelFormat: ENumericFormat.Decimal,
cursorLabelPrecision: 2,
drawMajorBands: false,
});
// Add XAxis and YAxis
sciChartSurface.xAxes.add(spectrogram_xAxis.current);
sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { isVisible: false }));
// Create a Heatmap Data-series. Pass heatValues as a number[][] to the UniformHeatmapDataSeries
spectrogramZValues.current = Array.from(Array(SPECTROGRAM_HEIGHT), () => Array(SPECTROGRAM_WIDTH).fill(-200));
heatmapDataSeries.current = new UniformHeatmapDataSeries(wasmContext, {
xStart: 0,
xStep: 1,
yStart: 0,
yStep: 1,
zValues: spectrogramZValues.current
});
colorMap.current = new HeatmapColorMap({
minimum: -200,
maximum: -50,
gradientStops: gradientStopsArr.current
});
// Create a Heatmap RenderableSeries with the color map. ColorMap.minimum/maximum defines the values in
// HeatmapDataSeries which correspond to gradient stops at 0..1
const heatmapSeries = new UniformHeatmapRenderableSeries(wasmContext, {
dataSeries: heatmapDataSeries.current,
useLinearTextureFiltering: true,
isSorted: true,
isEvenlySpaced: true,
containsNaN: false,
colorMap: colorMap.current
});
// Add heatmap to the chart
sciChartSurface.renderableSeries.add(heatmapSeries);
Update heatmap data:
// Update the chart x-axis
if (xAxisUpdateRequired) {
let xAxisNumberRange = new NumberRange(newStartFreq, newStopFreq);
spectrogram_xAxis.current.visibleRange = xAxisNumberRange;
spectrogram_xAxis.current.visibleRangeLimit = xAxisNumberRange;
spectrogram_xAxis.current.zoomExtentsRange = xAxisNumberRange;
// Reset the heatmap zValues
heatmapDataSeries.current.clear();
spectrogramZValues.current = Array.from(Array(SPECTROGRAM_HEIGHT), () => Array(newSampleSize).fill(-200));
heatmapDataSeries.current.setZValues(spectrogramZValues.current);
}
// Update heatmap data
spectrogramZValues.current.shift();
spectrogramZValues.current.push(newSpecData);
heatmapDataSeries.current.notifyDataChanged();
- Quyen Sy asked 1 month ago
- last active 1 month 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 month ago
- last active 1 month ago
Can SciChart be used in Qt? If so, is there a demo available for reference, or can you provide guidance on how to use it?
- Allen Nee asked 1 month ago
- last active 1 month 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 2 months ago
- last active 1 month ago
I have a real time updated chart with very large data size and I am facing the slow client problem. i.e. The data sending speed is faster than the data receiving and handling speed which causes memory growing up issue. I am trying to use Web Workers to increase the data handling speed in frontend. I have found a related post:
https://www.scichart.com/questions/wpf/is-xydataseries-safe-to-being-changed-in-a-separate-thread
It seems possible to update XyDataSeries in the background thread with WPF. My UI is built with NextJS. I tried to use Web Workers to implement multiple threads. But I found that it can’t pass the SciChartSurface or XyDataSeries to the worker thread. Could you show me an example on how to update XyDataSeries in the worker thread with Web Workers?
- Quyen Sy asked 2 months ago
- last active 2 months ago
I am thinking about using the Tauri framework which is similar to Electron and was wondering if the SciCharts licensing mechanics are Electron specific or if the same principles would be portable to another framework like Tauri?
I read through the licensing docs here that talk about how licensing works with Electron apps. I’ve looked through the boilerplate example here.
In Tauri it would be a similar setup with a frontend javascript IPC call to Rust (instead of nodejs) to retrieve the licence key.
Update:
A good example boilerplate template that uses Tauri and Vue is here.
In a similar fashion to the SciCharts Electron Demo the license key would be stored in the Rust backend:
tauri-vue-template/src-tauri/src/main.rs
#[tauri::command]
fn get_license() -> String {
String::from("MY AWESOME LICENSE KEY")
}
fn main() {
tauri::Builder::default()
.invoke_handler(tauri::generate_handler![get_license])
.run(tauri::generate_context!())
.expect("error while running tauri application");
}
Then the key is set in the frontend via the RPC call from above with something like:
tauri-vue-template/src/components/HelloWorld.vue
<script setup lang="ts">
import { invoke } from '@tauri-apps/api'
...
invoke('get_license', {}).then((response) => {
SciChartSurface.setRuntimeLicenseKey(response);
})
...
</script>
Tauri has a config file: src-tauri/tauri.conf.json which contains a section called “package” which contains a field called “productName”. The “productName” field seems to be similar to Electron’s “appID”. The config file API and format is described here.
Update #2
I managed to finally put together a working example of a basic Tauri App with a SciChart plot. The project with a README can be found here on GitHub: scichart-tauri-test.
After some more searching and reading it seems that Tauri uses a custom asset:// protocol and not a file:// protocol ref.
- brad leppert asked 2 months ago
- last active 1 month ago
The scichart y axis is displayed as undefined after updating the data in timed interval. The y axis initially shows the value,but after the data is appended to the source, the y axis is shown as undefined in the chart.
I have attached the final scichart image with yaxis as undefined.
- Leo Leslin asked 2 months ago
- last active 2 months ago
Is there a test demo that was done using SciChart WPF 2D.
- linxi zheng asked 2 months ago
- last active 2 months ago
In a DateTimeNumericAxis, can I convert the number from VisibleRange to a formatted string HH:MM:SS?
For example, I’d like to convert this x1 to 12/1/1984, 3:00:00 PM, or 15:00:00.
let x1 = this.parentSurface.annotations.getById("hrv").x1;
// x1 =470761200, seconds since 1970.01.01 00:00:00
Thanks.
- Gang Xu asked 2 months ago
- last active 2 months ago
Hi, i have a project. I need to compare two lines charts. To compare them, i need to print them on the same graphs, on the same window if possible (avoid two scichart canva). i want to use the same xAxis. But i want two yAxis (0 to 100%, and the other 0 to 100%, but overlapping the first one).
All solutions i found, was to create two yAxis, the second one next to the first one.
I put some pictures, that can help to understand the problem (the one with red annotations is what i want).
Thanks 🙂
- thier tom asked 2 months ago
- last active 2 months ago
I am trying to build my application with Electron. When the Electron application is run, it will open the UI in the browser (not opened with chromium). I created two Electron applications with same codes but with different versions of SciChart (i.e. version 2 and version 3). When I run with the Electron application with SciChart v2, the SciChart can be loaded properly. When when I run the Electron application with SciChart v3, I got error (please refer to the screenshot) and the SciChart cannot be loaded. I am not sure what’s wrong. Do you have any idea?
- Quyen Sy asked 3 months ago
- last active 2 months ago
Hi,
I’m trying to synchronize the pie chart and the line chart in React. I’ve already done this for two line graphs.
They both use the same data table. And I want to know if it’s possible, if when I zoom in on the line chart, it updates the Pie chart with the new range.
Thanks, (sorry for my english ^^)
- thier tom asked 3 months ago
- last active 3 months ago
How to update the text Annotation in JavaScript. I can add the new Text annotation but I can’t update the old text Annotation. whether we have any option in sci chart for JavaScript.
- manoj prabakar asked 3 months ago
- last active 3 months ago
I am trying to add an axis annotation to a heatmap legend. When this annotation is dragged, the color mapping of the heatmap series and the heatmap legend will be changed. How can I modify the colorMap.gradientStops of the heatmap series and the heatmap legend while the chart is running?
- Quyen Sy asked 3 months ago
- last active 3 months ago
I have a real time updated chart with multiple traces. I got run time error sometimes. It seems happening randomly. But it can be reproduced after a long run (e.g. 45 mins). I have checked, the memory condition is normal when the problem happens. Do you have any idea what’s wrong with it when I got this error?
- Quyen Sy asked 3 months 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 3 months ago
- last active 2 months ago
I have issues with the selection box of the textannotation in firefox.
Code for the annotation:
return new TextAnnotation({
id,
text: text,
verticalAnchorPoint: EVerticalAnchorPoint.Center,
horizontalAnchorPoint: EHorizontalAnchorPoint.Left,
xCoordinateMode: ECoordinateMode.DataValue,
yCoordinateMode: ECoordinateMode.DataValue,
x1: x1,
y1: y1,
fontSize: 16,
fontWeight: "Bold",
textColor: annotation.color,
isEditable: isEditable,
annotationLayer: EAnnotationLayer.AboveChart
})
Please see the differences in the images attached. In the Firefox browser it seems that the svg takes on the size of the scichart surface. Can you help me to fix this problem? The parameters selectionBoxDelta and selectionBoxThickness work in both browsers but do not fix the problem.
Thank you.
- Tobias Lettner asked 3 months ago
I am implementing a heatmap chart and would like to allow users to adjust the color mapping of the heatmap by adding sliders to the heatmap legend (Please refer to the attached screenshot). Does SciChart support color slider for HeatmapLegend?
- Quyen Sy asked 3 months ago
- last active 3 months ago
I have a real time updated chart and users can add annotation to the chart. The position of the annotation will be updated with the chart data. I would like to stop updating the annotation position while user dragging the annotation. So I added a flag (e.g. isDragging) to the annotation dragStarted and dragEnded events. The isDragging flag will be set to true in dragStarted and then set to false in dragEnded. I will check this flag before updating the annotation position.
Here’s the problem, the annotation dragStarted event will be triggered when users do panning in the chart. But the dragEnded will not be triggered in this case. It breaks my plan to stop updating the annotation position as the isDragging will be incorrect. Is it a bug that the annotation dragStarted event (but not the dragEnded event) triggered when panning?
- Quyen Sy asked 3 months ago
- last active 3 months ago
Is it possible, in version 2.2.2404, to have RubberBandXyZoomModifier function like what seems to be the default for v3? So when I’m dragging the box to zoom, if I leave the chart area, the box snaps to the edges of the chart, and upon mouse release, it zooms normally to the box.
I can provide an example:
https://8tunzo.csb.app/ — broken (version 2.2.2404)
https://umvryi.csb.app/ — working (version 3.0.301)
Same exact code
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 { MouseWheelZoomModifier } from "scichart/Charting/ChartModifiers/MouseWheelZoomModifier";
import { RubberBandXyZoomModifier } from "scichart/Charting/ChartModifiers/RubberBandXyZoomModifier";
import { ZoomExtentsModifier } from "scichart/Charting/ChartModifiers/ZoomExtentsModifier";
const dataX = [0, 10, 20, 30, 40, 50];
const dataY = [0, 10, 5, 20, 15, 35];
// eslint-disable-next-line
SciChartSurface.useWasmFromCDN();
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 lineData = new XyDataSeries(wasmContext, {
xValues: dataX,
yValues: dataY
});
sciChartSurface.renderableSeries.add(
new FastLineRenderableSeries(wasmContext, { dataSeries: lineData })
);
sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier({}));
sciChartSurface.chartModifiers.add(new RubberBandXyZoomModifier({}));
sciChartSurface.chartModifiers.add(new ZoomExtentsModifier({}));
}
initSciChart();
- João Velasques asked 3 months ago
- last active 3 months ago
Hi!
Currently, I’m using Axis Layout – vertically stacked axes。When I use vertically stacked axes, click on a certain area, can I get on that axis? It’s from click on a certain area, not the series. I know the series can it.
can you give me some help?
- Jiawei Zhang asked 3 months ago
- last active 3 months ago
I am trying to implement the following functionality requested by our users:
Zoom:
– Only zoom the chart when using CTRL + MouseWheel key
– This is similar to how most browsers behave
Pan/Scroll:
– If no CTRL key is pressed, then pan/scroll
– This is similar to how most browsers behave
Given the above requirement, I started by creating custom modifier by extending YAxisDragModifier.
My code almost works:
– When using CTRL + Mouse Left & Drag, it Scales (zooms) — just like the user wants
– But using CTRL + Mouse Wheel does not do the same — it only Scales (Zooms).
I have uploaded the code at codesandbox.io:
https://codesandbox.io/s/amazing-shape-2ispt0?file=/src/customModifiers.ts
Note that I have not tried to implement this in ZoomPanModifier yet, but would be helpful if you could give me some pointers on getting this feature in there too.
I would appreciate any help I can get and thanks a bunch in advance.
Best Regards,
Sachin Patel.
- sachin patel asked 4 months ago
- last active 4 months ago
This is my first time in this forum, and I am analyzing SCIChart. I am planning to use it in my software, but there are some questions I haven’t been able to answer yet.
My software is similar to an IDE, where the user can build their custom applications and run on windows environment, but we also provide an option to save all the interface in html and javascript. Since SCIChart provides not only WPF Charts but also javascript Charts, I would like to know the following:
1- Does the javascript charts have the same functionalities as the wpf charts? XY Charts or Pie charts for example, will they have the same functionalities in WPF and Javascript ?
2- Does the appearence of the charts in WPF and Javascript are the same? Do they look exatcly the same?
I believe these are my biggest doubts so far. Thanks in advance !!
- Fabio Pereira de Carvalho asked 4 months ago
- last active 4 months ago
Hi,
New to using Scichart JS, is it possible to change the series colour of the overview chart?
See screenshot, I have a FastColumnRenderableSeries as the main chart, and using FastMountainRenderableSeries for the overview. I would like to change the colour of the overview chart.
Tried setting the stroke colour etc, as in the example but can not seem to make it work.
Kind Regards,
James
- James Usherwood asked 4 months ago
- last active 4 months 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 4 months ago
- last active 4 months ago
We are having the first experiences with SCIchart. Could someone help with this problem we are experiencing?
[ encore ] ERROR Failed to compile with 1 errors14:42:33 [ encore ]
Module build failed: Module not found: [ encore ]
“./node_modules/scichart/_wasm/scichart2d.wasm” contains a reference
to the file “a”. This file can not be found, please check it for typos
or update it if the file got moved. [ encore ] ERROR in
./resources/js/Pages/Home.vue?vue&type=template&id=6a63e488&scoped=true&ts=true
(./node_modules/unplugin/dist/webpack/loaders/transform.js?unpluginName=unplugin-vue-components!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Pages/Home.vue?vue&type=template&id=6a63e488&scoped=true&ts=true)
10:27 Module parse failed: Unexpected token (10:27) File was processed
with these loaders: *
./node_modules/unplugin/dist/webpack/loaders/transform.js *
./node_modules/unplugin/dist/webpack/loaders/transform.js *
./node_modules/vue-loader/dist/templateLoader.js *
./node_modules/vue-loader/dist/index.js You may need an additional
loader to handle the result of these loaders. | }, null, -1 /* HOISTED
*/)) |export function render(_ctx: any,_cache: any,$props: any,$setup: any,$data: any,$options: any) { | return (_openBlock(),
_createElementBlock(“div”, _hoisted_1, [ | _createElementVNode(“h1”, null, _toDisplayString(_ctx.msg), 1 /* TEXT */),ERROR in ./node_modules/scichart/_wasm/scichart2d.wasm Module not
found: Error: Can’t resolve ‘a’ in
‘C:\Users\clo\fr\Projeto\chart\App\node_modules\scichart_wasm’ERROR in ./node_modules/scichart/_wasm/scichart3d.wasm Module not
found: Error: Can’t resolve ‘a’ in
‘C:\Users\clo\fr\Projeto\chart\App\node_modules\scichart_wasm’webpack compiled with 3 errors
- Marcelo Wanderley asked 4 months ago
- last active 3 months 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 4 months ago
- last active 4 months ago
Downloaded latest Licensing Wizard on my Mac M1 however I cannot run it to start my trial of SciChart.JS.
I’m looking at SciChart.JS for financial charting project in a .NET Blazor for analysis only.
As I’ve not been able to get SciChart installed or to try, is it possible to place annotations such as trend lines and boxes onto the chart by me clicking on the chart?
Also, how does indicators work? And can I add my own indicators? Will the algorithms for these indicators be written in JavaScript or can I do this in C# from Blazor?
I attach a screen shot of the problem running the Licensing Wizard.
Any suggestions would be helpful.
Thanks
- David P asked 4 months ago
- last active 4 months ago
I try to use this exemple on my PC with (nodejs 8.13.0) and i can’t run this app example. I receive this error:
× ｢wds｣: Invalid configuration object. Webpack has been initialized
using a configuration object that does not match the API schema.configuration.optimization has an unknown property ‘namedModules’.
These properties are valid:object { checkWasmTypes?, chunkIds?, concatenateModules?,
emitOnErrors?, flagIncludedChunks?, innerGraph?, mangleExports?,
mangleWasmImports?, mergeDuplicateChunks?, minimize?, minimizer?,
moduleIds?, noEmitOnErrors?, nodeEnv?, portableRecords?,
providedExports?, realContentHash?, removeAvailableModules?,
removeEmptyChunks?, runtimeChunk?, sideEffects?, splitChunks?,
usedExports? }-> Enables/Disables integrated optimizations. Did you mean optimization.moduleIds: “named” (BREAKING CHANGE since webpack 5)?*
Is there compatiblity problem with nodejs LTS version?
Thans for your response.
- Hochoc Max asked 4 months ago
- last active 4 months ago
I have a live updating chart with multiple traces. After updated SciChart to v3.0.280, I got “Uncaught (in promise) RangeError: Maximum call stack size exceeded” error sometimes when I call XyDataSeries.appendRange(). This error will not be triggered if just initialize the chart and keeps updating the chart data. It seems happening after I modified the visibleRange of x-axis or y-axis. But the error is triggered on the line calling appendRange(). I have no clue for this issue. My codes didn’t change and only updated the SciChart version. Could you find the possible cause of my problem? Please refer to the attached screenshots.
Codes to update the chart data:
UpdateSuspender.using(sciChartSurfaceRef.current, () => {
console.time("Time - Update series");
for (tnum=0; tnum<MAX_TRACE; tnum++) {
traceObj = tracesInfoObj.current[tnum];
if (traceSeries.current[tnum] && traceObj.status === "Active") {
traceSeries.current[tnum]["xyDataSeries"].clear();
switch (traceObj.type) {
case 0:
traceSeries.current[tnum]["xyDataSeries"].appendRange(dataX, newSpecData);
break;
case 1:
traceSeries.current[tnum]["xyDataSeries"].appendRange(dataX, newMaxHoldData);
break;
case 2:
traceSeries.current[tnum]["xyDataSeries"].appendRange(dataX, newMinHoldData);
break;
case 3:
traceSeries.current[tnum]["xyDataSeries"].appendRange(dataX, averageData);
break;
}
}
};
console.timeEnd("Time - Update series");
});
- Quyen Sy asked 4 months 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 4 months ago
- last active 4 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 4 months ago
- last active 1 month ago
I tried to apply offset on the data in a live updating multiple lines chart. But it doesn’t work for me. Below are my codes for adding trace and updating data:
Add a trace to the chart without data in the beginning:
const xyDataSeries = new XyDataSeries(wasmContext);
const offsetFilter = new XyScaleOffsetFilter(xyDataSeries, { scale: 1, offset: 50 });
let trace1 = new FastLineRenderableSeries(wasmContext, {
type: ESeriesType.LineSeries,
id: 1,
stroke: #333,
strokeThickness: 1,
dataIsSortedInX: true,
dataEvenlySpacedInX: true,
containsNaN: false,
dataSeries: offsetFilter,
});
sciChartSurface.renderableSeries.add(trace1);
Update chart data later:
sciChartSurface.renderableSeries.items.forEach(serie => {
serie.dataSeries.clear();
serie.dataSeries.appendRange(dataX, dataY);
});
I can’t see the offset 50 applied on the chart data. Not sure what’s wrong with my codes.
- Quyen Sy asked 4 months ago
- last active 4 months ago
From what I’ve read into chrome’s roadmap, everything seems on track for a webgpu release in May.
Is scichart taking this into account and planning to add webgpu support?
I suspect this would make quite an impact on performance, so it would be a great addition.
Thanks!
- João Velasques asked 4 months ago
- last active 4 months ago
Hi,
I’ve been trying to customize the RolloverModifier tooltip content with a vertical chart but am at a loss to try to get the format I need. I’d like to take in all the series info and display them in a tooltip together with a small icon and the y-value next to this.
I was able to do this in the CursorModifier content but unable to do so in the RolloverModifier which is what I really want to use.
I’ve included a CodeSandbox link below showing the custom SVG template and output on the CursorModifier I’d like to use for the RolloverModifier. Is this type of output template possible?
Thanks in advance!
- Craig Wendel asked 4 months ago
- last active 4 months ago
Hi,
I just registered here.
I want to use your tool to create one graph. But licence is too expensive for me. May I create graph during trial mode and use it?
What if trial licence expired? Already created graph will still working or not?
Thanks
- stevo paradox asked 5 months ago
- last active 5 months ago
