Category: JavaScript

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?

Can I implement a feature in SciChart that allows me to pause and resume rendering activity on a SciChart renderable surface when a user clicks on the SciChart renderable surface?

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 have a chart in the center of the page and the chart will resize according to the browser window size. When I expand the browser window, the chart will expand to fit the browser size. In this case, the chart grows downward gradually (with animation). How can I remove this animation effect when resizing the chart?

In case it’s related to my style. Here are my markup and style for reference:

//Markup

//Style
.contentPanel {
flex: 1 1 auto;
width: calc(100% – 335px);
max-height: calc(100vh – 108px);
display: flex;
flex-direction: column;
}

.chartContainer {
position: relative;
margin: 10px 0;
display: flex;
flex-direction: column;
flex: 1;
}

.scichart-root {
width: 100%;
height: 100%;
}

When hardware acceleration is not enabled from the client side i am getting the follwong error in the console and the chart becomes empty.
Can we have a caetain fallback ui for this error so that when hardware acceleration is disabled we can show some error in the client side instead of frozen screen

I’m trying to add rollover / tooltip to a chart, which uses sweeping. First, everything is working fine, but after updating the data over more then one page, the rollover is messing around with the data.

I created a codesandbox with the vitalsign demo: https://codesandbox.io/p/sandbox/javascript-vital-signs-ecg-medical-chart-example-forked-2zqcs3

First the rollover works great. Wait until the data is updated to the left side. Then you’ll see the messed up values and rollover points.

I have a simple need to display a horizontal heatmap based on values along the x-axis. So if value on x-axis is 1, color shown on the heatmap should be orange, if the next value is 2, red color bar appears to next the previous orange etc. Something like this (see attached graphic also):

Heatmap: [=orange=red=green]
values along x-axis: [22.05, 24.00, 30.00 ]

So the code I am trying is as follows:

export async function renderHeatMap(element) 
{
    const { sciChartSurface, wasmContext } = await SciChartSurface.create(element);

    sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
    sciChartSurface.yAxes.add(new NumericAxis(wasmContext));

    var heatMapData = zeroArray2D([1, 5]);
    heatMapData[0][0] = 22.05; //should appear as color1 in heatmap
    heatMapData[0][1] = 24.00; //...
    heatMapData[0][2] = 30.00; //should appear as color2 in heatmap
    heatMapData[0][3] = 26.75;
    heatMapData[0][4] = 30.00; //should appear as color3 in heatmap

    const heatmapDataSeries = new UniformHeatmapDataSeries(wasmContext, 0, 1, 0, 1, heatMapData);

    const heatmapSeries = new UniformHeatmapRenderableSeries(wasmContext, {
        dataSeries: heatmapDataSeries,
        colorMap: new HeatmapColorMap({
            minimum: 20, // min value in the zValues (data) to map to offset 0 in the colormap
            maximum: 30, // max value in the zValues (data) to map to offset 1 in the colormap
            gradientStops: [
                { offset: 0, color: "#00008B" },
                { offset: 0.3, color: "#7FFF00" },
                { offset: 0.7, color: "#FFFF00" },
                { offset: 1.0, color: "#FF0000" },
            ],
        }),
    });

    sciChartSurface.renderableSeries.add(heatmapSeries);
}

But this only displays an empty grid. I don’t see a heatmap. Anyone can point out what may be wrong? Not even the axis is showing up correctly.

I am using SciChartSurface.create() to create chart and it works well. However, I got the webGL memory issue randomly – WebGL memory issue. I am trying to apply a workaround to use SciChartSurface.createSinge() instead. The createSingle() function doesn’t work for me, the chart cannot be rendered.

const { sciChartSurface, wasmContext } = await SciChartSurface.createSinlge(`${chartId}-chart-root`, { theme: themeObj });

There is no error showing in the developer tool console. I have no idea what’s wrong.

I have a top chart that is a heatmap and there is another bottom chart that is a temperature map. I want the heatmap not show any y-axis labels but still keep the x-axis start aligned from the left side. I tried turning off the y-axis lables (which I do not need in the heatmap), but that moves the heatmap to the left and not kept aligned with the bottom chart.

const yAxis = new NumericAxis(wasmContext, {
autoRange: EAutoRange.Always,
labelFormat: ENumericFormat.Decimal,
labelPrecision: 2,
labelPostfix: "C",
drawLabels: false
});
The above code hides the y-axis labels but also removes the space on the left side so the x-axis of both graphs does not remained aligned. I need a way to somehow keep the start of x-axis aligned for both top and bottom graphs.

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?

