Pre loader

Forums

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
2k views

Is it possible to change the heatmap legend from vertical to horizontal?

  • Quyen Sy asked 11 months ago
  • last active 10 months ago
1 vote
4k views

I have XyDataSeries with 50 data points and I’m trying to insert another 50 data points to index 5. The same values can be inserted as a range to the beginning of the data series or inserted one by one starting from index 5. But they fail with “RuntimeError: memory access out of bounds” whenever I try to insert them as a range from index 5.

Code snippet:

const { xValues, yValues } = generateData(50);
const dataSeries = new XyDataSeries(wasmContext, { xValues, yValues, isSorted: false });
sciChartSurface.renderableSeries.add(new FastLineRenderableSeries(wasmContext, { dataSeries }));

// this works
dataSeries.insertRange(0, xValues, yValues);
// this works
for (let i = 0; i < xValues.length; i++) {
  dataSeries.insert(i + 5, xValues[i], yValues[i]);
}
// this fails
dataSeries.insertRange(5, xValues, yValues);

Codesandbox link: https://codesandbox.io/s/scichart-js-boilerplate-forked-hokfcn

I wonder if I’m doing something wrong or if this is an actual issue?

Side note: Index 5 is just an example, because it seems I can use the insertRange method when inserting to index 0-2, but it fails when inserting to index 3+ (in case of a chart with 50 existing data points)

0 votes
12k views

I see in the documentation that I need to set the boolean to true/false. But my question is how do I do this after the series has been rendered? I am using a custom legend and need to be able to toggle visibility.

  export default function Chart() {
  const [sciChartSurface, setSciChartSurface] = React.useState<SciChartSurface>();
  const [wasmContext, setWasmContext] = React.useState<TSciChart>();

  const dataSeriesMapRef = React.useRef<Map<keyof typeof chartData, XyDataSeries>>();

  React.useEffect(() => {
    (async () => {
      const { sciChartSurface, wasmContext } = await drawChart(theme, chartType);
      setSciChartSurface(sciChartSurface);
      setWasmContext(wasmContext);
    })();

    dataSeriesMapRef.current = new Map<keyof typeof chartData, XyDataSeries>();

    return () => sciChartSurface?.delete();
  }, [chartType]); // make sure the chart is initialized only once

  React.useEffect(() => {
    if (dataSeriesMapRef.current && sciChartSurface && wasmContext && !isLoading) {
      // const currentSeries = sciChartSurface.renderableSeries.asArray();
      // if (currentSeries) sciChartSurface.renderableSeries.clear();
      updateChartWithData(dataSeriesMapRef.current, theme, wasmContext, sciChartSurface, chartData, chartType);
    }
  }, [theme, chartData, wasmContext, sciChartSurface, isLoading]);

  return (
    <div id="chart-container">
      <ControlsLegend
        chartData={chartData}
        dataSeriesMap={dataSeriesMapRef.current as Map<keyof typeof chartData, XyDataSeries>}
        theme={theme}
        sciChartSurface={sciChartSurface as SciChartSurface}
        wasmContext={wasmContext as TSciChart}
      />
      <div id={DIVID} style={{ width: windowWidth, height: windowHeight }} />
      <ControlsBottom />
    </div>
  );
}

drawChart.js

    export default async (theme: ExtendedTheme, chartType: string) => {
  const { sciChartSurface, wasmContext } = await SciChartSurface.create(DIVID);
  const isLightTheme = theme.palette.type === 'light';

  console.log('createChart');
  const xAxis = new NumericAxis(wasmContext);
  const yAxis = new NumericAxis(wasmContext);

  xAxis.labelProvider.formatLabel = (unixTimestamp: number) => {
    return new Date(unixTimestamp * 1000).toLocaleDateString('en-us', {
      month: 'short',
      year: 'numeric',
      day: 'numeric',
    });
  };

  yAxis.labelProvider = new CustomLabelProvider();

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

  if (chartType !== 'stack') sciChartSurface.chartModifiers.add(new RolloverModifier({ showRolloverLine: false }));
  sciChartSurface.chartModifiers.add(new ZoomPanModifier());
  sciChartSurface.chartModifiers.add(new ZoomExtentsModifier());
  sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier());
  sciChartSurface.chartModifiers.add(new PinchZoomModifier());

  const rubberBandXyZoomModifier = new RubberBandXyZoomModifier({
    isAnimated: true,
    animationDuration: 400,
    easingFunction: easing.outExpo,
    fill: '#FFFFFF33',
    stroke: '#FFFFFF77',
    strokeThickness: 1,
  });
  sciChartSurface.chartModifiers.add(rubberBandXyZoomModifier);

  sciChartSurface.zoomExtents();

  if (isLightTheme) sciChartSurface.applyTheme(new SciChartJSLightTheme());
  else sciChartSurface.applyTheme(new SciChartJSDarkTheme());
  return { sciChartSurface, wasmContext };
};

