Pre loader

Tag: javascript

Welcome to the SciChart Forums!

  • Please read our Question Asking Guidelines for how to format a good question
  • Some reputation is required to post answers. Get up-voted to avoid the spam filter!
  • We welcome community answers and upvotes. Every Q&A improves SciChart for everyone

WPF Forums | JavaScript Forums | Android Forums | iOS Forums

0 votes
78 views

I am trying to add sci chart in nextjs app and its failing with a message “Aborted(both async and sync fetching of the wasm failed)”.
I have updated next config – webpack with :
const destWasmFolder = “static/chunks/pages”;
config.plugins.push(new CopyPlugin({
patterns: [
{ from: “node_modules/scichart/_wasm/scichart2d.wasm”, to: destWasmFolder },
]
And installed the package copy-files-from-to and created a file “copy-files-from-to.json in the root directory with content:
{
“copyFilesSettings”: {
“whenFileExists”: “overwrite”
},
“copyFiles”: [
{
“from”: “./node_modules/scichart/_wasm/scichart2d.data”,
“to”: “./public/scichart2d.data”
}
]
}

And updated package.json script with “”dev”: “cross-env NODE_OPTIONS=\”-r next-logger\” copy-files-from-to && next dev”

0 votes
0 answers
57 views

Hi everyone,
Wanted to check if there is an existing implementation of NonUniformGridDataSeries3D in js. Had a use case that requires plotting of a 3d mesh with non-uniform grid. I could only find UniformGridDataSeries3D. Can someone please help?

0 votes
172 views

When displaying a value in a stacked column chart, if the value is negative, the negative value should be drawn from the 0 position of the y-axis or from below the other negative value if it exists. Similarly, the positive value after the negative should be drawn from the 0 position of the y-axis or from above the other positive value if it exists. But instead, in both cases, they are being drawn from the end of the previous value, resulting in overlapping.

0 votes
0 answers
165 views

(Copied from GitHub issue)
Issue:
In an attempt to wrap the SciChart Server Licensing shared object using java (JNA), I ended up with strange behavior when calling any function which returns char *. In Java, the returned pointer memory does not start at the correct offset which holds the string value and therefore invalid characters are returned.

Hypothesis:
My guess, after evaluation, is that either the function is returning some std::string object, or that it is actually returning say str.c_str() where str is an std::string. The issue is that returning str.c_str() causes the reference to be dropped once it is out of scope, this means that a dangling pointer is returned. I ended up needing to wrap the function calls in another extern C layer to get the desired functionality in Java, see link below for snippets and attached zip files for source.

Server Licensing GitHub Issue

0 votes
297 views

I wanted to customized my box annotation further, for example, I wanted to give my box annotation some border radius, it seem like there is no way to do so currently.

I know that there is custom annotation like svg annotation, but those are svg, the reason Custom annotation doesn’t work for me is because they are not responsive to zooming since they are image/svg, unlike normal box annotation.

For example, for normal box annotation, I can give it x1 to x2 so that when I zoom in the chart, the box annotation expanded. But for Custom annotation, they only take one x point for placement, so I can not cover x1 to x2, it only going to stay on x1.

So, I wonder if there is currently a way I can add border radius to a box annotation, or is there a plan to do so in the future?

Let me know, thank you!

  • Nung Khual asked 1 month ago
  • last active 1 month ago
0 votes
674 views

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?

  • Gopika V asked 2 months ago
  • last active 2 months ago
1 vote
0 answers
836 views

Hi, im facing a problem related to VisibleRange Auto,
when a value is much higher than the values
already plotted and I try to scroll along the X axis,
the value on the Y axis does not fully show the candle.

Please see the attached images.

As you can see, the biggest value of my last candle is 41.75, however,
the numberRange that is being used in VisibleRange Auto is 41.63.

Is there any way around this?

1 vote
0 answers
981 views

I have a design where I want to show something like a box at the top of the chart and when hovering on it, it should show up a tooltip with some info, the issue I’m running into is the fact that I can’t seem to find way I can add tooltip to box annotation other than adding another box annotation when hover or hit, but it seem that it is not recommended base on my previous post before.

I also looked into scatterXY series or pointMarker, the issue with Point marker or scatter series is that I can only set one x and y, but my design require the box to be from a certain x1 point to x2 point. I can probably try to calculate the width and set the width to the point marker, but I would rather not if there is a better way.

Also looked into column chart, but that also have the same issue of only one x and y point and not sure about tooltip, but definitely seem more promising than annotation.

Please let me know if there is a better way to accomplish this, thank you!

The image below is the design.

  • Nung Khual asked 3 months ago
  • last active 3 months ago
1 vote
1k views

I want to use a different color for each value in the chart I created here. To put it simply, if the value is greater than 10, I want it to appear yellow, if it is less than green, and red if it is less than 0. thanks

const { sciChartSurface, wasmContext } = await SciChartSurface.create("scichart-root", {
    theme: new SciChartJSLightTheme(),   
});
sciChartSurface.applyTheme(new SciChartJSLightTheme());
sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
sciChartSurface.yAxes.add(new NumericAxis(wasmContext));
const yAxis = sciChartSurface.yAxes.get(0);
yAxis.visibleRange = new NumberRange(LAL, UAL);
const xAxis = sciChartSurface.xAxes.get(0);
xAxis.visibleRange = new NumberRange(0, endBarIndex);

const dataSeries = new OhlcDataSeries(wasmContext, {
    xValues: xValues,
    openValues: yValues,
    highValues: compositeScanAverageArray,
    lowValues: yValues,
    closeValues: compositeScanAverageArray,
});
const renderableSeries = new FastCandlestickRenderableSeries(wasmContext, {
    dataSeries,
    stroke: "white",
    strokeThickness: 1,
});

sciChartSurface.renderableSeries.add(renderableSeries);
sciChartSurface.annotations.add(
    new SciChart.BoxAnnotation({
        stroke: "yellow",
        strokeThickness: 1,
        fill: "rgba(255, 255, 0, 0.3)",
        x1: 0,
        x2: endBarIndex,
        y1: UAL,
        y2: UWL,
    })
);
sciChartSurface.annotations.add(
    new SciChart.BoxAnnotation({
        stroke: "yellow",
        strokeThickness: 1,
        fill: "rgba(255, 255, 0, 0.3)",
        x1: 0,
        x2: endBarIndex,
        y1: LAL,
        y2: LWL,
    })
);
sciChartSurface.annotations.add(
    new SciChart.BoxAnnotation({
        stroke: "green",
        strokeThickness: 1,
        fill: "rgba(0, 128, 0, 0.3)",
        x1: 0,
        x2: endBarIndex,
        y1: LWL,
        y2: UWL,
    })
);
sciChartSurface.annotations.add(
    new SciChart.LineAnnotation({ stroke: "#FF6600", strokeThickness: 3, x1: startBarIndex, x2: endBarIndex, y1: compositeScanAverage, y2: compositeScanAverage }),
);

sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier());
sciChartSurface.chartModifiers.add(new ZoomPanModifier());

}

1 vote
1k views

Hi,
Is it possible to add the scrollbar in the chart. If the visibleRangeLimit is set is it possible to add the normal scrollbar in the side of the chart.

1 vote
2k views

Hi, we are using CategoryAxis to display stock data, however, as you can see in the image below, within the “same” candle or volume, divergent information is displayed.

am I doing something wrong?

1 vote
2k views

I am new to scichart javascript library and trying to run the provided examples locally. I was working on this example
https://www.scichart.com/documentation/js/current/The%20Candlestick%20Series%20type.html

I am able to run this example locally. now I want to add cursor snapping in it. An example would be tradingview candlestick charts. in those charts cursor snaps to nearest candles.
I am trying to achieve similar. I looked into the docs but couldn’t find the answer.

Thanks !

1 vote
2k views

When I’m using a BoxAnnotation, and it is selected, I can see that the borders are shown expanding past the chart area, on top of the axes.
Ideally they would have the same behaviour as the normal stroke, and keep constrained to the chart area.

Codepen showing the issue: https://codepen.io/jrfv/full/bGzqvoE

Am I missing some configuration to make this work?

Thanks!

1 vote
2k views

Hi,

I am facing another issue with dataLabels in latest version of Scichart. I saw another question with similar is already posted and the fix is released.

Can you check this code.

I tried to reproduce the issue with the vue js example code, codesandbox. But the issues is behaving differently in example code, codesandbox, and my existing project.

codesandbox: https://codesandbox.io/s/scichart-error-6xc6jw?file=/src/index.ts
codesandbox:- Text in the bottom area are displayed and top area no labes are displayed.

I am attaching the vue js file also. Please check the file also, On the example no labels are displayed.

I am attaching the video of my project also, Here the labels are invisible sometimes, sometimes the labels are showing not properly. Video Link: https://drive.google.com/file/d/1vZ0lO5xdmN9VfFGXMaoTPfTgqRytrEAl/view?usp=sharing

1 vote
2k views

Hello everyone. A similar question has already been asked just below the forum, but there is no answer. I have dynamically added diagrams. However, I am interested in the possibility of adding buttons for closing and collapsing diagrams directly to the chart panel. I need the option to close any selected chart. How can this be implemented and written? Thank you.

0 votes
2k views

Good afternoon. Scichart WPF has two built-in small buttons in the top right corner of the panels for collapsing and closing charts. How can you add such buttons in Scichart javascript and how to correctly describe the functions?

1 vote
2k views

I want to be able to disable a chart if there is no data on it, and then enable the chart when there is data. The reason why I want to do that is because I have three charts that are sync and I want to disable the other charts that have no data, so that the cursor modifier or the zooming and stuff will not affect the other charts without data and will only affect the one with data.

Attached image is 3 charts that are in sync.

  • Nung Khual asked 7 months ago
  • last active 7 months ago
1 vote
9k views

Hi, so I need to get the data of an annotation when clicked, I have tried with addEventListener ‘mousedown’ event and it work for most case, but the issue comes when some annotations are overlapping.

codesandbox example: https://codesandbox.io/s/vertically-stacked-axes-forked-smkd8v?file=/src/App.tsx

In the codesandbox example, you will see that M1 and M2 are overlapping, if I were to click on M2, the click event will return both M1 and M2, but I only want M2 to be return since I only click on M2.

I couldn’t make the clicking to work on codesandbox but I’m sure you get the idea. I have tested it on my local and I got that issue.

Please let me know if you got any other question, thank you.

  • Nung Khual asked 7 months ago
  • last active 7 months ago
1 vote
2k views

As if right now, I have create a custom annotation, which is a red circle and the idea is to show some info when hovering on it, like a tooltip.

Right now, when hovering on the red circle, I am adding another custom annotation to show the info and then removing it when not hovering anymore. The issue with this is that it is not very stable, as in if I don’t point my cursor right in the middle of the red circle, it won’t register as hit. I tried putting hitTestRadius to 50 on CursorModifier, but doesn’t seem to make any difference.

I have also try with xyScatterRenderableSeries and EllipsePointMarker, the issue I find with it is that it is interfering with my data series tooltip, as the cursor modifier recognize it as a chart series and try to show on the tooltip, which I don’t want. I only want the red circle to be trigger only when cursor is right on it.

The first image is my code and how I am trying to achieve it at the moment, it does work, but I don’t think it’s very stable, I wish there is a more natural way to do it.

The second image is how my current solution looks like, as you can see, the data series tooltip is overlapping it, which I want to avoid. I can’t think of a way to solve the overlapping issue yet. Other than unstableness and the tooltip overlapping, it work fine.

The third image is how I want it to look like.

  • Nung Khual asked 7 months ago
  • last active 7 months ago
1 vote
2k views

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 7 months ago
  • last active 7 months ago
0 votes
2k views

Hi,

If the FastMountainRenderableSeries isVisible is true when creating a series and after sometimes tries to change the visible property and getting error from rolloverModifier.

Can you please check the example i have created.

1 vote
6k views

Hi,

EDataLabelSkipMode Customization is possible with some time range limit?
When i checked the documentation saw the options to skip the label for overlaping. Is it possible can add some index to skip the values. Eg: for Time chart One value is displayed in the chart at 10:30:00. So if i add some index value to skip the next 1 min data. So based on skip index next available value can ba displayed in chart. (10:31:00 or next available value). Can you implement this option to skip ?

1 vote
6k views

Hi,

I am facing a issue with latest version of SciChart. Because of this type error not able to build the project. Can you check this error.

1 vote
6k views

Hi, I want to create info boxes between xAxis and chart, info box will contain text, but the width/position of the box will be base on the xAxis and should sync with the chart (zoom etc). For example, if xAxis is from 1-100, and the first info box start from 1 to 10, then the width/position of the box should cover from 1-10, and if I zoom between 1-10, then info box should also sync and expand.

So far, I have created it using horizontal stacked xAxes and custom axis layout strategy provided by you. But the issue is that the stacked xAxes are not sync with the chart, for now, to make it seem sync, I am recalculating stacked axis length when zoom. But the issue comes when there should be gap between the info boxes, for example, if xAxis is 1-100 and the first box is 1-10 and the second box is 20-40, then there is a gap of 10 between the first and second. Right now, those gap are filled using empty xAxes, but they are not correct. When there is gap, the position of the boxes are wrong.

  • First image is my current implementation of it using custom axis layout and stacked xAxes.
  • Second image is how it look when zoomed
  • Third image is the gap issue with the current implementation
  • Fourth image is how the correct implementation should look like.

Codesanbox example:
https://codesandbox.io/s/scichart-stacked-xaxis-stacked-length-issue-3knt23?file=/src/App.tsx

  • Nung Khual asked 9 months ago
  • last active 9 months ago
1 vote
6k views

Hi, I have an issue where I am trying to create multiple xAxes where one is normal and the rest are horizontally stacked. Then I calculate the stacked length of each stacked axes, but the issue comes when I change the width of the chart or inspect element, which would alter the width of the chart somehow, I got error saying the total width of the stacked axes is bigger than available size.

I have a codesanbox example of it:
https://codesandbox.io/s/scichart-stacked-xaxis-stacked-length-issue-3knt23?file=/src/App.tsx

I am using percentage for the stacked xAxes length and then I added them up to be 100% total, but somehow it is saying that it is more than available size.

So, my question is, how can I listen or get the width/size changes event of the chart/xAxis, so that I can calculate accordingly?

  • Nung Khual asked 9 months ago
  • last active 9 months ago
1 vote
865 views

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/support/solutions/articles/101000515345-scichart-js-domain-licensing-faq)

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?