I’m trying to add an AxisMarkerAnnotations for some line series on my chart.

I was following these questions answered here:
https://www.scichart.com/questions/js/adding-axis-markers-to-fastlinerenderableseries
https://www.scichart.com/questions/js/price-indicators-on-yaxis

I managed to render the axis marker for my series. Now I’m trying to the set the Y value of the marker annotation as the value where the line intersects the Y Axis.
I want the marker value to be the last value of the series, only if the xAxis.visibleRange.max > series.XdataRange.max.

The two attached images show the desired feature.
One shows the marker annotation with the Y1 being the one where the line intersects the YAxis.
The other shows the marker annotation with the Y1 being the last value of the line, because it is visible.

I read some answers here on the forum about using the HitTest API to do this, but I couldn’t make it work on my JS app

Hello,

I am currently developing an application using Electron (v. 8.3.0), React (v. 17.0.1), and TypeScript (v. 4.0.5). I have created a simple demo app (see attached) to test this software, and I found that whenever the application window is resized, there is an “Uncaught null” error from scichart2d.js caught by the console. I also found that at some window dimensions, it even seems that the chart cannot properly be displayed and it will try to constantly rerender, quickly filling up the console with the same error.

A couple of notes:

• I currently am using a trial key.
• I am compiling this application using electron-webpack (https://webpack.electron.build/). It has a few built-in tools that ease the compilation/app creation process when combining Electron with other frameworks. This means some of the webpack API being used is abstracted, but we can append our own (see webpack.renderer.additions.js), more information can also be found at https://webpack.electron.build/modifying-webpack-configurations.
• Electron v. 8.3.0 uses Chromium 80, so all features should be supported.

Hi,

We use SciChart extensively in our WPF applications and make use of CustomRenderableSeries, writing all kinds of different lines and bitmaps directly to the IRenderContext2D depending on the point metadata.

We’re now looking at doing something similar in JavaScript, but can’t find any examples of this kind of customisation in the documentation. In the JavaScript library, is it possible to draw directly to a ‘canvas’ in the same way as in the WPF version? If so, could you please point to an example?

Many thanks,

Graham.

Hello,

I want to render a base64 image in ScichartJS without actually rendering it in DOM. I saw that you have these guides in WPF:
https://support.scichart.com/index.php?/Knowledgebase/Article/View/17213/34/
https://www.scichart.com/documentation/win/current/webframe.html#Screenshots,_Printing_and_Export_to_XPS.html

However it is difficult to achieve it in Typescript. Is there a guide or any ideas on how to do it? I would appreciate any answer.

Hello,

Can you show this example(https://codepen.io/PodaRocheK/pen/yLGxGEL?editors=0011) and tell me, why metadata labels are not displayed in some cases? May be you can tell me how to do it correctly? A have similar chart with a lot of datapoints and can’t understand why labels show only in some time(20s or > 1m after start the chart)

Thank you!

I recently upgraded SciChart from version 2 to version 3.0.266. It was working fine. But I got error (please refer to the attached screenshot) when I try to run my application today. It’s so strange as it worked fine yesterday and I didn’t make any codes change today.

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.

I have a bunch of series (XyScatterSeries) that I am using to draw different markers (triangle, circle, cross) based on the data. I also have couple line series too in the chart.

The line series should be displayed in the LegendModifier, but not any of the scatter series.

I tried setting “includeSeries” function here but that didn’t work (typescript kept complaining about it but I kept it and while running the app it didn’t hide the series):

return new LegendModifier({
        showCheckboxes: true,
        orientation: ELegendOrientation.Vertical,
        placement: ELegendPlacement.TopRight,
        includeSeries: (series: IRenderableSeries, isIncluded: boolean): void => { return false; },
    });

Then I created my own class “MyLegendModifier” deriving from LegendModifier, but that didn’t do anything either.

class MyLegendModifier extends LegendModifier {
    constructor(options?: ILegendModifierOptions) {
        super(options);
    }

    includeSeries(series: IRenderableSeries, isIncluded: boolean) {
        console.log('includeSeries:', series.id);
        if (series.id.startsWith('BUY:') || series.id.startsWith('SELL:')) {
            isIncluded = false;
        }
        super.includeSeries(series, isIncluded);
    }
}

Any advise please.

Hello,

Is it possible to access the native canvas context to draw on the javascript chart surface? like for example, draw a circle or arc using HTML5 canvas apis.

-jackson

Hello!

Tell me what I’m doing wrong?
Here’s the code

import { NumericAxis } from "scichart/Charting/Visuals/Axis/NumericAxis";
import { FastLineRenderableSeries } from "scichart/Charting/Visuals/RenderableSeries/FastLineRenderableSeries";
import { EllipsePointMarker } from "scichart/Charting/Visuals/PointMarkers/EllipsePointMarker";
import { RolloverModifier, TRolloverTooltipDataTemplate } from "scichart/Charting/ChartModifiers/RolloverModifier";
import { ZoomPanModifier } from "scichart/Charting/ChartModifiers/ZoomPanModifier";
import { ZoomExtentsModifier } from "scichart/Charting/ChartModifiers/ZoomExtentsModifier";
import { MouseWheelZoomModifier } from "scichart/Charting/ChartModifiers/MouseWheelZoomModifier";
import { SciChartSurface } from "scichart";
import { parseColorToUIntArgb } from "scichart/utils/parseColor";
import {  XyDataSeries } from "scichart/Charting/Model/XyDataSeries";
import { CategoryAxis } from "scichart/Charting/Visuals/Axis/CategoryAxis";
import { TextLabelProvider } from "scichart/Charting/Visuals/Axis/LabelProvider/TextLabelProvider";
import { Thickness } from "scichart/Core/Thickness";
import { ELabelAlignment } from "scichart/types/LabelAlignment";

const dataData=[
  "2022-10-22 00:09:41",
  "2022-10-22 00:19:37",
  "2022-10-22 00:29:16",
  "2022-10-22 00:38:51",
  "2022-10-22 00:49:49",
  "2022-10-22 00:59:37",
  "2022-10-22 01:09:25",
  "2022-10-22 01:19:26",
  "2022-10-22 01:28:35",
  "2022-10-22 01:38:47",
  "2022-10-22 01:48:29",
  "2022-10-22 01:58:30",
  "2022-10-22 02:09:11",
  "2022-10-22 02:18:45",
  "2022-10-22 02:28:41",
  "2022-10-22 02:38:38",
  "2022-10-22 02:48:53",
  "2022-10-22 02:59:39",
  "2022-10-22 03:08:51",
  "2022-10-22 03:19:00",
  "2022-10-22 03:28:30",
  "2022-10-22 03:38:51",
  "2022-10-22 03:49:01",
  "2022-10-22 03:58:35",
  "2022-10-22 04:08:47",
  "2022-10-22 04:19:11",
  "2022-10-22 04:29:05",
  "2022-10-22 04:38:39",
  "2022-10-22 04:48:46",
  "2022-10-22 04:58:57",
  "2022-10-22 05:08:22",
  "2022-10-22 05:18:30",
  "2022-10-22 05:29:09",
  "2022-10-22 05:38:56",
  "2022-10-22 05:48:35",
  "2022-10-22 05:58:34",
  "2022-10-22 06:08:26",
  "2022-10-22 06:18:58",
  "2022-10-22 06:28:33",
  "2022-10-22 06:38:56",
  "2022-10-22 06:48:42",
  "2022-10-22 06:58:55",
  "2022-10-22 07:08:59",
  "2022-10-22 07:19:03",
  "2022-10-22 07:28:28",
  "2022-10-22 07:38:18",
  "2022-10-22 07:48:35",
  "2022-10-22 07:58:18",
  "2022-10-22 08:08:22",
  "2022-10-22 08:18:43",
  "2022-10-22 08:29:01",
  "2022-10-22 08:38:59",
  "2022-10-22 08:49:16",
  "2022-10-22 08:59:13",
  "2022-10-22 09:09:24",
  "2022-10-22 09:18:36",
  "2022-10-22 09:28:56",
  "2022-10-22 09:39:13",
  "2022-10-22 09:48:35",
  "2022-10-22 09:59:14",
  "2022-10-22 10:09:18",
  "2022-10-22 10:19:04",
  "2022-10-22 10:29:34",
  "2022-10-22 10:39:14",
  "2022-10-22 10:48:53",
  "2022-10-22 10:58:40",
  "2022-10-22 11:08:58",
  "2022-10-22 11:18:47",
  "2022-10-22 11:28:39",
  "2022-10-22 11:39:13",
  "2022-10-22 11:49:00",
  "2022-10-22 11:59:13",
  "2022-10-22 14:20:05",
  "2022-10-22 14:29:37",
  "2022-10-22 14:39:49",
  "2022-10-22 14:49:41",
  "2022-10-22 15:00:10",
  "2022-10-22 15:09:27",
  "2022-10-22 15:19:49",
  "2022-10-22 15:29:41",
  "2022-10-22 15:39:16",
  "2022-10-22 15:49:48",
  "2022-10-22 15:59:52",
  "2022-10-22 16:09:29",
  "2022-10-22 16:19:48",
  "2022-10-22 16:29:40",
  "2022-10-22 16:39:20",
  "2022-10-22 16:49:57",
  "2022-10-22 16:59:11",
  "2022-10-22 17:09:37",
  "2022-10-22 17:19:00",
  "2022-10-22 17:29:21",
  "2022-10-22 17:39:52",
  "2022-10-22 17:49:44",
  "2022-10-22 17:59:50",
  "2022-10-22 18:09:38",
  "2022-10-22 18:19:24",
  "2022-10-22 18:29:13",
  "2022-10-22 18:39:05",
  "2022-10-22 18:49:09",
  "2022-10-22 18:59:13",
  "2022-10-22 19:09:17",
  "2022-10-22 19:19:06",
  "2022-10-22 19:29:37",
  "2022-10-22 19:40:11",
  "2022-10-22 19:49:33",
  "2022-10-22 19:59:14",
  "2022-10-22 20:09:07",
  "2022-10-22 20:20:02",
  "2022-10-22 20:29:19",
  "2022-10-22 20:39:13",
  "2022-10-22 20:49:43",
  "2022-10-22 20:59:28",
  "2022-10-22 21:08:59",
  "2022-10-22 21:19:03",
  "2022-10-22 21:29:14",
  "2022-10-22 21:39:19",
  "2022-10-22 21:49:40",
  "2022-10-22 21:59:04",
  "2022-10-22 22:09:33",
  "2022-10-22 22:20:00",
  "2022-10-22 22:30:25",
  "2022-10-22 22:39:43",
  "2022-10-22 22:49:13",
  "2022-10-22 22:58:58",
  "2022-10-22 23:09:05",
  "2022-10-22 23:19:12",
  "2022-10-22 23:29:49",
  "2022-10-22 23:38:55",
  "2022-10-22 23:49:41",
  "2022-10-22 23:59:32",
  "2022-10-23 00:08:34",
  "2022-10-23 00:18:43",
  "2022-10-23 00:29:20",
  "2022-10-23 00:39:13",
  "2022-10-23 00:48:30",
  "2022-10-23 00:59:44",
  "2022-10-23 01:08:49",
  "2022-10-23 01:19:00",
  "2022-10-23 01:29:22",
  "2022-10-23 01:39:06",
  "2022-10-23 01:49:08",
  "2022-10-23 01:59:19",
  "2022-10-23 02:09:28",
  "2022-10-23 02:18:57",
  "2022-10-23 02:28:53",
  "2022-10-23 02:38:44",
  "2022-10-23 02:49:12",
  "2022-10-23 02:58:41",
  "2022-10-23 03:09:04",
  "2022-10-23 03:19:28",
  "2022-10-23 03:29:23",
  "2022-10-23 03:38:38",
  "2022-10-23 03:49:00",
  "2022-10-23 03:59:16",
  "2022-10-23 04:09:13",
  "2022-10-23 04:18:54",
  "2022-10-23 04:29:43",
  "2022-10-23 04:39:27",
  "2022-10-23 04:49:12",
  "2022-10-23 04:59:07",
  "2022-10-23 05:09:04",
  "2022-10-23 05:18:50",
  "2022-10-23 05:29:20",
  "2022-10-23 05:39:06",
  "2022-10-23 05:49:17",
  "2022-10-23 05:58:48",
  "2022-10-23 06:08:46",
  "2022-10-23 06:18:36",
  "2022-10-23 06:29:15",
  "2022-10-23 06:38:57",
  "2022-10-23 06:49:23",
  "2022-10-23 06:58:55",
  "2022-10-23 07:09:06",
  "2022-10-23 07:19:01",
  "2022-10-23 07:29:09",
  "2022-10-23 07:39:10",
  "2022-10-23 07:49:06",
  "2022-10-23 07:59:06",
  "2022-10-23 08:09:07",
  "2022-10-23 08:19:23",
  "2022-10-24 14:19:20",
  "2022-10-24 14:30:23",
  "2022-10-25 11:10:12",
  "2022-10-25 11:20:56",
  "2022-10-28 19:19:35",
  "2022-10-28 19:30:53",
  "2022-10-28 19:49:34"
]
const divElementId = "scichart-root"
class MyMetadata {
    static create(title, previousValue, isSelected) {
      const md = new MyMetadata()
      md.title = title
      md.previousValue = previousValue ?? md.previousValue
      md.isSelected = isSelected ?? md.isSelected
      return md
    }
  isSelected = false
  palettedStrokeRed = parseColorToUIntArgb("red")
  palettedStrokeGreen = parseColorToUIntArgb("green")
  constructor() {}
}

const tooltipDataTemplateRS = seriesInfo => {
    const valuesWithLabels = []
    // Line Series
    const xySeriesInfo = seriesInfo
    if (seriesInfo.pointMetadata) {
      const testMd = seriesInfo.pointMetadata
      valuesWithLabels.push(
        testMd.title + " Previous: " + testMd.previousValue.toFixed(1)
      )
    }
    valuesWithLabels.push(
      "X: " + xySeriesInfo.formattedXValue + " Y: " + xySeriesInfo.formattedYValue
    )
    return valuesWithLabels
  }

const color = "#368BC1"
const drawExample = async () => {
  const { sciChartSurface, wasmContext } = await SciChartSurface.create(
    divElementId
  )
  const xAxis = new CategoryAxis(wasmContext);
  const labelProvider = new TextLabelProvider({
     // When passed as an array, labels will be used in order
     labels: dataData,
     maxLength: 188
 });
 xAxis.labelProvider = labelProvider;
 xAxis.labelStyle.alignment = ELabelAlignment.Center;
 xAxis.labelStyle.padding = new Thickness(2,1,2,1);
 xAxis.axisRenderer.hideOverlappingLabels = false;
 xAxis.axisRenderer.keepLabelsWithinAxis = false;    
  sciChartSurface.xAxes.add(xAxis)
  const yAxis = new NumericAxis(wasmContext)
  sciChartSurface.yAxes.add(yAxis)
  for (let seriesIndex = 0; seriesIndex < 5; seriesIndex++) {
    const firstSeriesData = createDataSeries(wasmContext, seriesIndex, {
      dataSeriesName: "Sinewave"+seriesIndex
    })
    const renderableSeries1 = new FastLineRenderableSeries(wasmContext, {
      stroke: color,
      strokeThickness: 3,
      dataSeries: firstSeriesData,
      pointMarker: new EllipsePointMarker(wasmContext, {
        width: 5,
        height: 5,
        strokeThickness: 2,
        fill: "white",
        stroke: color
      })
    })
    renderableSeries1.rolloverModifierProps.markerColor = color
    renderableSeries1.rolloverModifierProps.tooltipColor = color
    sciChartSurface.renderableSeries.add(renderableSeries1)
    renderableSeries1.rolloverModifierProps.tooltipDataTemplate = tooltipDataTemplateRS
  }
  sciChartSurface.chartModifiers.add(new RolloverModifier())
  sciChartSurface.chartModifiers.add(new ZoomPanModifier())
  sciChartSurface.chartModifiers.add(new ZoomExtentsModifier())
  sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier())
  sciChartSurface.zoomExtents()
  return { sciChartSurface, wasmContext }
}
// Generate some data, including metadata
const createDataSeries = (wasmContext, index, options) => {
  const sigma = Math.pow(0.6, index)
  const dataSeries = new XyDataSeries(wasmContext, options)
  let prev = 0
  for (let i = 0; i < 188; i++) {
    const grow = 1 + i / 99
    const metadata =i > 0 ? MyMetadata.create("Metadata " + i.toString(), prev) : undefined
    const y = Math.sin((Math.PI * i) / 15) * grow * sigma
    // metadata is an optional parameter on all data manipulation methods on dataseries,
    // so it can also be added as an array eg dataSeries.appendRange(xValues, yValues, metadataArray);
    dataSeries.append(i+1, y, metadata)
    prev = y
  }
  return dataSeries
}
drawExample()