Category: JavaScript

I have two charts in my app. Is there a way that I can make a rollover tooltip on a heatmap chart and the x visible range updates accordingly on another chart when the cursor moving around on the heatmap?

I had this function in Android version with the method InternalUpdate from CustomHeatmapTooltip which extended from UniformHeatmapTooltip. I wonder if there’s a listener for the tooltip.

Thanks.

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?

Looking to try and “link” two timeseries charts when either one is zoomed. The link aspect would be updating the other chart to have the same visible range as the zoomed chart.

Each chart has its visibleRange property updated in response to separate socket events, that happen at similar intervals but different.

Originally, was hoping to have something similar to the onZoomExtents method that fires a callback that would allow me to grab the latest min/max of the visibleRangeProperty of the xAxes to then update the other chart.

Any suggestions on how I could go about doing this?

And if it is not clear what I am talking about I can provide some code snippets.

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?

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?

A client responded that the line diagram drawn by scient.js on the mobile phone could not be seen.
We follow the user’s log and find that there is such content

2022/09/21 07:02:27.981 exception thrown: RuntimeError: function signature mismatch,RuntimeError: function signature mismatch
            at <anonymous>:wasm-function[2101]:0x5fc72
            at <anonymous>:wasm-function[1355]:0x2a029
            at <anonymous>:wasm-function[2409]:0x7ef3a
            at Ch (<anonymous>:wasm-function[4028]:0x12f27f)
            at r._main (<anonymous>:16:687711)
            at Object.Ma [as callMain] (<anonymous>:16:688823)
            at <anonymous>:16:565075

2022/09/21 07:02:27.981 Could not load SciChart WebAssembly module.
            Check your build process and ensure that your scichart2d.wasm, scichart2d.data and scichart2d.js files are from the same version

.
We try to reproduce many different devices. At present, it seems that only the device will happen. The following is the information of the device

Hi,

We found that the part of our project that uses scichart does not work correctly on iOS12, and then we tried to open a browser on iOS12 to the scichart javascript demo webpage, and found that it did not work.

What is the minimum iOS version supported by javscript scichart?

I am working on a proof of concept for our company to move some of our desktop apps to the web. We use SciChart WPF in our desktop apps so we are going with SciChart.JS for the web apps. Is it possible to stack the FastLineRenderableSeries in SciChart.JS like we do in WPF?

Edit: Found the answer just after I posted this question.

sciChartSurface.layoutManager.leftOuterAxesLayoutStrategy = new LeftAlignedOuterVerticallyStackedAxisLayoutStrategy();

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 ?

How can I rotate the axis titles in SciChat JS?

We want the the titles Fp1 and Fp2 to be rotated so they are horizontal on the screen instead of vertical.

I have a large data set that I can’t really load into memory at once so instead I am paging the data, grabbing only what I require plus a little buffer either side so that the graph always has something in it.

To implement paging I need to change the position at which the graph starts rendering, unfortunately it seems that it is not possible to change UniformHeatmapDataSeries.xStart as set in the constructor.

Is the only way around this to recreate the heatmap from scratch every time a new page is loaded or am I missing another trick?

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

Hi,

Is it possible to either rotate a TextAnnotation, not necessarily by user interaction but even just in code to have text going vertically?

Cheers,

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?

Hello I have been having a difficult time getting the correct time displayed on my xAxis and labels.

Passing in an xValue to an OHLC data series of 60 and the setting cursorLabelFormat: ENumericFormat.Date_DDMMHHMM this should produce a label “01/01 00:01” With the year as 1970.

When the computers timezone is set to UTC + 0 this behaves as expected.

However when the computers timezone is set to anything negative (UTC – 7) the label is formatted as “31/12 00:01” with the year 1969. If scichart is trying to convert to local time I would expect a reading of “31/12 17:01” 1969.

And when the timezone is set to anything positive (UTC + 7) the label is formatted as it is UTC +0 “01/01 00:01” 1970 again I would expect the hour to corrispond to the UTC offset if scichart is trying to convert to local time.