1 vote
2k views

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 10 months ago
  • last active 9 months ago
0 votes
2k views

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
1 vote
6k views

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.

https://www.scichart.com/questions/js/failed-to-update-the-zvalues-size-of-uniformheatmapdataseries-in-heatmap

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 1 year ago
  • last active 1 year ago
1 vote
2k views

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?

1 vote
6k views

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 year ago
  • last active 1 year ago
0 votes
5k views

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
1 vote
6k views

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?

  • thier tom asked 1 year ago
  • last active 1 year ago
1 vote
6k views

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 1 year ago
  • last active 1 year ago
1 vote
5k views

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.

1 vote
0 answers
8k views

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?

1 vote
0 answers
6k views

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.

1 vote
4k views

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 !!

1 vote
2k views

The project is developed on SciChart JS.

The x axis is date time numeric and y axis is numeric.

There is a option for the user to select the x axis interval. The interval values are 5 Min, 10 Min, 15 Min, 30 Min, 1 Hour, 6 Hour, 12 Hour, Days, Weeks, Months & Years.

When the user the selects a interval in the select option, the x axis should be updated with the selected interval.

For Example, If the user selects the 5 Min in the select option, then the x axis interval should be 5 Min.

For 5 Min X Axis Interval

16-Jan-2023 07:00
16-Jan-2023 07:05
16-Jan-2023 07:10
16-Jan-2023 07:15
16-Jan-2023 07:20
16-Jan-2023 07:25
16-Jan-2023 07:30

