Category: JavaScript

Questions

0 votes

2 answers

4k views

Transposing heatmap zValues array

JavaScript Heatmap scichartjs

Hi,

Is it possible to specify that incoming zValues array matrix is an array of columns, instead of an array of rows?

e.g. if I pass this:

[
[1,2,3],
[4,5,6],
[7,8,9]
]

[1,2,3] is the first column, not the first row.

We want to avoid transposing this data manually before passing it to the heatmap, because our data arrives one column at a time via a websocket subscription, and the data is too large to efficiently re-transpose every time.

I can’t see anything in the docs or the code?

Thanks
Joe

Henrique Rodrigues asked 3 years ago
last active 3 years ago

1 vote

2 answers

7k views

Is npm installation and configuration required for SciChart JS?

JavaScript

Hi,

Our website is running on a web hosting service supported by the university. To work with the SciChart JS, do we have to install the npm and configure it accordingly? If so, we probably have to contact IT department for assistance, since we don’t have permission to do so.

Please advise. Thanks.

Gang Xu asked 3 years ago
last active 10 months ago

3 votes

2 answers

4k views

LegendModifier callback function available for check and uncheck the series

JavaScript LegendModifier javascript

Hi,

In my application I am using two charts for represent different values. I am using LegendModifier on the first chart. Is it possible when i uncheck the series on first chart and the same color series on second chart also need to hide from the second chart. Any event callback function available in LegendModifier ?

Arun Surendran asked 2 years ago
last active 2 years ago

1 vote

2 answers

6k views

Depth Chart

JavaScript #depthChart

Good afternoon. My team and I are looking at your library to create a depth chart, like here, but have run into a few problems:
1. if we have, for example, a “buySeries” array larger than the “sellSeries” array, the graph is not drawn very nicely.
2. the labels are not drawn correctly when we have too small numbers, I tried to solve the problem with xAxis.textFormatting = ‘0.#####’ or ‘0.00###’, but that doesn’t work for some reason.
3. If we want to add labels while hovering over the chart with showLabel = true , then we get 4 labels, two on yAxis. is it possible to make the buySeries label appear only on the left, for example, and the sellSeries label only on the right? (second screenshot)

Andrew Smidth asked 1 year ago
last active 1 year ago

1 vote

2 answers

6k views

Memory problem

JavaScript Memory

I have a big problem with memory, i try many things but it’s doesn’t effect.
It’s my code for testing memory :

    const { wasmContext, sciChartSurface } = await SciChartSurface.create("bandTest", { theme: new SciChartJSLightTheme() });
    sciChartSurface.title = "Axis 1";
    sciChartSurface.xAxes.add(new NumericAxis(wasmContext, { axisTitle: "Column number", axisTitleStyle: {fontSize: 12} }));
    sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { axisAlignment: EAxisAlignment.Left, axisTitleStyle: {fontSize: 12} }));
    setTimeout(sciChartSurface.delete(),2000);

sciChartSurface.delete() have no effect for memory
I run snapshot without this code and another snapshot with this code. (snap 14 is before call SciChart and snap 15 is after call the code bellow)

What can I do?

Regards

Marjorie lesage asked 10 months ago
last active 9 months ago

1 vote

2 answers

2k views

How can I make the text annotation stick to the box annotation on zoom?

JavaScript BoxAnnotation TextAnnotation javascript

I am using the solution you provided on, https://www.scichart.com/questions/js/is-it-possible-to-create-info-box-that-will-sync-with-the-xaxis-of-the-chart.

The solution work great but there is one issue, the issue is that the text annotation should always be visible.

The issue with this solution is that the text annotation disappear if I zoom in somewhere not the text area.

Also another issue is that, in this example, the first info box x1 is beyond the current range, and so the text annotation is not visible, since the x1 of the text annotation is the same as info box and x1 is not within the current range.

First image show the first red info box x1 is not within current range, therefore not showing text annotation and the second info box working as expected with text annotation.

The second image show what happen once I zoom in on the right side away from the text annotation, then the ‘#21H’ is not visible anymore, which is wrong. Just like in my previous question example, the text annotation should always be visible, other than that, everything work great.

Thank you and let me know if there is any question.

Nung Khual asked 8 months ago
last active 8 months ago

1 vote

2 answers

6k views

switch ZoomPanModifier/RolloverModifier Error when trigger by LongTab(LongPress)

JavaScript RolloverModifier Modifier

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

1 vote

2 answers

2k views

Stop zooming on small visible range

JavaScript zoom

Hello,

We have a heatmap where we can zoom in using the MouseWheelZoomModifier. Essentially we want to stop zooming at a certain visibleRange level and we cannot achieve it. Currently we have a heatmap that’s about 1500 pixels in width (with 1500 datapoints, 1-to-1), but the user can zoom so far you essentially see just 1 data point spread over the 1500 pixels.

We want to be able to zoom, but up to a certain limit, let’s say 100 datapoints visible. When visibleRange.max – visibleRange.min <= 100 we want to stop zooming.

We’ve tried suspendUpdates() and manually setting the visibleRange, but this doesn’t produce the desired results because suspendUpdates stops everything (including zooming out again) and resetting visibleRange solves it for a second, but the user is able to zoom in again. We also tried a custom mouseWheelModifier class and just removing the zoom in functionality at the treshold but that does not seem to work because scichart gives an error of having different mouseWheelModifiers.

I hope that this problem was expressed sufficiently. Please let us know if you have any questions.