updateChartWithData.js

    export const updateChartWithData = (
  dataSeriesMap: Map<keyof typeof chartData, XyDataSeries>,
  theme: ExtendedTheme,
  wasmContext: TSciChart,
  sciChartSurface: SciChartSurface,
  chartData: ChartData,
  chartType: string
) => {
  sciChartSurface.invalidateElement();
  const streamIds = Object.keys(chartData);
  const isLightTheme = theme.palette.type === 'light';

  if (isLightTheme) sciChartSurface.applyTheme(new SciChartJSLightTheme());
  else sciChartSurface.applyTheme(new SciChartJSDarkTheme());

  sciChartSurface.invalidateElement();
  console.log('updateChartWithData');
  console.log(chartData);

  const stackedColumns: any[] = [];
  streamIds.forEach((s) => {
    const streamId = Number(s) as keyof ChartData;
    const streamSelectorId = streamId as keyof typeof chartData;
    if (dataSeriesMap.has(streamSelectorId)) {
      const xyDataSeries = dataSeriesMap.get(streamSelectorId);
      chartData[streamId].data.forEach((value) => {
        xyDataSeries?.append(value.timestamp, value.value);
      });
    } else if (chartType === 'scatter') {
      const lineSeries = LineChart(dataSeriesMap, theme, wasmContext, chartData, streamSelectorId, streamId);

      sciChartSurface.renderableSeries.add(lineSeries);
      sciChartSurface.zoomExtents();
    } else if (chartType === 'bar') {
      const lineSeries = BarChart(dataSeriesMap, theme, wasmContext, chartData, streamSelectorId, streamId);
      sciChartSurface.renderableSeries.add(lineSeries);
      sciChartSurface.zoomExtents();
    } else {
      const lineSeries = StackedChart(dataSeriesMap, theme, wasmContext, chartData, streamSelectorId, streamId);
      stackedColumns.push(lineSeries);
    }
  });
};

“LineChart.js”

    export default (
  dataSeriesMap: Map<keyof typeof chartData, XyDataSeries>,
  theme: ExtendedTheme,
  wasmContext: TSciChart,
  chartData: ChartData,
  streamSelectorId: keyof typeof chartData,
  streamId: keyof ChartData
) => {
  const xyDataSeries = new XyDataSeries(wasmContext);
  dataSeriesMap.set(streamSelectorId, xyDataSeries);

  const obj = chartData[streamSelectorId];
  const stroke = obj.stroke as string;
  xyDataSeries.dataSeriesName = obj.label as string;

  chartData[streamId].data.forEach((value) => {
    xyDataSeries.append(value.timestamp, value.value);
  });

  const lineSeries = new FastLineRenderableSeries(wasmContext, {
    stroke,
    strokeThickness: obj.strokeThickness,
    strokeDashArray: obj.strokeDashArray,
    dataSeries: xyDataSeries,
    animation: new WaveAnimation({ zeroLine: -1, pointDurationFraction: 0.5, duration: 1000 }),
  });

  lineSeries.rolloverModifierProps.tooltipColor = theme.palette.background.paper;
  lineSeries.rolloverModifierProps.tooltipTextColor = theme.palette.getContrastText(stroke);
  lineSeries.rolloverModifierProps.markerColor = stroke;
  lineSeries.rolloverModifierProps.tooltipTemplate = (
    id: string,
    tooltipProps: RolloverModifierRenderableSeriesProps,
    seriesInfo: SeriesInfo,
    updateSize: (width: number, height: number) => void
  ) => {
    const { tooltipColor, tooltipTextColor, markerColor } = tooltipProps;
    const { formattedXValue, yValue, seriesName } = seriesInfo;
    const width = 192;
    const height = 60;

    updateSize(width, height);
    return `<svg width='${width}' height='${height}' class="root">
        <rect width="100%" height="100%" fill='${tooltipColor}' stroke='${markerColor}' stroke-width='2' />
         <svg width='100%'>
           <text dy="0" fill='${tooltipTextColor}'>
            <tspan x="15" y="20" class="title">${formattedXValue}</tspan>
             <tspan x="15" y="45" class="value">
              ${seriesName} | ${yValue.toFixed(0).replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
             </tspan>
          </text>
        </svg>
      </svg>`;
  };
  return lineSeries;
};

lengend.js

    let _chartData: any[] = [];
export default ({
  dataSeriesMap,
  theme,
  wasmContext,
  sciChartSurface,
  chartData,
}: {
  dataSeriesMap: Map<keyof typeof chartData, XyDataSeries>;
  theme: ExtendedTheme;
  wasmContext: TSciChart;
  sciChartSurface: SciChartSurface;
  chartData: ChartData;
}) => {
  const classes = useStyles();

  const chartRef = React.useRef<any>([]);
  const [legendData, setLegendData] = React.useState<any[]>([]);

  // _chartData = [..._chartData, ...values(chartData)];
  _chartData = values(chartData);
  _chartData = uniqby(_chartData, 'groupId');
  _chartData = uniqby(_chartData, 'streamId');

  React.useEffect(() => {
    if (_chartData.length > 0 && !isEqual(chartRef.current, _chartData)) {
      setLegendData(_chartData);
      chartRef.current = _chartData;
    }
  }, [_chartData]);

  const onClick = React.useCallback(
    (item) => {
      // const xyDataSeries = dataSeriesMap.get(160);
      const _legendData = legendData.map((x) => {
        if (x.groupId === item.groupId) x.isVisible = !x.isVisible;
        return x;
      });

      setLegendData(_legendData);
    },
    [legendData]
  );

  return (
    <div className={classes.root}>
      <Paper variant="outlined" square>
        {legendData.map((item: any) => (
          <div className={classes.listItem} key={item.streamId}>
            <IconButton
              onClick={() => onClick(item)}
              style={{ color: item.stroke }}
              size="small"
              aria-label={item.label}
            >
              {item.isVisible ? <VisibilityIcon /> : <VisibilityOffIcon />}
            </IconButton>
            <div>{item.label}</div>
          </div>
        ))}
      </Paper>
    </div>
  );
};