Looking at the later case I would assume that no time conversion is taking place which is what I would prefer. But looking at the former case (UTC -X) there appears to be some manipulation happening somewhere, I just have not been able to find any documentation explaining this. Am I missing something to get this to work properly out of the box without a custom label provider?

Thank you,

Update:

I do not want to worry about timezones. I want sciChart to plot the time that I give it. Again this is acting as expected when the computer timezone is in anything greater than UTC 0. But when the computer timezone is less than UTC 0 the label and axes are showing a date 24 hours prior to what I give it.

See attached images for the error. Note the only change that is happening is changing the computer timezone from UTC – 4 to UTC + 4.

See below for code setting up the chart.

Why is changing the computer timezone affecting the data labels?

export async function example(element) {
    let { sciChartSurface, wasmContext } = chartInstances.hasOwnProperty(element.id) && chartInstances[element.id];

    // initialize sciChart and add created chart to chartInstances
    if (sciChartSurface === undefined) {
        const newContext = await SciChartSurface.create(element.id);
        sciChartSurface = newContext.sciChartSurface;
        wasmContext = newContext.wasmContext;
        chartInstances[element.id] = { sciChartSurface, wasmContext };
    }

    //create and add xAxis
    let xAxis = new CategoryAxis(wasmContext, {
        drawLabels: true,
        drawMajorTickLines: true,
        drawMinorTickLines: true,
        axisAlignment: EAxisAlignment.Bottom,
        autoRange: EAutoRange.Once,
        cursorLabelFormat: ENumericFormat.Date_DDMMHHMM,
        labelFormat: ENumericFormat.Date_DDMMYYYY,
    });

    sciChartSurface.xAxes.add(xAxis);

    //create and add yAxis
    let yAxis = new NumericAxis(wasmContext, {
        maxAutoTicks: 5,
        autoRange: EAutoRange.Always,
        growBy: new NumberRange(0.3, 0.11),
        axisAlignment: EAxisAlignment.Right,
        labelPrecision: 4
    });
    sciChartSurface.yAxes.add(yAxis);

    //add chart modifiers
    sciChartSurface.chartModifiers.add(new ZoomPanModifier({ xyDirection: EXyDirection.XDirection }));
    sciChartSurface.chartModifiers.add(new ZoomExtentsModifier({ xyDirection: EXyDirection.XDirection }));
    sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier({ xyDirection: EXyDirection.XDirection }));
    sciChartSurface.chartModifiers.add(new RolloverModifier({ modifierGroup: "first", showTooltip: false }));
    sciChartSurface.chartModifiers.add(new CursorModifier(
        {
            crosshairStroke: "#9598a1",
            crosshairStrokeDashArray: [10, 5],
        }));

    //apply desired theme
    sciChartSurface.applyTheme(new SciChartJSDarkTheme());

    //create three bars 
    _ohlcDataSeries = new OhlcDataSeries(wasmContext, {
        xValues: [60,120,180], //1 min, 2 min, 3 min post epoch
        openValues: [10,10,10],
        highValues: [15,15,15],
        lowValues: [5,5,5],
        closeValues: [11,11,11],
        dataSeriesName: "PriceDataSeries"
    });

    //create and style fastCandRendSeries
    const fcRendSeries = new FastCandlestickRenderableSeries(wasmContext,
        {
            dataSeries: _ohlcDataSeries,
            strokeThickness: 1,
            dataPointWidth: 0.5,
            brushUp: "#50ff50B2",
            brushDown: "#ff5050B2",
            strokeUp: "#50ff50",
            strokeDown: "#ff5050",
            animation: new WaveAnimation({ fadeEffect: true, duration: 800 })
        });
    sciChartSurface.renderableSeries.add(fcRendSeries);
}

I have combed through KB articles and other documentations and samples here and SO, but I am not able to fix the issue. I am desperate for any help.

I have a react app that shows the chart, but at the top of the page, I have a header section and the remaining height is filled with Chart. All the samples and answers that I have seen thus far has no header section on the page. So the chart is 100% filled within it’s container. But, in my case the chart does not fit its container width & height and I end up with a scroll-bar. This is especially evident when you maximize the page (Chrome maximize window).