For 1 Hour X Axis Interval

16-Jan-2023 07:00
16-Jan-2023 08:00
16-Jan-2023 09:00
16-Jan-2023 10:00
16-Jan-2023 11:00
16-Jan-2023 12:00
16-Jan-2023 13:00
16-Jan-2023 14:00

So let me know how to change the interval in the x axis (date time numeric) based on the selection.

I have attached the zip file which contains the HTML file.

  • Leo Leslin asked 1 year ago
  • last active 6 months ago
1 vote
2k views

How to achieve the Sci Chat functionality in JavaScript . I want to update the list instead of removing a range of data from the dataseries.

1 vote
2k views

The SciChart Legend and Cursor Tooltip (Showed only Y axis value) are not display after changing the graph layout.
I need to show the graph legend and Tooltip for all the Y axis.

The chart should also show the x axis value and y axis value on the Tooltip for more clarity.

Before changing the layout the legend was showing the five series vertically one below the other. But i need to show the five legends in horizontally (One after the another).

I have added the chart definition code. The data is added though Ajax call and code for that ajax call is not added.

I have attached the image for your reference.

I have attached the zip file with the html file.

1 vote
3k views

I am using the MouseWheelZoomModifier and ZoomExtentsModifier on the line chart. Beside double clicking the chart area to Zoom Extents the chart, I would like to add a button outside the chart and this button will trigger the Zoom Extents. Is it possible to do it?

  • Kelly Chan asked 2 years ago
  • last active 2 years ago