Inside the onClick function is where I was trying to change visibility for both series. I’ve tried multiple things without any luck. I assumed it would be as simple as getting the correct series, setting the visible property and maybe a re-render if that is even needed? Like I said any advice on a better way of handling this is welcome

1 vote
2k views

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);

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

Hello, i want to customize tooltip in graph (SplineBandRenderableSeries), i can change the tooltip content but if i return svg like your example ( return <svg width="${width}" height="${height}">
<circle cx="50%" cy="50%" r="50%" fill="${tooltipColor}"/>
<svg width="100%">
<text y="40" font-size="13" font-family="Verdana" dy="0" fill="${tooltipTextColor}">
<tspan x="15" dy="1.2em">${tooltipTitle}</tspan>
<tspan x="15" dy="1.2em">x: ${seriesInfo.formattedXValue} y: ${seriesInfo.formattedYValue}</tspan>
</text>
</svg>
</svg>
))
It doesn’t work. I have this error in console: Error from chart in div band0 TypeError: valuesWithLabels.reduce is not a function
and
Error from chart in div band0 DOMException: Failed to execute ‘removeChild’ on ‘Node’: The node to be removed is not a child of this node.
at RolloverTooltipSvgAnnotation.delete …

My graph has 3 renderableSeries (1 XyDataSeries and 2 XyyDataSeries)

Please can you send me an example in (javascript) for modify tooltip styling ?

Thanks.

0 votes
0 answers
2k views

Hi,
As title, is any way to reach this requirement?
when drag the annotation but not appear the selected style. like circle point and around broder.

1 vote
8k views

I have a chart that allow users to add one BoxAnnotation and multiple CustomAnnotation (a marker). I got error and failed to drag the BoxAnnotation with the following steps:

Step 1: Call the addMarkerAnnotation() to add a CustomAnnotation

const markerSvgString = '<svg height="26" width="18" xmlns="http://www.w3.org/2000/svg">' +
    '<polygon id="SVG_ID" fill="#000" fill-opacity="0.5" stroke="#00fc00" stroke-width="1.5" points="0,12 8,0 16,12 8,24" clip-path="url(#clip_normal)" />' +
    '<clipPath id="clip_normal"><use xlink:href="#SVG_ID"/></clipPath>' +
    '<text x="5" y="16" fill="#00fc00" font-weight="bold" font-size = "12">MARKER_ID</text>' +
'</svg>';

const deltaSvgString = '<svg height="28" width="28" xmlns="http://www.w3.org/2000/svg">' +
    '<polygon id="SVG_ID" fill="#000" fill-opacity="0.5" stroke="#00fc00" stroke-width="1.5" points="0,0 12,24 22,0" clip-path="url(#clip_delta)" />' +
    '<clipPath id="clip_delta"><use xlink:href="#SVG_ID"/></clipPath>' +
    '<text x="5" y="10" fill="#00fc00" font-weight="bold" font-size="10">MARKER_ID</text>' +
'</svg>';

const addMarkerAnnotation = useCallback((markerId, mode, x1, y1) => {   
    x1 = parseFloat(x1);
    y1 = parseFloat(y1);

    if (x1 != null && y1 != null) {
        let svgString;
        const svgId = "markerSvg_" + markerId;

        if (mode.includes("Delta")) {
            const compareMarkerKey = mode.replace("Delta ", "");
            svgString = deltaSvgString.replace(/MARKER_ID/g, (parseInt(markerId)+1) + "-" + compareMarkerKey);
        } else {
            svgString = markerSvgString.replace(/MARKER_ID/g, parseInt(markerId)+1);
        }
        svgString = svgString.replace(/SVG_ID/g, svgId);

        markerAnnotations.current[markerId] = new CustomAnnotation({
            x1,
            y1,
            id: markerId,
            isEditable: true,
            isSelected: true,
            verticalAnchorPoint: EVerticalAnchorPoint.Center,
            horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
            svgString: svgString
        });
        sciChartSurfaceRef.current.annotations.add(markerAnnotations.current[markerId]);
        reorderMarkers(markerId);

        markerAnnotations.current[markerId].dragEnded.handlers.push(() => {
            let annotation = markerAnnotations.current[markerId];
            let freq = annotation.x1 * FREQ_UNITS.KHZ;

            markersInfoSetter.current[markerId](origMarkerInfo => ({...origMarkerInfo, ...{freq: freq.toFixed(numDP.FREQ), power: annotation.y1.toFixed(numDP.POWER)}}));

            if (markersInfoObj.current[markerId].mode !== "Fixed") {
                getMarkerPeak(markerId, markersInfoObj.current[markerId].trace, annotation.x1 * FREQ_UNITS.GHZ);
            }
            reorderMarkers(markerId);
        });
    }
}, [deltaSvgString, markerSvgString, getMarkerPeak, reorderMarkers, numDP]);

Step 2: Call the removeMarkerAnnotation() to remove the CustomAnnotation

const removeMarkerAnnotation = useCallback((markerId) => {
    if (markerAnnotations.current[markerId]) {
        sciChartSurfaceRef.current.annotations.remove(markerAnnotations.current[markerId]);
        markerAnnotations.current[markerId].delete();
        markerAnnotations.current[markerId] = null;
    }
}, []);

Step 3: Call addTriggerAnnotation() to add a BoxAnnotation

