I see in the documentation that I need to set the boolean to true/false. But my question is how do I do this after the series has been rendered? I am using a custom legend and need to be able to toggle visibility.
export default function Chart() {
const [sciChartSurface, setSciChartSurface] = React.useState<SciChartSurface>();
const [wasmContext, setWasmContext] = React.useState<TSciChart>();
const dataSeriesMapRef = React.useRef<Map<keyof typeof chartData, XyDataSeries>>();
React.useEffect(() => {
(async () => {
const { sciChartSurface, wasmContext } = await drawChart(theme, chartType);
setSciChartSurface(sciChartSurface);
setWasmContext(wasmContext);
})();
dataSeriesMapRef.current = new Map<keyof typeof chartData, XyDataSeries>();
return () => sciChartSurface?.delete();
}, [chartType]); // make sure the chart is initialized only once
React.useEffect(() => {
if (dataSeriesMapRef.current && sciChartSurface && wasmContext && !isLoading) {
// const currentSeries = sciChartSurface.renderableSeries.asArray();
// if (currentSeries) sciChartSurface.renderableSeries.clear();
updateChartWithData(dataSeriesMapRef.current, theme, wasmContext, sciChartSurface, chartData, chartType);
}
}, [theme, chartData, wasmContext, sciChartSurface, isLoading]);
return (
<div id="chart-container">
<ControlsLegend
chartData={chartData}
dataSeriesMap={dataSeriesMapRef.current as Map<keyof typeof chartData, XyDataSeries>}
theme={theme}
sciChartSurface={sciChartSurface as SciChartSurface}
wasmContext={wasmContext as TSciChart}
/>
<div id={DIVID} style={{ width: windowWidth, height: windowHeight }} />
<ControlsBottom />
</div>
);
}
drawChart.js
export default async (theme: ExtendedTheme, chartType: string) => {
const { sciChartSurface, wasmContext } = await SciChartSurface.create(DIVID);
const isLightTheme = theme.palette.type === 'light';
console.log('createChart');
const xAxis = new NumericAxis(wasmContext);
const yAxis = new NumericAxis(wasmContext);
xAxis.labelProvider.formatLabel = (unixTimestamp: number) => {
return new Date(unixTimestamp * 1000).toLocaleDateString('en-us', {
month: 'short',
year: 'numeric',
day: 'numeric',
});
};
yAxis.labelProvider = new CustomLabelProvider();
sciChartSurface.yAxes.add(yAxis);
sciChartSurface.xAxes.add(xAxis);
if (chartType !== 'stack') sciChartSurface.chartModifiers.add(new RolloverModifier({ showRolloverLine: false }));
sciChartSurface.chartModifiers.add(new ZoomPanModifier());
sciChartSurface.chartModifiers.add(new ZoomExtentsModifier());
sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier());
sciChartSurface.chartModifiers.add(new PinchZoomModifier());
const rubberBandXyZoomModifier = new RubberBandXyZoomModifier({
isAnimated: true,
animationDuration: 400,
easingFunction: easing.outExpo,
fill: '#FFFFFF33',
stroke: '#FFFFFF77',
strokeThickness: 1,
});
sciChartSurface.chartModifiers.add(rubberBandXyZoomModifier);
sciChartSurface.zoomExtents();
if (isLightTheme) sciChartSurface.applyTheme(new SciChartJSLightTheme());
else sciChartSurface.applyTheme(new SciChartJSDarkTheme());
return { sciChartSurface, wasmContext };
};
updateChartWithData.js
export const updateChartWithData = (
dataSeriesMap: Map<keyof typeof chartData, XyDataSeries>,
theme: ExtendedTheme,
wasmContext: TSciChart,
sciChartSurface: SciChartSurface,
chartData: ChartData,
chartType: string
) => {
sciChartSurface.invalidateElement();
const streamIds = Object.keys(chartData);
const isLightTheme = theme.palette.type === 'light';
if (isLightTheme) sciChartSurface.applyTheme(new SciChartJSLightTheme());
else sciChartSurface.applyTheme(new SciChartJSDarkTheme());
sciChartSurface.invalidateElement();
console.log('updateChartWithData');
console.log(chartData);
const stackedColumns: any[] = [];
streamIds.forEach((s) => {
const streamId = Number(s) as keyof ChartData;
const streamSelectorId = streamId as keyof typeof chartData;
if (dataSeriesMap.has(streamSelectorId)) {
const xyDataSeries = dataSeriesMap.get(streamSelectorId);
chartData[streamId].data.forEach((value) => {
xyDataSeries?.append(value.timestamp, value.value);
});
} else if (chartType === 'scatter') {
const lineSeries = LineChart(dataSeriesMap, theme, wasmContext, chartData, streamSelectorId, streamId);
sciChartSurface.renderableSeries.add(lineSeries);
sciChartSurface.zoomExtents();
} else if (chartType === 'bar') {
const lineSeries = BarChart(dataSeriesMap, theme, wasmContext, chartData, streamSelectorId, streamId);
sciChartSurface.renderableSeries.add(lineSeries);
sciChartSurface.zoomExtents();
} else {
const lineSeries = StackedChart(dataSeriesMap, theme, wasmContext, chartData, streamSelectorId, streamId);
stackedColumns.push(lineSeries);
}
});
};
“LineChart.js”
export default (
dataSeriesMap: Map<keyof typeof chartData, XyDataSeries>,
theme: ExtendedTheme,
wasmContext: TSciChart,
chartData: ChartData,
streamSelectorId: keyof typeof chartData,
streamId: keyof ChartData
) => {
const xyDataSeries = new XyDataSeries(wasmContext);
dataSeriesMap.set(streamSelectorId, xyDataSeries);
const obj = chartData[streamSelectorId];
const stroke = obj.stroke as string;
xyDataSeries.dataSeriesName = obj.label as string;
chartData[streamId].data.forEach((value) => {
xyDataSeries.append(value.timestamp, value.value);
});
const lineSeries = new FastLineRenderableSeries(wasmContext, {
stroke,
strokeThickness: obj.strokeThickness,
strokeDashArray: obj.strokeDashArray,
dataSeries: xyDataSeries,
animation: new WaveAnimation({ zeroLine: -1, pointDurationFraction: 0.5, duration: 1000 }),
});
lineSeries.rolloverModifierProps.tooltipColor = theme.palette.background.paper;
lineSeries.rolloverModifierProps.tooltipTextColor = theme.palette.getContrastText(stroke);
lineSeries.rolloverModifierProps.markerColor = stroke;
lineSeries.rolloverModifierProps.tooltipTemplate = (
id: string,
tooltipProps: RolloverModifierRenderableSeriesProps,
seriesInfo: SeriesInfo,
updateSize: (width: number, height: number) => void
) => {
const { tooltipColor, tooltipTextColor, markerColor } = tooltipProps;
const { formattedXValue, yValue, seriesName } = seriesInfo;
const width = 192;
const height = 60;
updateSize(width, height);
return `<svg width='${width}' height='${height}' class="root">
<rect width="100%" height="100%" fill='${tooltipColor}' stroke='${markerColor}' stroke-width='2' />
<svg width='100%'>
<text dy="0" fill='${tooltipTextColor}'>
<tspan x="15" y="20" class="title">${formattedXValue}</tspan>
<tspan x="15" y="45" class="value">
${seriesName} | ${yValue.toFixed(0).replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
</tspan>
</text>
</svg>
</svg>`;
};
return lineSeries;
};
lengend.js
let _chartData: any[] = [];
export default ({
dataSeriesMap,
theme,
wasmContext,
sciChartSurface,
chartData,
}: {
dataSeriesMap: Map<keyof typeof chartData, XyDataSeries>;
theme: ExtendedTheme;
wasmContext: TSciChart;
sciChartSurface: SciChartSurface;
chartData: ChartData;
}) => {
const classes = useStyles();
const chartRef = React.useRef<any>([]);
const [legendData, setLegendData] = React.useState<any[]>([]);
// _chartData = [..._chartData, ...values(chartData)];
_chartData = values(chartData);
_chartData = uniqby(_chartData, 'groupId');
_chartData = uniqby(_chartData, 'streamId');
React.useEffect(() => {
if (_chartData.length > 0 && !isEqual(chartRef.current, _chartData)) {
setLegendData(_chartData);
chartRef.current = _chartData;
}
}, [_chartData]);
const onClick = React.useCallback(
(item) => {
// const xyDataSeries = dataSeriesMap.get(160);
const _legendData = legendData.map((x) => {
if (x.groupId === item.groupId) x.isVisible = !x.isVisible;
return x;
});
setLegendData(_legendData);
},
[legendData]
);
return (
<div className={classes.root}>
<Paper variant="outlined" square>
{legendData.map((item: any) => (
<div className={classes.listItem} key={item.streamId}>
<IconButton
onClick={() => onClick(item)}
style={{ color: item.stroke }}
size="small"
aria-label={item.label}
>
{item.isVisible ? <VisibilityIcon /> : <VisibilityOffIcon />}
</IconButton>
<div>{item.label}</div>
</div>
))}
</Paper>
</div>
);
};
Inside the onClick function is where I was trying to change visibility for both series. I’ve tried multiple things without any luck. I assumed it would be as simple as getting the correct series, setting the visible property and maybe a re-render if that is even needed? Like I said any advice on a better way of handling this is welcome
- Rodolfo Sanchez asked 3 years ago
- last active 3 years 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
I’m looking for some direction on how to implement a modifier that reacts to interaction (mouse up/down etc) with a charts axis
- User clicks on axis
- Provide callback for side effect when clicked
Thanks
- Henrique Rodrigues asked 3 years ago
- last active 3 years ago
How do I insert gaps in a heatmap series? At the moment null values seem to show as either the max value colour or the min value colour.
- Henrique Rodrigues asked 3 years ago
- last active 3 years ago
Scenario: user selects an area of a heatmap chart using a box annotation via a mouse drag.
I have created a custom modifier to draw the box annotation. I’ve used this as the basis: SimpleDataPointSelectionModifier.ts
My question is: how to I get the X axis start + end values and the Y axis start + end values based on the area of the annotation/mouse coordinates.
Thanks
- Henrique Rodrigues asked 3 years ago
- last active 3 years ago
Hi, I’m looking for some pointers on how to implement the following:
- User draws a selection on the chart (similar to rubber band modifier)
- Annotation is drawn on the chart conforming to the users selection
- Annotation is fixed relative to the data point (e.g. will scroll is the chart is panned etc)
Many thanks
- Henrique Rodrigues 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
Hi,
I am getting console error and page is crashing and reloading the page.
- Arun Surendran asked 3 years ago
- last active 2 years 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
Hi,
On RubberBandXyZoomModifier i am using the YDirection zoom. When i click and drag out side the area of sci chart and leave the mouse click. Then again click inside the scichart, it showing the selection area and not disappear after new selection of zoom or pan the chart. the selected area is still showing as selected.
- Arun Surendran asked 3 years ago
I am wondering if there may be some guidance on how to configure the styles for the SciChart.js chart instance in a React application to be able to handle dynamic changes to the height value.
The scenario is that the chart and wasm context are being saved in refs, so that the component the chart exists within does not rerender. Data is being consumed via a web socket, and streaming realtime data.
All that is well and good, but trying to implement a new feature request where the height of the chart changes dynamically, similar to an accordion style where the chart may have a full view, a split view, or no view (92vh, 46vh, 0vh)
I am finding that my css styles are not applying, or frustratingly will apply seemingly at random and other times not apply even though the underlying code remains the same. I tried to override, or at least alter, the position absolute styles of the canvas, by wrapping it in a parent element with position relative, which works to keep the height and width of the chart as desired, but the aspect ratio seems to falter and the chart axes are blurred and illegible.
I’m sure this would be a great instance of a picture says a 1000 words, and I am nearing a 1000 words. Will try to attach a codepen/ example that demonstrates the issue I am experiencing.
If there are any tips or tricks you would recommend please advise
- James Miller asked 3 years ago
- last active 3 years ago
Hi there,
I would like to use a column chart with labels. Our client tends to use really long names for these labels, so I was wondering if it is possible that these labels wrap. I could find no property in the docs or source that achieves this. The attached screenshot shows the current (and undesired) rendering.
The current behavior seems to be that labels in between are hidden when longer labels overlap them. Is this a configurable property? In our case, the labels may never be hidden.
Kind regards,
Tim Havinga
- Tim Havinga asked 3 years ago
- last active 3 years ago
Is there a way to update the entire data series instead of a particular y value at an index ?
https://www.scichart.com/documentation/js/current/typedoc/classes/xydataseries.html#update
- vamsi kunchaparthi asked 3 years ago
- last active 3 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
Hello
I have a use case where annotations are draggable and on drag i am making api call to fetch updated data and resetting the the DataSeries.
I am clearing annotations once i get updated data but it is just clearing the svg annotation nodes from dom but not the hit test context (point focus) on wasm side.
Please look at the attached screenshot and suggest something
Thanks
Vamsi
- vamsi kunchaparthi asked 3 years ago
- last active 3 years ago
Hi,
Unsorted xValues is possible on SCI Chart? I tried with dataIsSortedInX: false and isSorted: false on dataSeries, But its not showing the correct range.
eg:
new XyDataSeries(wasmContext, {
dataSeriesName: "Line Series",
xValues: [0,10,20,13,54,15,26,17,18,19],
yValues: [0,1,5,1,20,5,1,8,9,3],
dataIsSortedInX: false
});
- Arun Surendran asked 3 years ago
- last active 3 years ago
Hi Scichart Team,
RenderableSeries Hit-Test still having some issues. I saw that the bug on your board is already closed state and my last comments are missed on the bug. So i am adding the same here.
https://www.scichart.com/questions/js/renderableseries-hit-test-not-working-as-expected
Can you please check the video and the code. Only change i have done on the Example is the data values are updated. On the video you can saw the clicking outside for some area Hit is showing, some area miss is showing, and clicking on the lines or point also showing the same. Let me know you need any more inputs from my side.
- Arun Surendran asked 3 years ago
- last active 2 years ago
Cant display any chart when init by SciChartSurface.create(HtmlElementId), how can I fix it ?
- test11111 123 asked 3 years ago
- last active 3 years ago
i cant draw any chart.
just this ..
i used demo code
- YEJI YOON asked 3 years ago
- last active 3 years ago
Dear team. We have a need to draw footprint chart, but your library didnt’t have opportunity to draw it. It will be good if you help us with recommendations in which direction we should move to build it. Thanks you a lot !
- Ihor khmarskiy asked 3 years ago
- last active 8 months ago
Hello! Can you help me with creating footprint chart. In documentation and examples I didn`t find way how to do that. How can I create it ?
- test11111 123 asked 3 years ago
- last active 2 years ago
I think this question has come up before, but is it possible to render a logarithmic axis in the JS library? If not, is this on the roadmap (and when)?
- Paul Crouch asked 3 years ago
- last active 3 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
Hi!
For example, I try to draw candles in yAxis visible range from 0.0001 to 0.00014842, and when I zoom, it switches to the visible range from 1 to -1, collapsing my candles.
Please, help to solve this problem.
- Artem Smirnov asked 3 years ago
- last active 3 years ago
- Big Sur 11.6.
- Monterey 12.2.1
- Catalina 10.15.7 (late 2013 model)
![enter image description here][1]
sciChart version 1.4.1611
If you open the chart in the Firefox browser, then, strangely enough, everything works.
Is it related to the version of the library?
- Alexandr Zhuk asked 2 years ago
- last active 2 years ago
After moving from version: 1.4.1575 to version: 1.4.1611 we are seeing the the Cursor modifier replicating across all the charts in our dashboard. Obviously this is not desirable. I’ve attached screenshots to show this.
Please could you advise?
- Henrique Rodrigues asked 3 years ago
Hello, I`d like to ask u about cursor view. As default cursor I want use crosshair and as move grabbing as showed in attachment. How can I do that ?
- test11111 123 asked 3 years ago
- last active 2 years ago
Hi
Is there any way to Create an image (as png) of an scichart surface and store it in Clipboard for later use in javascript?
- Ferdinand Staudhammer asked 3 years ago
- last active 3 years ago
Hi,
I am trying to get my chart to scroll together with my other HTML elements but have not been successful. Referring to the screenshot attached, if I were to disable the position:absolute style the chart is then able to scroll with the HTML elements if not, whenever I scroll the other HTML elements would scroll but the Chart will stay in its position.
Is there property that I can set on the chart to disable the absolute position?
- yeung weng thong asked 3 years ago
- last active 3 years ago
It’s impossible to zoom a candlestick chart (other types as well) on mobile browsers & WebViews.
I’m trying to use pinch-to-zoom with my fingers on chart, but it doesn’t react on it. Only sliding on the left & right is possible.
I’ve even tried demo from documentation:
https://demo.scichart.com/javascript-realtime-ticking-stock-charts
The same is with my chart as well
How can I fix it?
Thank you
- Roman Zio asked 3 years ago
- last active 3 years ago
When I’m viewing a chart from mobile browser, quality of graphics is very low.
I can see pixels and some blurred graphics on mobile browsers. But it’s completely ok on the desktop browsers.
I reproduced it with an official example:
https://demo.scichart.com/javascript-realtime-ticking-stock-charts
- Roman Zio asked 3 years ago
- last active 1 year ago
I want to use my custom image as a background for SciChart js.
I tried to put background-image to body of the page.
Then I enabled transparent background via:
sciChartSurface.backgroundCompletelyTransparentEnabled = true;
But it doesn’t work. It does nothing.
Then I tried to put transparent background to SciChart:
sciChartSurface.background = "#00000000";
But it doesn’t work as well. Chart completely disappears in this case.
How can I put my image as a background for SciChart?
- Roman Zye asked 3 years ago
- last active 3 years ago
I am having problem instantiating SciChart.js within a specific project and was hoping you might be able to help. To provide context I can run SciChart fine in simple projects and I suspect that I have a webpack issue.
When running a simple graph instantiation such as –
import React, { useEffect } from "react";
import ReactDOM from "react-dom";
import { SciChartSurface } from "scichart/Charting/Visuals/SciChartSurface";
import { NumericAxis } from "scichart/Charting/Visuals/Axis/NumericAxis";
export function MipsGraph(props) {
useEffect(() => {
initSciChart();
});
return (
<div id="depthGraph" style={{height: "100%"}} ></div>
);
}
async function initSciChart() {
const { sciChartSurface, wasmContext } = await SciChartSurface.create("depthGraph");
const xAxis = new NumericAxis(wasmContext);
const yAxis = new NumericAxis(wasmContext);
sciChartSurface.xAxes.add(xAxis);
sciChartSurface.yAxes.add(yAxis);
}
I see the following error
Uncaught (in promise) RuntimeError: abort(TypeError:
WebAssembly.instantiate(): Import #0 module=”env” error: module is not
an object or function). Build with -s ASSERTIONS=1 for more info.
and the warning –
wasm streaming compile failed: TypeError: WebAssembly.instantiate():
Import #0 module=”env” error: module is not an object or function
The warning is raised at line 7544 (after pretty print in chrome dev tools) of scichart2d.js?formatted at a line calling WebAssembly.instantiateStreaming(e,d). both e and d have values.
Debugging originally led me to believe that there was an issue finding the scichart2d.wasm file however network traffic clearly shows the file being fetched.
Any ideas?
- Paul Hodgson asked 3 years ago
- last active 3 years ago
I have been trying to integrate Scichart JS in my Ionic 5 (Capacitor) application, but didn’t get succeed on that. I really need help on that
- Subham Dandapat asked 3 years ago
- last active 3 years 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
@TypeScriptError Getting an 800A0404 error when opening any javascript file. This is happening in the Windows Script Host panel. Telling me that I have bad code, that’s not bad. This has been happening since upgrading my Java Version.
- julie diane asked 2 years ago
- last active 2 years ago
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 year ago
- last active 1 year ago
I have been working with the new Overview Chart feature available in the new 2.0.0-beta.2084 release, and ran into an issue where I can remove lines from the overview surface no problem, but then I always receive an error whenever I try to add one.
I was just wondering if there is a recommended flow for when a parent chart’s renderable series array has traces added or removed. One thing I did try to circumvent this issue was to delete the old overview and add a new one, but I receive either a separate error or the overview would draw without any traces.
I have attached a file with example code that should display the error I receive when you add a line to an overview component. I have also attached an image of the error that appears in the console.
- Drew Afshari asked 3 years ago
- last active 3 years 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 need to set VerticalLineAnnotations without a label.
My setting is:
const verticalLineAnnotation = new VerticalLineAnnotation({
stroke: "ff2626",
strokeThickness: 3,
x1: -1,
showLabel: false,
isEditable: true,
isHidden: true
});
When the user needs the annotation the VerticalLineAnnotation is made visible by setting isHidden = false. After setting it to false an exception is thrown with following content: “TypeError: Cannot read properties of undefined (reading ‘left’)”.
- René Völkel asked 2 years ago
- last active 2 years ago
Is it possible to display the values always on the chart.
- Arun Surendran asked 2 years ago
- last active 2 years ago
Is it possible to add the text to the chart and display it to the chart?
Please see the attached image. In our application its a realtime chart. need to add the text based on x axis. it should be moved based on zoom and pan.
- Arun Surendran asked 2 years ago
- last active 2 years ago
I am getting an error trying to initialize chart inside the shadow root element:
sciChartInitCommon.js:224 Chart div element with the ID "my-unique-chart-id is not present in the DOM
or
sciChartInitCommon.js:43 Uncaught (in promise) Error: Check div element with id "my-unique-chart-id" exists
Is there overrides for SciChartSurface.create method to pass target html node instead of it`s ID? Or maybe I have missed any other built-in way to use SC inside shadow DOM? Thanks for the advise.
- Sergey Chernyakov asked 2 years ago
- last active 2 years ago
I am considering applying server-side licensing for my javerScript application.
In the document below, there is a phrase “Our server-side licensing component is written in C++.”
(https://support-dev.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?
- Gang Xu asked 2 years ago
- last active 2 years ago
Hello
My application environment is on the mobile browser, so we need to switch between [pan] and [rollover]
When I use a button to switch, everything is fine, but when I want to switch with a long press, an exception occurs
Below is my code
initModifier() {
this.partitionList.forEach((obj, idx)=>{
let sciChartSurface = this.sciObj[idx].sciChartSurface;
this.zoomPanModifier[idx] = new ZoomPanModifier();
this.rolloverModifier[idx] = new RolloverModifier({modifierGroup: this.modifierGroupId, showTooltip: false});
this.zoomPanModifier[idx].isEnabled = true;
// 擴增功能
sciChartSurface.chartModifiers.add(
this.zoomPanModifier[idx],
new ZoomExtentsModifier(),
new MouseWheelZoomModifier(),
new PinchZoomModifier(),
);
});
},
switchCross() {
let enablePan = !this.zoomPanModifier[0].isEnabled;
this.partitionList.forEach((obj, idx)=>{
let sciChartSurface = this.sciObj[idx].sciChartSurface;
this.zoomPanModifier[idx].isEnabled = enablePan;
if (enablePan)
sciChartSurface.chartModifiers.removeAt(4);
else
sciChartSurface.chartModifiers.add(this.rolloverModifier[idx]);
});
},
I recorded a video, first use the button to switch, and then long press to switch, you can see the problem I want to narrate from the video, the URL is as follows: https://youtu.be/vJjbLNGS-iM
After the problem occurred, it was expected that touchmove should be [pan], but it became [zoom]
Thanks for your help
- chinghung lai asked 2 years ago
- last active 2 years ago
Good day,
I am evaluating the use of scichart.js as a charting tool for our web dashboard in an offline environment. As a way of testing, I am currently trying to deploy the build of demo-create-react-app from the SDK on IIS. The build works if deployed using serve -s build but I get this error when I try to deploy the build on IIS.
I would also like to confirm if Scichart.js can work in an offline environment since I saw in this forum post that SciChart gets the .wasm and .data files from the CDN.
- Yohann Gabrielle Ticzon asked 2 years ago
- last active 2 years ago
I create custom annotation with nested input. In the code, I specify the autofocus property.
But autofocus only works once after page reload. With any manipulations with the chart (zoom, scrolling) – autofocus stops working.
Can you help me ?
- Taras Shevchenko asked 2 years ago
RubberBandXyZoomModifier Zoom visibleRangeChanged not hitting when zooming. Can you check this? or any callback function when zooming the chart?
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 {XyScatterRenderableSeries} from "scichart/Charting/Visuals/RenderableSeries/XyScatterRenderableSeries";
import {EllipsePointMarker} from "scichart/Charting/Visuals/PointMarkers/EllipsePointMarker";
import {NumberRange} from "scichart/Core/NumberRange";
import {RubberBandXyZoomModifier} from "scichart/Charting/ChartModifiers/RubberBandXyZoomModifier";
import {ZoomExtentsModifier} from "scichart/Charting/ChartModifiers/ZoomExtentsModifier";
import {ZoomPanModifier} from "scichart/Charting/ChartModifiers/ZoomPanModifier";
import {EZoomState} from "scichart/types/ZoomState";
import { EExecuteOn } from "scichart/types/ExecuteOn";
import { EXyDirection } from "scichart/types/XyDirection";
async function initSciChart() {
const {sciChartSurface, wasmContext} = await SciChartSurface.create("scichart-root");
const xAxis = new NumericAxis(wasmContext);
const yAxis = new NumericAxis(wasmContext);
xAxis.visibleRangeChanged.subscribe((args) => {
console.log("X Axis changed");
});
yAxis.visibleRangeChanged.subscribe((args) => {
console.log("Y Axis changed");
});
sciChartSurface.xAxes.add(xAxis);
sciChartSurface.yAxes.add(yAxis);
const scatterSeries = new XyScatterRenderableSeries(wasmContext, {
pointMarker: new EllipsePointMarker(wasmContext, {width: 7, height: 7, fill: "White", stroke: "SteelBlue"}),
});
const lineSeries = new FastLineRenderableSeries(wasmContext, {stroke: "#4083B7", strokeThickness: 2});
sciChartSurface.renderableSeries.add(lineSeries, scatterSeries);
const scatterData = new XyDataSeries(wasmContext, {dataSeriesName: "Cos(x)"});
const lineData = new XyDataSeries(wasmContext, {dataSeriesName: "Sin(x)"});
for (let i = 0; i < 1000; i++) {
lineData.append(i, Math.sin(i * 0.1));
scatterData.append(i, Math.cos(i * 0.1));
}
scatterSeries.dataSeries = scatterData;
lineSeries.dataSeries = lineData;
sciChartSurface.chartModifiers.add(new RubberBandXyZoomModifier({
xyDirection: EXyDirection.XDirection
}));
const updateDataFunc = () => {
const i = lineData.count();
lineData.append(i, Math.sin(i * 0.1));
scatterData.append(i, Math.cos(i * 0.1));
if (sciChartSurface.zoomState !== EZoomState.UserZooming) {
xAxis.visibleRange = new NumberRange(i - 1000, i);
}
setTimeout(updateDataFunc, 1 / 60);
};
updateDataFunc();
}
initSciChart();
Please check the example with v2.0.2146. Its working with older version and now its not working.
On the example the first time it will print the console. after that when zooming the change callback is not hitting.
- Arun Surendran asked 2 years ago
- last active 2 years ago
Hi, I want to color the axis label by its value,
eg.
value < 0 -> show red color
value = 0 -> show gray color
value > 0 -> show green color
similar to this question, but in javascript platform, it seems the LabelProvider has function related to the value(string) formatting only. Is there any ways to styling the label? Thanks!
- chinghung lai asked 2 years ago
- last active 2 years ago