1 vote
4k views

Hi,

I am using SciChart trial version to create a a simple line chart but when running an application for a while, I got this error in the dev console log – not sure what the root cause is but it seems to come from SciChart library

screenshot

  • Atanai W. asked 2 years ago
  • last active 2 years ago
0 votes
6k views

Hi,

I have an issue with Rollover modifier line styling in sci chart using java script. we need the horizontal dashed line for the rollover modifier. How is it possible?

  • Ayana VS asked 2 years ago
  • last active 2 years ago
1 vote
3k views

Hi,

In my application I am hiding some of the line chart by changing the visibility. When changing the visibility the markers is not hiding from the chart. Its happening only the mouse pointer is inside the chart before the visibility change. I have created a sample application and created the video recording also. Please check the attached file for example code and video. On the video you can saw that 2 line visibility is changed and line are hidden from the chart and the markers not hiding from the chart.

1 vote
5k views

Hey, how would I go about adding a custom template for the cursor axis labels using the Javascript 2D chart API?

I’d like the x-axis to not just have a date in MM/DD/YYYY format but a date and time displayed. The current implementation is below, and below that is the desired implementation.

Current: https://ibb.co/qJgJ36j

Desired: https://ibb.co/XzTkDgw

I have looked through the documentation but I may have missed something. If I have, please point me in the right direction, thanks!

1 vote
3k views

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

0 votes
3k views

Hello,

I have a Blazor WASM app running Scichart JS. In attempting to get any of the filters working listed in the Filters API docs I am unable to build my application and get thrown an error.

As listed in Moving Average Filter Docs I import the XyMovingAverageFilter:

import { XyMovingAverageFilter } from ‘scichart/Charting/Model/Filters/XyMovingAverageFilter’;

Run npm install and build the application and I get the error:
Module not found: Error: Can’t resolve ‘scichart/Charting/Model/Filters/XyMovingAverageFilter’ in …

So far I have not run into any issues getting any of the Scichart JS APIs working in this manner.

  • Leland asked 2 years ago
  • last active 2 years ago
1 vote
3k views

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

0 votes
3k views

Do you have Fibonacci Arcs and Retracements in JavaScript charts? If yes could you please provide a sample to build them.

Showing 1 - 50 of 84 results