Tag: javascript

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

RenderableSeries Hit-Test is not working as expected. Some bugs on the the RenderableSeries Hit-Test. Distance between two points are less then its working most of the time and getting the isHit variable getting true. But the distance is high then the lines near to the point only getting the isHit true. I am attaching the image when the red marked area is working fine and the blue marked area not working.

The value of SciChart in Silverlight is the browser hosting capability. With Silveright on its way out, there appears to be no replacement for SciChart in a browser. However, there is a very good public domain project called Fayde that has re-implemented the Mono Moonlight code as Typescript. Fayde lets you port C#/XAML to Javascript surprisingly easily.

Have you looked at Fayde, and do you foresee a (possibly stripped-down) SciChart version for Fayde?

Fayde: https://wsick.github.io/Fayde/

Hello,
I am trying to make an annotation draggable. I tried setting the isEditable property to true, but nothing happened. I can’t find the right documentation for draggable annotations . My code for creating the Annotation it’s below:

sciChartSurface.annotations.add(new LineAnnotation({
    stroke: "#279B27", strokeThickness: 3,
    xCoordinateMode: ECoordinateMode.DataValue,
    x1: 0,
    x2: 0,
    yCoordinateMode: ECoordinateMode.Relative,
    y1: 0,
    y2: 1,
    isEditable: true,
}));

Remove the white spaces on the chart when we using drawLabels: false. I am using multiple x-axes and no of x-axis increase the empty white space on the x-axis is also increasing.

Hi,
sciChartSurface.chartModifiers.clear() is getting error on the application. Its working on previous version and getting error on 1.4.1557.

Multiple instances of sci chart any appearance changes reflecting on other instances. When I changed the background of one instance the same is reflected in the other instance. I have updated with createSingle to resolve this issue, But i am getting one alert when using createSingle.

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.

Hi, Custom tooltip is not working on v2.0.2179.
Its working on v2.0.2146. Can you please check the issue..

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 { RangeSelectionChartModifier } from "./RangeSelectionChartModifier";
import { RubberBandXyZoomModifier } from "scichart/Charting/ChartModifiers/RubberBandXyZoomModifier";
import { MouseWheelZoomModifier } from "scichart/Charting/ChartModifiers/MouseWheelZoomModifier";
import { EXyDirection } from "scichart/types/XyDirection";
import { ZoomExtentsModifier } from "scichart/Charting/ChartModifiers/ZoomExtentsModifier";
import { EClipMode } from "scichart/Charting/Visuals/Axis/AxisBase2D";
import { MouseButtonZoomChartModifier } from "./MouseButtonZoomChartModifier";
import { SeriesInfo } from "scichart/Charting/Model/ChartData/SeriesInfo";
import { CursorTooltipSvgAnnotation } from "scichart/Charting/Visuals/Annotations/CursorTooltipSvgAnnotation";
import { CursorModifier } from "scichart/Charting/ChartModifiers/CursorModifier";



async function initSciChart() {
    const { sciChartSurface, wasmContext } = await SciChartSurface.create("scichart-root");

      const xAxis = new NumericAxis(wasmContext);
      const yAxis = new NumericAxis(wasmContext);

      sciChartSurface.xAxes.add(xAxis);
      sciChartSurface.yAxes.add(yAxis);

      const xyData = new XyDataSeries(wasmContext);
      for (let i = 0; i < 250; i++) {
        xyData.append(i, Math.sin(i * 0.1));
      }
      sciChartSurface.renderableSeries.add(
        new FastLineRenderableSeries(wasmContext, { dataSeries: xyData })
      );

      const cursorModifier = new CursorModifier({
        crosshairStrokeThickness: 1,
        showTooltip: true,
        showAxisLabels: false,
        crosshairStroke: "transparent",
      });
      cursorModifier.tooltipSvgTemplate = (seriesInfo, svgAnnotation) => {
        let rowString = "";
        seriesInfo.forEach(() => {
          rowString = rowString + `<tspan x="8" dy="1.2em" fill="red">Test : 123</tspan>`;  
        });

        const string = `<svg width="300" height="33" x="0"><defs>
            <filter id="id_1610011455082" x="0" y="0" width="200%" height="200%">
            <feOffset result="offOut" in="SourceAlpha" dx="3" dy="3"></feOffset>
            <feGaussianBlur result="blurOut" in="offOut" stdDeviation="3"></feGaussianBlur>
            <feBlend in="SourceGraphic" in2="blurOut" mode="normal"></feBlend>
            </filter>
            </defs>
            <rect rx="4" ry="4" width="95%" height="90%" style="stroke-width:1;stroke:'#ffffff'}"></rect>
            <svg width="100%"><text x="8" y="3" font-size="13" font-family="Verdana" dy="0">`;

        svgAnnotation.xCoordShift = 5;
        svgAnnotation.yCoordShift = 5;
        return string + rowString + `</text></svg></svg>`;
      };
      sciChartSurface.chartModifiers.add(
        cursorModifier
      );


      const mouseWheelModifier = new MouseWheelZoomModifier();
      mouseWheelModifier.modifierMouseWheel = args => {
        const delta = args.mouseWheelDelta * 0.1;
        mouseWheelModifier.parentSurface.xAxes.asArray().forEach(x => {
          x.scroll(delta, EClipMode.None);
        });
      };
      sciChartSurface.chartModifiers.add(
        new RubberBandXyZoomModifier({ xyDirection: EXyDirection.XDirection })
      );
      sciChartSurface.chartModifiers.add(mouseWheelModifier);
      sciChartSurface.chartModifiers.add(new ZoomExtentsModifier());
  }

   initSciChart();

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

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

Is it possible to display the values always on the chart.

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.

On the vertical chart custom tooltipSvgTemplate seriesInfo isHit returns false always. Its working fine on the normal chart. Can you please check this issue is on verticle chart.

On Vertical chart Label overlapping on smaller height. I have tried maxAutoTicks also and on the lower height, it’s getting one error. This error is occurring when the width is 0 sometimes. Can you please check this issues?

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.

I am getting a console error when using isVisible: false to the FastLineRenderableSeries or FastMountainRenderableSeries and CursorModifier together.

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?