I am on Windows 10.

I have attached the code and a screen-shot of what the resulting page in Chrome. I have tried with and without CSS and it made no difference in terms of chart filling its container.

React Code:

import { useCallback, useEffect, useState } from 'react';
import { createRoot } from 'react-dom/client';
import './Chart-styles.scss';
import { SciChartSurface } from 'scichart/Charting/Visuals/SciChartSurface';
import { NumericAxis } from 'scichart/Charting/Visuals/Axis/NumericAxis';
import { getSciChartLicense } from '../common/chartUtils';

const Chart = () => {
const [chartId] = useState('line-chart');

const initChartAsync = useCallback(async () => {
    const { sciChartSurface, wasmContext } = await SciChartSurface.create(chartId);

    const xAxis = new NumericAxis(wasmContext);
    const yAxis = new NumericAxis(wasmContext);
    sciChartSurface.xAxes.add(xAxis);
    sciChartSurface.yAxes.add(yAxis);
}, []);

useEffect(() => {
    SciChartSurface.setRuntimeLicenseKey(getSciChartLicense());
    initChartAsync()
        .catch(error => {
            console.error('ChartRenderer | useEffect | initChartAsync failed!', error);
        });
}, [chartId]);

return (
    <div className="App">
        <div className='App-header'>
            <h2>Chart Header</h2>
            <h3>Chart Sub-Header</h3>
        </div>
        <div
            id={chartId}
            style={{width: '100%', height: '100%'}}
        />
    </div>
);
};

const container = document.getElementById('app');
const root = createRoot(container!);
root.render(<Chart/>);

Chart-Style.scss

#app {
    display: flex;
    flex-flow: column nowrap;
    margin: 0;
    padding: 0;
}

.App {
    flex: 1 1 auto;
    display: flex;
    flex-flow: column nowrap;
    text-align: center;
}

.App-header {
    flex: 0 1 auto;
    display: flex;
    flex-flow: column nowrap;
    background-color: #855b24;
    color: white;
    h2 {
        background-color: #2e2e2d;
        flex: 0 1 auto;
        margin: 0;
        padding: 2px;
    }
    h3 {
        background-color: #5c5c5b;
        flex: 0 1 auto;
        margin: 0;
        padding: 2px;
    }
}

#line-chart {
    flex: 1 1 auto;
}

Hello,

I have a BlazorWASM app. I am wondering how to sync the x values of different renderable series that have different number of data points.

In a simple form, I am passing in the data for a moving average to be rendered on the chart that has already been populated with data. The moving average data has already been calculated and has the correct date timestamps. But when I add this series to the chart it is starting at index 0 of where the the price data started instead of where the xAxis date of this renderable series has.

I prefer not to use the filters api to regenerate this data as some will be complex and have already been calculated by study or pulled from a database. I have seen the article to offset a series but this seems unnecessary since I already have the x axis coordinate that I want each point of the new line series to be rendered.

Is there somewhere in the docs that I missed how to get these renderable series to line up properly to their own x data points?

Thank you

Hi. I’m trying to add 3DChart to my vue project. And I have a question about the configuration. Can I download .data and .wasm files from the CDN.

For 2D charts , I’ve used recomendation of your release v.2.2:
SciChartSurface.useWasmFromCDN()
It works for me. How I can use CDN for SciChart3DSurface?

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.

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

How to setup SciChart.js in React native frame work?

Hi,

I would like to display the rollovermodifier line that must be parallel to the X axis and the Rollovermodifier line must be a dashed line. In the y axis I need to add a label annotation with svg .How can I fix the problem. Kindly provide me the solution.

This is the code I have given,

const horizontalline = new RolloverModifier({
IsEnabled: true,
DrawVerticalLine: true,
showTooltip: false,
rolloverLineStroke: “white”,
rolloverLineStrokeThickness : 1
})
sciChartSurface.chartModifiers.add(horizontalline);