const addTriggerAnnotation = useCallback((x1, x2, y2) => {
    x1 = parseFloat(x1);
    x2 = parseFloat(x2);    
    y2 = parseFloat(y2);

    if (x1 != null && x2 != null) {
        console.log("addTriggerAnnotation: ", x1, x2, triggerAnnotation.current, sciChartSurfaceRef.current.annotations);
        if (!triggerAnnotation.current) {
            triggerAnnotation.current = new BoxAnnotation({
                id: "triggerBox",
                fill: "transparent",
                stroke: "#93A3B1",  //#93A3B1   //#6B818C
                strokeThickness: 2,
                xCoordinateMode: ECoordinateMode.DataValue,
                x1: x1,
                x2: x2,
                yCoordinateMode: ECoordinateMode.DataValue,
                y1: minY,
                y2: y2,
                isEditable: true,
                resizeDirections: EXyDirection.XyDirection,     
            });
            sciChartSurfaceRef.current.annotations.add(triggerAnnotation.current);

            triggerAnnotation.current.dragDelta.handlers.push(() => {
                triggerAnnotation.current.y1 = minY;

                const minX =  specSettingsRef.current.start/freqUnits.KHZ;
                const maxX = specSettingsRef.current.stop/freqUnits.KHZ;
                const maxY = specSettingsRef.current.refLevel;

                if (minX != null && maxX != null) {
                    if (triggerAnnotation.current.x1 < minX) {
                        triggerAnnotation.current.x1 = minX;
                    } else if (triggerAnnotation.current.x1 > maxX) {
                        triggerAnnotation.current.x1 = maxX;
                    } else if (triggerAnnotation.current.x2 > maxX) {
                        triggerAnnotation.current.x2 = maxX;
                    } else if (triggerAnnotation.current.x2 < minX) {
                        triggerAnnotation.current.x2 = minX;
                    }
                }

                if (maxY != null) {
                    if (triggerAnnotation.current.y2 < minY) {
                        triggerAnnotation.current.y2 = minY;
                    } else if (triggerAnnotation.current.y2 > maxY) {
                        triggerAnnotation.current.y2 = maxY;
                    }
                }
            });

            triggerAnnotation.current.dragEnded.handlers.push(() => {
                const maxX = specSettingsRef.current.stop/freqUnits.KHZ;
                const x1 = triggerAnnotation.current.x1;
                const x2 = triggerAnnotation.current.x2;
                const y2 = triggerAnnotation.current.y2;

                if (x1 != null && x2 != null && maxX != null) {
                    if (x1 > x2) {
                        triggerAnnotation.current.x1 = x2;
                        triggerAnnotation.current.x2 = x1;
                    } else if (x2 < x1) {
                        triggerAnnotation.current.x1 = x2;
                        triggerAnnotation.current.x2 = x1;
                    } else if (x1 === x2) {
                        if (x2 + xInterval.current <= maxX) {
                            triggerAnnotation.current.x2 = x2 + xInterval.current;
                        } else {
                            triggerAnnotation.current.x1  = x1 - xInterval.current;
                        }
                    }

                    const origStartFreq = parseFloat(triggersRef.current.startFreq);
                    const origStopFreq = parseFloat(triggersRef.current.stopFreq);
                    const newStartFreq = parseFloat((triggerAnnotation.current.x1 * freqUnits.KHZ).toFixed(numDP.FREQ));
                    const newStopFreq = parseFloat((triggerAnnotation.current.x2 * freqUnits.KHZ).toFixed(numDP.FREQ));

                    if (origStartFreq !== newStartFreq || origStopFreq !== newStopFreq) {
                        setTriggers(origObj => ({...origObj, ...{
                            startFreq: newStartFreq, 
                            stopFreq: newStopFreq,
                            level: parseFloat(y2.toFixed(numDP.POWER)),
                        }}));
                    }
                }
            });
        } else {
            updateTriggerAnnotation(x1, x2, y2);
        }
    }
}, [setTriggers, freqUnits.KHZ, numDP.FREQ, numDP.POWER, minY, updateTriggerAnnotation]);

Step 4: Drag the BoxAnnotation. It’s failed to drag the box and got the error “Uncaught TypeError: Cannot read properties of undefined (reading ‘seriesViewRect’)”.

It’s a strange bug as it can only be reproduced with the steps above. With the following steps, I can drag the BoxAnnoation without problem:

Step 1 -> Step 3 -> Step 4
Step 3 -> Step 4
Step 3 -> Step 1 -> Step 2 -> Step 4

  • Quyen Sy asked 1 year ago
  • last active 1 year ago
1 vote
2k views

Hello All,

I was trying to set the visual range property on a numeric axis but i get the error that the “equals” is not a function of NumerixAxis. This happens when i try the following.

export function setXAxisVisibleRange(element, visibleRange) {
     const { sciChartSurface } = resolveContext(element);
     var axis = sciChartSurface.xAxes.get(0);
     axis.visibleRange = visibleRange; **//error here**
}

attached is a picture of a more detailed error. Ultimately what I am trying to do is to sync up the visual range of two charts x axis like in the following tutorial

https://www.scichart.com/documentation/js/current/webframe.html#Tutorial%2009%20-%20Linking%20Multiple%20Charts.html

Thanks for your help in advance.

UPDATE

So my issue was that I had a serialization issue with the NumberRange class. I can now sync up the charts just like in the tutorial. The problem now is that if I scroll or zoom very fast eventually the charts start to flicker in an endless loop. Has anyone ever seen this behavior? One thing I notice is that the min and max value have over 10 decimal points.

Here is a quick printout of the value change events between the two charts when the flickering starts.

Any ideas?

–> CH.1 Min: 0.532180460735786 Max: 3.457511660735786
–> CH.2 Min: -0.17488026755852848 Max: 4.339519732441472
–> CH.2 Min: 0.025927491638795958 Max: 4.088887491638796
–> CH.2 Min: 0.38738145819397996 Max: 3.63774945819398
–> CH.1 Min: 0.5319630448160535 Max: 3.4572942448160537
–> CH.2 Min: 0.532180460735786 Max: 3.457511660735786
–> CH.1 Min: -0.17488026755852848 Max: 4.339519732441472
–> CH.1 Min: 0.025927491638795958 Max: 4.088887491638796
–> CH.1 Min: 0.38738145819397996 Max: 3.63774945819398
–> CH.2 Min: 0.5319630448160535 Max: 3.4572942448160537
–> CH.1 Min: 0.532180460735786 Max: 3.457511660735786
–> CH.2 Min: -0.17488026755852848 Max: 4.339519732441472
–> CH.2 Min: 0.025927491638795958 Max: 4.088887491638796
–> CH.2 Min: 0.38738145819397996 Max: 3.63774945819398
–> CH.1 Min: 0.5319630448160535 Max: 3.4572942448160537
–> CH.2 Min: 0.532180460735786 Max: 3.457511660735786
–> CH.1 Min: -0.17488026755852848 Max: 4.339519732441472
–> CH.1 Min: 0.025927491638795958 Max: 4.088887491638796
–> CH.1 Min: 0.38738145819397996 Max: 3.63774945819398
–> CH.2 Min: 0.5319630448160535 Max: 3.4572942448160537
–> CH.1 Min: 0.532180460735786 Max: 3.457511660735786
–> CH.2 Min: -0.17488026755852848 Max: 4.339519732441472
–> CH.2 Min: 0.025927491638795958 Max: 4.088887491638796
–> CH.2 Min: 0.38738145819397996 Max: 3.63774945819398
–> CH.1 Min: 0.5319630448160535 Max: 3.4572942448160537
–> CH.2 Min: 0.532180460735786 Max: 3.457511660735786
–> CH.1 Min: -0.17488026755852848 Max: 4.339519732441472
–> CH.1 Min: 0.025927491638795958 Max: 4.088887491638796
–> CH.1 Min: 0.38738145819397996 Max: 3.63774945819398
–> CH.2 Min: 0.5319630448160535 Max: 3.4572942448160537
–> CH.1 Min: 0.532180460735786 Max: 3.457511660735786
–> CH.2 Min: -0.17488026755852848 Max: 4.339519732441472

1 vote
2k views

Hello,

When annotations and the rollover modifiers are displayed on the very left side of a chart they align with the center of the candlesticks on the chart. However, as they get displayed toward the right side of the chart they get more and more offset to the right side of the candlestick.

Can anyone point me in the right direction to figure out how to fix this issue seemingly with my xAxis?

See attached screenshots,

  • Leland asked 10 months ago
  • last active 10 months ago
0 votes
5k views

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();
1 vote
3k views

It’s possible to implements something like WPF ‘s SciChartOverview in SciChart JS ?

0 votes
2k views

Hello

I have a use case where annotations are draggable and on drag i am making api call to fetch updated data and resetting the the DataSeries.

I am clearing annotations once i get updated data but it is just clearing the svg annotation nodes from dom but not the hit test context (point focus) on wasm side.

Please look at the attached screenshot and suggest something

Thanks
Vamsi

1 vote
681 views

Hello,

I am experiencing an issue with the BoxAnnotation in SciChart where the precision of the box’s boundaries does not accurately match the data points it is supposed to represent. When dynamically creating a BoxAnnotation to highlight a range of values on a chart, the upper boundary (y2) is set to match the maximum value within the specified range. Despite the calculation seeming accurate, the rendered annotation’s top edge is visually lower than the top of the highest column it encompasses, creating a slight discrepancy. In my application, I am creating a lot of charts, and this issue occurs only on charts with a big data range.

Environment:

SciChart Version: 3.2.532
Browser: Chrome

Attaching code snippet on jsfiddle:
https://jsfiddle.net/c9dekx6v/2/

Regards,
Dmytro

0 votes
6k views

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.

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

The chart is only showing 3 of 4 Tooltips, is there a way to avoid this?

1 vote
2k 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.

0 votes
4k views

Fairly simple question: How do you export or save a chart as an image in the JS library?

1 vote
4k views

Hi,

In the documentation I can’t see any way to make a chart surface fill the available space in all directions.

By default, it fills the available horizontal space, but the ratio of width:height remains fixed.

The only example I’ve seen where this is slightly different is this JS example, where the width flexes independently to fit the available space: https://demo.scichart.com/javascript-2d-3d-chart-tenor-curves-example – I’m not sure exactly what part of the code makes this different to the other examples?

My goal is to allow the user to adjust the height and width of any chart themselves by dragging the size of the container div, with the chart surface ideally just filling the space in a ‘dumb’ way, rather than using JS to manually update the chart size during the drag event.

Thanks,
Joe

1 vote
2k views

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()
0 votes
8k views

I am trying to implement a waterfall chart with uniform heatmap. The data is updated from the top of the chart and keeps pushing the old data down. I would like to show the y-axis with time. How can I update the y-axis with updated data?

Assume the heatmap is 256 height, I created the zValues array with min value when draw the heatmap:

const SPECTROGRAM_WIDTH = 256; 
const minPower = -200;
spectrogramZValues.current = Array.from(Array(SPECTROGRAM_HEIGHT), () => Array(SPECTROGRAM_WIDTH).fill(minPower));

Update zValues array when new data come:

    spectrogramZValues.current.shift();
        spectrogramZValues.current.push(newData);

When the first data pushed to the chart. There will be one row shown in the axis with timestamp t1. When the second data comes, the top row of the y-axis should be t2 and the t1 is pushed down. When the waterfall chart is filled with 256 data, the bottom of the y-axis should be t1 and the top of the y-axis should be t256. Is it possible to implement this?

Now I am using the uniform heatmap to implement it with yStart=0 and yStep=1. I tried to add the labelProvider to the y-axis to show the timestamp of each row. I am keeping an array locally to store the timestamp of each row which will be updated with the new data. I tried to map this array and return the timestamp in the y-axis labelProvider. But it doesn’t work. The y-axis will not be refreshed when data updated.

        yAxis.labelProvider.formatLabel = (dataValue) => {
        const ts = timestampArray[dataValue];
        if (ts) {
            const timeObj = new Date(ts);
            const hours = ('0' + timeObj.getHours()).slice(-2);
            const minutes = ('0' + timeObj.getMinutes()).slice(-2);
            const seconds = ('0' + timeObj.getSeconds()).slice(-2);
            const milliseconds = ('0' + timeObj.getMilliseconds()).slice(-3);
            return `${hours}:${minutes}:${seconds}.${milliseconds}`;
        } else {
            return "";
        }
    };
  • Quyen Sy asked 11 months ago
  • last active 10 months ago
0 votes
0 answers
4k views

My application supports two themes (dark/light) for the charts. The background of the chart will be set to black if the dark mode is applied, and white if the light mode applied. It works well with the line chart. But there is strange grey background appeared in the heatmap chart when light mode is applied (Please check the attached screenshots). The color of gradient stop of offset 0 (min. heatmap zValues) is set to transparent and it works well with the dark mode. Do you know what’s wrong in my case?

Dark theme object applied to the chart:

{...new SciChartJSDarkTheme(), ...{
        sciChartBackground: "#1c1c1c",
        axisTitleColor: "#dee2e6",
        labelBorderBrush: "#dee2e6",
        tickTextBrush: "#dee2e6",
        majorGridLineBrush: "#1F3D68",
        minorGridLineBrush: "#102A47",
    }

Light theme object applied to the chart:

{...new SciChartJSLightTheme(), ...{
        sciChartBackground: "#fff",
        axisTitleColor: "#333",
        labelBorderBrush: "#333",
        tickTextBrush: "#333",
    }}

Heatmap graditentStops:

[
    { 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" },
]
1 vote
3k views

Hi,

I have a uniform heatmap with multiple ’tiles’ of data loaded in, by using multiple UniformHeatmapDataSeries / UniformHeatmapRenderableSeries.

The user is allowed to pan around/zoom around the heatmap.

I want to build two charts to display the ‘visible heatmap average’, one for each axis. For example, I would display a line chart underneath the heatmap. The first point on this line chart would represent the average value of all cells in the first column of the heatmap – I need this to take into account all of the UniformHeatmapDataSeries that are currently in the viewport, treating them as a singular heatmap.

I’ve seen the NumericAxis.getCurrentCoordinateCalculator(), which looks promising, but I’ve not yet worked out if that can do what I need.

Any thoughts on the best approach?

Thanks
Joe

1 vote
2k views

I have a live updating chart with multiple traces. After updated SciChart to v3.0.280, I got “Uncaught (in promise) RangeError: Maximum call stack size exceeded” error sometimes when I call XyDataSeries.appendRange(). This error will not be triggered if just initialize the chart and keeps updating the chart data. It seems happening after I modified the visibleRange of x-axis or y-axis. But the error is triggered on the line calling appendRange(). I have no clue for this issue. My codes didn’t change and only updated the SciChart version. Could you find the possible cause of my problem? Please refer to the attached screenshots.

Codes to update the chart data:

    UpdateSuspender.using(sciChartSurfaceRef.current, () => {
        console.time("Time - Update series");
        for (tnum=0; tnum<MAX_TRACE; tnum++) {
            traceObj = tracesInfoObj.current[tnum];
            if (traceSeries.current[tnum] && traceObj.status === "Active") {
                traceSeries.current[tnum]["xyDataSeries"].clear();
                switch (traceObj.type) {
                    case 0:
                        traceSeries.current[tnum]["xyDataSeries"].appendRange(dataX, newSpecData);
                        break;
                    case 1:
                        traceSeries.current[tnum]["xyDataSeries"].appendRange(dataX, newMaxHoldData);
                        break;
                    case 2:
                        traceSeries.current[tnum]["xyDataSeries"].appendRange(dataX, newMinHoldData);
                        break;
                    case 3:
                        traceSeries.current[tnum]["xyDataSeries"].appendRange(dataX, averageData);
                        break;
                }   
            }
        };
        console.timeEnd("Time - Update series");
    });
  • Quyen Sy asked 1 year ago
  • last active 1 year ago
1 vote
2k views

Hello All,

Is there a way to have a cursor modifier display on a mouse left/center/right click instead of automatically showing when the mouse is over the chart? I tried setting the ExecuteOn property but had no effect.

Thanks in advance,
Sergio.

1 vote
2k views

I am trying to add an axis annotation to a heatmap legend. When this annotation is dragged, the color mapping of the heatmap series and the heatmap legend will be changed. How can I modify the colorMap.gradientStops of the heatmap series and the heatmap legend while the chart is running?

  • Quyen Sy asked 1 year ago
  • last active 1 year ago
1 vote
2k views

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

1 vote
2k views

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.

0 votes
3k views

I think this question has come up before, but is it possible to render a logarithmic axis in the JS library? If not, is this on the roadmap (and when)?

1 vote
2k views

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

0 votes
16k views

I want to build a column chart but I got the following error:

ERROR TypeError: Cannot read property ‘append’ of undefined

The error happened in line #42.

My code:

export class OutputAmplitudeComponent implements OnInit, OnDestroy {

constructor(@Inject(SETTING_SERVICE) private settingService: SettingService, private cdr: ChangeDetectorRef) {}

ngOnInit() {        
                this.settingService.registerSetting(HarmonicAmpSetting).pipe(takeUntil(this.ngUnsubHarmonicData)).subscribe(setting => {
                    const OutputAmplitudeData = setting.value;

                    for (let x = 1; x < this.numberOfOutput; x++) {
                        if (this.OutputMode === 'Voltage') {
                            if (phaseNum === 1) {
                                this.ampSource.data[x-1].voltage1 = OutputAmplitudeData[x];
                            } else if (phaseNum === 2) {
                                this.ampSource.data[x-1].voltage2 = OutputAmplitudeData[x];
                            } else if (phaseNum === 3) {
                                this.ampSource.data[x-1].voltage3 = OutputAmplitudeData[x]; 
                            }
                        } else if (this.OutputMode === 'Current') {
                            if (phaseNum === 1) {
                                this.ampSource.data[x-1].current1 = OutputAmplitudeData[x];
                            } else if (phaseNum === 2) {
                                this.ampSource.data[x-1].current2 = OutputAmplitudeData[x];
                            } else if (phaseNum === 3) {
                                this.ampSource.data[x-1].current3 = OutputAmplitudeData[x];
                            }
                        }

                    }   
                    this.updateData();
                });
                this.sciChartInit();
            }   

updateData(){
    var phaseNum1 = [];
    var xData = [];
    for (let x = 1; x < this.numberOfOutput; x++) {
        if (this.ampSource.data != null && this.ampSource.data[x-1] != null) {
            phaseNum1[x - 1] = parseFloat(this.ampSource.data[x - 1].voltage1);
            xData[x - 1] = x;
            if (!isNaN(phaseNum1[x - 1])) {
                this.dataSeries1.append(x,x);
            } else {
                console.log("No num");
            }
        }
    }
}       

async sciChartInit() {

    const { wasmContext, sciChartSurface } = await SciChartSurface.create("chart");

    var phaseNum1 = [];
    var xData = [];
    this.dataSeries1 = new XyDataSeries(wasmContext);
    for (let x = 1; x < this.numberOfOutput; x++) {
        this.dataSeries1.append(x, x);
    }

    const xAxis = new NumericAxis(wasmContext);
    sciChartSurface.xAxes.add(xAxis);
    const yAxis = new NumericAxis(wasmContext);
    sciChartSurface.yAxes.add(yAxis);

    const rendSeries1 = new StackedColumnRenderableSeries(wasmContext);
    rendSeries1.fill = "#dc443f";
    rendSeries1.stroke = "green";
    rendSeries1.strokeThickness = 1;
    rendSeries1.dataSeries = this.dataSeries1;
    rendSeries1.stackedGroupId = "one";

    const verticallyStackedColumnCollection = new StackedColumnCollection(wasmContext);
    verticallyStackedColumnCollection.dataPointWidth = 0.5;
    verticallyStackedColumnCollection.add(rendSeries1);
    verticallyStackedColumnCollection.animation = new ScaleAnimation({ duration: 1000, fadeEffect: true });

    sciChartSurface.renderableSeries.add(verticallyStackedColumnCollection);
    sciChartSurface.chartModifiers.add(new ZoomExtentsModifier(), new ZoomPanModifier(), new MouseWheelZoomModifier());
    sciChartSurface.zoomExtents();

    sciChartSurface.chartModifiers.add(
        new LegendModifier({
            placement: ELegendPlacement.TopRight,
            orientation: ELegendOrientation.Horizontal,
            showLegend: true,
            showCheckboxes: true,
            showSeriesMarkers: true
        })
    );
    return { wasmContext, sciChartSurface };
}}

I don’t understand what is undefined and why.

Thank you.

  • ETS Ong asked 3 years ago
  • last active 3 years ago
1 vote
8k views

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

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

In a DateTimeNumericAxis, can I convert the number from VisibleRange to a formatted string HH:MM:SS?
For example, I’d like to convert this x1 to 12/1/1984, 3:00:00 PM, or 15:00:00.

let x1 = this.parentSurface.annotations.getById("hrv").x1;
// x1 =470761200, seconds since 1970.01.01 00:00:00

Thanks.

  • Gang Xu asked 12 months ago
  • last active 12 months ago
0 votes
5k views

Hi,
Unsorted xValues is possible on SCI Chart? I tried with dataIsSortedInX: false and isSorted: false on dataSeries, But its not showing the correct range.

eg:

 new XyDataSeries(wasmContext, {
        dataSeriesName: "Line Series",
        xValues: [0,10,20,13,54,15,26,17,18,19],
        yValues: [0,1,5,1,20,5,1,8,9,3],
    dataIsSortedInX: false
    });
0 votes
3k views

Hello guys,

Can you provide an example how to implement scichart on SSR Frameworks like Nuxt or Next.js ? I am trying to understand how i can compile a simple chart using Nuxt, getting the .data/.wasm file but i have problem after building process.

Can you help?

Many thanks

Pedro Cruz

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.

0 votes
3k views

Hi there,

Do you support colour legend for Heatmap in Java Script? Can you please point me to where it is documented if you do.

Thank you

  • Ihab Skafi asked 3 years ago
  • last active 3 years ago
0 votes
3k views

I would like to create an arc annotation as shown in the attached image in Scichart JavaScript.
Please guide me on what will be the best way.

1 vote
2k views

Greetings,
i have three Series in a SciChart.js (Community-Version) Surface.
The Legend i added shows me all three of them and their names and checkboxes do hide or show the series.

Here is my problem: Is there a way to hide one Series (a FastCandlestickRenderableSeries) from the Legend? I only want to show the other two Series (FastLinerenderableSeries).

Somethin like a Parameter “showInLegend: false,”? I did not find something like this in the documentation(https://www.scichart.com/documentation/js/current/typedoc/classes/legendmodifier.html).

Thank you

0 votes
3k views

Screenshots attached.

To recreate:

  • Create a chart
  • Add a CursorModifier – default options is fine
  • Either directly remove the modifier using .remove(modifier), or clear all using .clear()

Expected behaviour:
– Should remove the cursor modifier

Actual behaviour with bug:
– Crashes the page

This appears to be an issue with CursorModifier only (out of the 5 or 6 that I’ve tried). Other modifiers work as expected.

Traced the issue to this.parentSurface being undefined in CursorModifier.js, so when onDetach() is called, it errors.

Thanks!
Joe

1 vote
2k views

I try to use this exemple on my PC with (nodejs 8.13.0) and i can’t run this app example. I receive this error:

× 「wds」: Invalid configuration object. Webpack has been initialized
using a configuration object that does not match the API schema.

configuration.optimization has an unknown property ‘namedModules’.
These properties are valid:

object { checkWasmTypes?, chunkIds?, concatenateModules?,
emitOnErrors?, flagIncludedChunks?, innerGraph?, mangleExports?,
mangleWasmImports?, mergeDuplicateChunks?, minimize?, minimizer?,
moduleIds?, noEmitOnErrors?, nodeEnv?, portableRecords?,
providedExports?, realContentHash?, removeAvailableModules?,
removeEmptyChunks?, runtimeChunk?, sideEffects?, splitChunks?,
usedExports? }

-> Enables/Disables integrated optimizations. Did you mean optimization.moduleIds: “named” (BREAKING CHANGE since webpack 5)?*

Is there compatiblity problem with nodejs LTS version?
Thans for your response.

1 vote
7k views

Do scichart supports microsoft blazor ?
If yes, Any examples available ?

  • Abhilash R asked 3 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.

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
4k views

Hi all,

I have another question about SciChart.js, I hope someone can teach me.

First, please download this video

This chart in video is made by d3.js, I hope I can use SciChart.js to make the same features,
please watch from 7 second to the end, when I click the mouse and move to the right direction, then click mouse again,
the section from first click to the second click will make different color, someone can teach me how to do that

PS: English is not my mother language, I wish you all can understand what I mean, Please download the video and watch, thanks.

0 votes
7k views

Vertical Chart and pointMarker points are ploatted on somewhere on the canvas.

0 votes
0 answers
2k views

Hi,

When we published the product of Test Domain, a black rectangle will appear in the SciChart line graph. How should we avoid it?

The tester told me he was reluctant to update to Production Domain in this situation.

Thank for your help

0 votes
2k views

I’m trying to have a transparent axisLabelFill for my yAxis and a black axisLabelFill for my xAxis. How can I achieve that?

1 vote
988 views

Is there a way to place AxisMarkerAnnotation on top of the gridline as shown in the attached images?

Here are some code to defined the xAxis:

xAxis.axisAlignment = EAxisAlignment.Bottom;
xAxis.drawLabels = true;
xAxis.labelStyle.fontFamily = "Roboto";
xAxis.labelStyle.fontSize = 12;
xAxis.labelStyle.alignment = ELabelAlignment.Left;
xAxis.autoRange = EAutoRange.Never;
xAxis.labelStyle.padding = new Thickness (0, 0, 0, 0);

Note: I’m aware that CustomAnnotation offers a better solution in placing the annotation into its designated position by setting y1 = 0. But I need the annotation to drag only around the xAxis, which can be done in AxisMarkerAnnotation so far.

0 votes
0 answers
3k views

Hi,
On RubberBandXyZoomModifier i am using the YDirection zoom. When i click and drag out side the area of sci chart and leave the mouse click. Then again click inside the scichart, it showing the selection area and not disappear after new selection of zoom or pan the chart. the selected area is still showing as selected.

0 votes
0 answers
7k views

Hi, spotted a Typescript issue – the class declaration of SeriesInfo is missing at least two properties – zValue and formattedZValue. Noticed it because my IDE was complaining about their usage. Looking at a comparison of the class declaration and a console log of what actually exists, it looks like a few more might be missing too.

The above properties are also missing from the type docs.

Thanks!
Joe

Showing 1 - 50 of 370 results