SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, iOS Chart, Android Chart and JavaScript Chart Components

0 votes
0 answers
18 views

I use SeriesSelection modifier on SciChartSurface. I need only one series to be selected at a particular time (even if I try to select with ctrl pressed). Is there any modifier setting for this?

0 votes
0 answers
38 views

When I try to bind VisibleRange as a simple binding on the XAxis it works perfectly.

                <scichart:SciChartSurface.XAxis>
                    <scichart:NumericAxis AxisTitle="Tempo (s)" 
                                          VisibleRange="{Binding XVisibleRange, Mode=TwoWay}"/>
                </scichart:SciChartSurface.XAxis>

But, in my case I have only one chart beeing displayed but two “RenderableSeries” in which only one of them is displayed, accordingly to the user selection. I use triggers for this and it works like a charm.

                <scichart:SciChartSurface.Resources>

                    <Style TargetType="{x:Type scichart:SciChartSurface}">
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding ElementName=DAQ1_Selected, Path=IsChecked}" Value="true">
                                <Setter Property="RenderableSeries" Value="{scichart:SeriesBinding RenderableSeriesViewModels[0]}"/>
                            </DataTrigger>
                            <DataTrigger Binding="{Binding ElementName=DAQ1_Selected, Path=IsChecked}" Value="false">
                                <Setter Property="RenderableSeries" Value="{scichart:SeriesBinding RenderableSeriesViewModels[1]}"/>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>

                </scichart:SciChartSurface.Resources>

Now I’m trying to set the “VisibleRange” of each “RenderableSeries” with triggers but I cannot achieve that because there is no option to binding on the setter.

<scichart:SciChartSurface.XAxis>
                            <scichart:NumericAxis AxisTitle="Tempo (s)" 
                                              GrowBy="0.01,0.01">

                                <Style TargetType="{x:Type scichart:NumericAxis}">
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding ElementName=DAQ1_Selected, Path=IsChecked}" Value="true">
                                            <Setter Property="VisibleRange" Value="{scichart:AxesBinding XVisibleRange[0], Mode=TwoWay}" />
                                        </DataTrigger>
                                        <DataTrigger Binding="{Binding ElementName=DAQ1_Selected, Path=IsChecked}" Value="false">
                                            <Setter Property="VisibleRange" Value="{scichart:AxesBinding XVisibleRange[1], Mode=TwoWay}" />
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>

                            </scichart:NumericAxis>
                        </scichart:SciChartSurface.XAxis>

On the “value” of Setter I have only the following options:

  • AnnotationsBinding AxisBindingBinding MultiBindingCompatible
    SeriesBinding ThemeBinding VerticalLinesBinding

My question is:
Is there a way to binding “VisibleRange” on “Style.Triggers”?

Thank you,
Eduardo Arruda

1 vote
0 answers
51 views

Hi,

I have added a data series and also a custom box annotation which is overlapping the data series.
But the question is I am trying to move the box annotation which drag and drop but have to clip on the data series as well.
May I know if is scichart js able to do so? Or best if I just convert it into svg and make it drag and drop will do?

1 vote
0 answers
41 views

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%;
}

0 votes
124 views

Previously I used AnnotationCreationModifier and my custom annotations were added by one left button mouse click on the chart surface (the annotation was added to the collection and the event handler “AnnotationCreated” fired). Now I’m trying to switch to using the mvvm pattern and I have problems adding my custom annotations using AnnotationCreationModifierMVVM.

Now it works like this:
1) I click (mouse left button) on the chart surface to add an annotation and it is added to the collection and displayed.
2) I click on the chart surface again, and only after that the event handler “AnnotationCreated” is called.

If I carry out some external manipulations with the added annotation between first and second click (for example, moving to the given coordinates by the button click), annotation moved, but when I hover the mouse over the chart surface, it returns to it’s original position. And this behavior will be until I click again on the chart surface so that the event handler “AnnotationCreated” is called.

The built-in annotations work fine though (for examle, VerticalLineAnnotationViewModel or HorizontalLineAnnotationViewModel are successfully added to the collection and call the event handler “AnnotationCreated” by one click on chart surface).

Is it possible to somehow fix this behavior of the custom annotation so that it is added to the collection and triggers an event “AnnotationCreated” for one click on the chart surface, as was the case with AnnotationCreationModifier? I am attaching an example code:

MainWindow.xaml

<Window x:Class="WpfAppMvvm.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:s="http://schemas.abtsoftware.co.uk/scichart"
    xmlns:ext="http://schemas.abtsoftware.co.uk/scichart/exampleExternals"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
    mc:Ignorable="d"
    Title="MainWindow" Height="450" Width="800">
<Grid>
    <s:SciChartSurface Annotations="{s:AnnotationsBinding Annotations}">
        <s:SciChartSurface.XAxis>
            <s:NumericAxis AxisTitle="X"/>
        </s:SciChartSurface.XAxis>
        <s:SciChartSurface.YAxis>
            <s:NumericAxis AxisAlignment="Left" AxisTitle="Y"/>
        </s:SciChartSurface.YAxis>
        <s:SciChartSurface.ChartModifier>
            <s:ModifierGroup>
                <s:AnnotationCreationModifierMVVM IsEnabled="True" AnnotationViewModelsCollection="{Binding Annotations}" AnnotationViewModelType="{Binding AnnotationType}">
                    <i:Interaction.Behaviors>
                        <ext:EventToCommandBehavior Command="{Binding AnnotationCreatedCommand}" Event="AnnotationCreated" PassArguments="True"/>
                    </i:Interaction.Behaviors>
                </s:AnnotationCreationModifierMVVM>
            </s:ModifierGroup>
        </s:SciChartSurface.ChartModifier>
    </s:SciChartSurface>
</Grid>

MainWindow.xaml.cs

using System.Windows;
namespace WpfAppMvvm
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            DataContext = new MainWindowViewModel();
        }
    }
}

MainWindowViewModel.cs

using SciChart.Charting.ChartModifiers;
using SciChart.Charting.Common.Helpers;
using SciChart.Charting.Model.ChartSeries;
using SciChart.Examples.ExternalDependencies.Common;
using System;
using System.Collections.ObjectModel;
using System.Windows;
namespace WpfAppMvvm
{
    internal class MainWindowViewModel:BaseViewModel
    {
        public ObservableCollection<IAnnotationViewModel> Annotations { get; private set; }
        public Type AnnotationType { get; private set; }
        public ActionCommand<AnnotationCreationMVVMArgs> AnnotationCreatedCommand { get; private set; }

        public MainWindowViewModel()
        {
            Annotations = new ObservableCollection<IAnnotationViewModel>();
            AnnotationType = typeof(MyCustomAnnotationViewModel);
            AnnotationCreatedCommand = new ActionCommand<AnnotationCreationMVVMArgs>(ExecCmd, e => true);
        }
        private void ExecCmd(AnnotationCreationMVVMArgs e)
        {
            MessageBox.Show("OnAnnotationCreated executed");
        }
    }
}

MyCustomAnnotation.xaml

<s:CustomAnnotationForMvvm x:Class="WpfAppMvvm.MyCustomAnnotation"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         mc:Ignorable="d" 
         xmlns:s="http://schemas.abtsoftware.co.uk/scichart"
         d:DesignHeight="450" d:DesignWidth="800">
<Grid>
    <Ellipse
        Width="20"
        Height="20"
        Fill="Transparent"
        Stroke="Red"
        StrokeThickness="3"
    />
</Grid>

MyCustomAnnotation.xaml.cs

using SciChart.Charting.Visuals.Annotations;

namespace WpfAppMvvm
{
    public partial class MyCustomAnnotation : CustomAnnotationForMvvm
    {
        public MyCustomAnnotation()
        {
            InitializeComponent();
        }
    }
}

MyCustomAnnotationViewModel.cs

using SciChart.Charting.Model.ChartSeries;
using System;

namespace WpfAppMvvm
{
    public class MyCustomAnnotationViewModel:CustomAnnotationViewModel
    {
    public override Type ViewType => typeof(MyCustomAnnotation);
    }
}
1 vote
116 views

Hello. Some time ago we started receiving very interesting crash reports in our crashlytics about scichart init. We can’t reproduce it by ourselves, but there are a lot of samples from our users with different devices and with different Android OS.

Fatal Exception: java.lang.UnsatisfiedLinkError: dalvik.system.PathClassLoader[DexPathList[[zip file "/data/app/com.**.**-WqNyhtp24SkSTYz13S2c3w==/base.apk"],nativeLibraryDirectories=[/data/app/com.**.**-WqNyhtp24SkSTYz13S2c3w==/lib/arm64, /system/lib64]]] couldn't find "libcore.so"
       at java.lang.Runtime.loadLibrary0(Runtime.java:1067)
       at java.lang.Runtime.loadLibrary0(Runtime.java:1007)
       at java.lang.System.loadLibrary(System.java:1667)
       at com.scichart.core.utility.NativeLibraryHelper.tryLoadLibrary(SourceFile:2)
       at com.scichart.core.utility.NativeLibraryHelper.tryLoadCoreLibrary(:2)
       at com.scichart.core.licensing.Credentials.<clinit>(SourceFile:1)
       at com.scichart.core.licensing.Credentials.setRuntimeLicenseKey(SourceFile:1)
       at com.scichart.charting.visuals.SciChartSurface.setRuntimeLicenseKey()

At our last build we added

abi {
    enableSplit = false
}

This action reduced the number of crashes, but it still happens:

Fatal Exception: java.lang.UnsatisfiedLinkError: dlopen failed: couldn't map "/mnt/asec/com.**.**-2/base.apk!/lib/armeabi-v7a/libcore.so" segment 1: Permission denied
       at java.lang.Runtime.loadLibrary0(Runtime.java:989)
       at java.lang.System.loadLibrary(System.java:1567)
       at com.scichart.core.utility.NativeLibraryHelper.tryLoadLibrary(SourceFile:2)
       at com.scichart.core.utility.NativeLibraryHelper.tryLoadCoreLibrary(SourceFile)
       at com.scichart.core.licensing.Credentials.<clinit>(SourceFile:1)
       at com.scichart.core.licensing.Credentials.setRuntimeLicenseKey(SourceFile:1)
       at com.scichart.charting.visuals.SciChartSurface.setRuntimeLicenseKey(SourceFile)

Have there been similar problems?

0 votes
106 views

Hello, I want to install the libraries related to SciChart
Should I put maven { url ‘https://www.myget.org/F/abtsoftware/maven’ } in settings.gradle file and dependencyResolutionManagement section?

0 votes
115 views

Content description: The performance of scichart in single line rendering data is amazing. My current requirement is to render multiple lines at a time (up to 1800 lines). I hope that after loading, when moving the mouse, the tooltips for specific points will be displayed quickly. Are there similar cases for my reference?

1 vote
170 views

Hello, I need to use tooltips to display information to users. However, after using the tooltip, there will be a jam after the tooltip appears and when zooming. How can I optimize the performance.

The following is the code. I use the js example: “Load 500 Series x 500 Points Performance Demo” for transformation

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 {
  IXyDataSeriesOptions,
  XyDataSeries
} from "scichart/Charting/Model/XyDataSeries";
import { NumberRange } from "scichart/Core/NumberRange";
import { EAutoRange } from "scichart/types/AutoRange";
import { convertRgbToHexColor } from "scichart/utils/convertColor";
// eslint-disable-next-line
SciChartSurface.useWasmFromCDN();

const divElementId = "scichart-root";

const color = "#368BC1";

const SERIES = 1500;
const POINTS = 188;


const drawExample = async (updateTimeSpans) => {
  const { sciChartSurface, wasmContext } = await SciChartSurface.create(
    divElementId,{ widthAspect: 3, heightAspect: 2}
  );
  const xAxis = new NumericAxis(wasmContext, {
    visibleRange: new NumberRange(0, POINTS),
    autoRange: EAutoRange.Never
});
sciChartSurface.xAxes.add(xAxis);
const dataSeriesArray= new Array(SERIES);;
const rendSeriesArray=new Array(SERIES);
const yAxis = new NumericAxis(wasmContext, {
    visibleRange: new NumberRange(-5000, 5000),
    autoRange: EAutoRange.Never
});
// yAxis.labelProvider.numericFormat = ENumericFormat.Decimal_0;
sciChartSurface.yAxes.add(yAxis);
for (let i = 0; i < SERIES; i++) {
  const dataSeries= new XyDataSeries(wasmContext);
  const rendSeries= new FastLineRenderableSeries(wasmContext, {
      dataSeries,
     stroke: color,
      strokeThickness: 3,
      pointMarker: new EllipsePointMarker(wasmContext, {
        width: 5,
        height: 5,
        strokeThickness: 2,
        fill: "white",
        stroke: color
      })
  });
  dataSeriesArray[i] = dataSeries;
  rendSeriesArray[i] = rendSeries;
sciChartSurface.renderableSeries.add(rendSeries);
}
sciChartSurface.chartModifiers.add(new ZoomExtentsModifier(), new ZoomPanModifier(), new MouseWheelZoomModifier(),new RolloverModifier(wasmContext));
const loadPoints = () => {
  const newTimeSpans=[];

  // Start counting Points generation time
  const generateTimestamp = Date.now();

  const xValuesArray = new Array(SERIES);
  const yValuesArray = new Array(SERIES);
  const strokeArray =  new Array(SERIES);
  for (let i = 0; i < SERIES; i++) {
      // Allocate data arrays
      xValuesArray[i] = new Array(POINTS);
      yValuesArray[i] = new Array(POINTS);

      // Clear data, if any
      dataSeriesArray[i].clear();

      // Generate stroke
      const r = Math.random();
      const g = Math.random();
      const b = Math.random();
      strokeArray[i] = convertRgbToHexColor(r, g, b);

      // Generate points
      let prevYValue = 0;
      for (let j = 0; j < POINTS; j++) {
          const curYValue = Math.random() * 10 - 5;

          xValuesArray[i][j] = j;
          yValuesArray[i][j] = prevYValue + curYValue;

          prevYValue += curYValue;
      }
  }

  // Add the first time span: Generating 1M data points
  newTimeSpans.push({
      title: "Generate 500x500 Data Points",
      durationMs: Date.now() - generateTimestamp
  });

  // Start counting batch append time
  const appendTimestamp = Date.now();
  for (let i = 0; i < SERIES; i++) {
      dataSeriesArray[i].appendRange(xValuesArray[i], yValuesArray[i]);
      rendSeriesArray[i].stroke = strokeArray[i];
  }

  // Add the second time span: Generation of data point
  newTimeSpans.push({
      title: "Append 500x500 Data Points",
      durationMs: Date.now() - appendTimestamp
  });

  // Subscribe to sciChartSurface.rendered event,
  // and calculate time duration between the append and
  // the first frame after it
  const firstFrameTimestamp = Date.now();
  let frameIndex = 0;
  let nextFramesTimestamp;
  const handler = () => {
      if (frameIndex === 0) {
          // Add the third time span: Render the first frame
          newTimeSpans.push({
              title: "Render the frame",
              durationMs: Date.now() - firstFrameTimestamp
          });
          nextFramesTimestamp = Date.now();
      } else {
          // Unsubscribe from sciChartSurface.rendered
          updateTimeSpans(newTimeSpans);
          sciChartSurface.rendered.unsubscribe(handler);

          // Zoom extents at the end of performance measurement
          sciChartSurface.zoomExtents();
      }
      setTimeout(sciChartSurface.invalidateElement, 0);
      // Increment frame index
      frameIndex++;
  };
  sciChartSurface.rendered.subscribe(handler);
};
  loadPoints()
};

drawExample();
1 vote
135 views

Hello,

I am trying to make a legend for a graph with some complex data.

Here is an example of how my data is structured:

  • Data Set #1
    • Series A
    • Series B
    • Series C
  • Data Set #2
    • Series A
    • Series B
    • Series C
  • Data Set #3
    • Series A
    • Series B
    • Series C

By default, SciChartLegend will display 9 entries in the above example, one for every series. However, with many datasets, and more series per dataset, this quickly becomes extremely cumbersome.

What I’d like to do is show 6 items in the legend: a checkbox for each Data Set, and a checkbox for each Series Type.

If the user clicks the Data Set #1 check box => Data Set #1 Series A, Data Set #1 Series B, and Data Set #1 Series C are all shown/hidden.

If the user clicks the Series A check box => Data Set #1 Series A, Data Set #2 Series A, and Data Set #3 Series A are all shown/hidden.

This does not seem to cooperate with the native SciChartLegend, which views all the Data Series as a single flat list. My data is in more of a tree structure.

Do you have any recommendations on how to proceed? I think I will need to make a new UserControl derived from ChartDataObjectBase to replace the SciChartLegend control.

Any help greatly appreciated.

Thank you,

Kurt

0 votes
127 views

I am using NextJS with the SciChart trial license for development and suddenly got the error “SciChart: WebGL not supported! ” with Chrome. It worked fine before, and I didn’t change any codes for launching the chart. Also, it works fine with Firefox. The chrome version I am using is 107.0.5304.107.

BTW, the error is gone after I restarted my computer. Is it possible to be related to memory issue?

Below are my codes for initializing the chart:

  const initSciChart = () => {   
    // LICENSING //
           SciChartSurface.setRuntimeLicenseKey("xxx");

           SciChartDefaults.enableResampling = true;
    SciChartDefaults.asyncLabels = true;
    SciChartDefaults.useSharedCache = true;

    drawSpecChart();
};

async function drawSpecChart() {
    // Create the SciChartSurface in the div 'scichart-root'
    // The SciChartSurface, and webassembly context 'wasmContext' are paired. This wasmContext
    // instance must be passed to other types that exist on the same surface.

    let xAxesNumberRange = new NumberRange(0, 18);
    let yAxesNumberRange = new NumberRange(-140, -40);

    const chartDefinition = {
        xAxes: [{
            type: EAxisType.NumericAxis,
            options: {
                axisTitle: "Frequency (GHz)",
                axisTitleStyle: {
                    fontSize: 12,
                    fontFamily: "sans-serif",
                    fontWeight: "bold"
                },
                labelStyle: {
                    fontSize: 12,
                    fontFamily: "sans-serif"
                },
                visibleRange: xAxesNumberRange,
                zoomExtentsRange: xAxesNumberRange,
                labelFormat: ENumericFormat.Decimal,
                labelPrecision: 6,
                cursorLabelFormat: ENumericFormat.Decimal,
                cursorLabelPrecision: 6,
                drawMajorBands: false,
            }
        }],
        yAxes: [{
            type: EAxisType.NumericAxis,
            options: {
                axisTitle: "Power (dBm)",
                axisTitleStyle: {
                    fontSize: 12,
                    fontFamily: "sans-serif",
                    fontWeight: "bold"
                },
                labelStyle: {
                    fontSize: 12,
                    fontFamily: "sans-serif"
                },
                autoTicks: false,
                majorDelta: 10,
                minorDelta: 5,
                axisAlignment: EAxisAlignment.Left,
                visibleRange: yAxesNumberRange,
                zoomExtentsRange: yAxesNumberRange,
                labelFormat: ENumericFormat.Decimal,
                labelPrecision: 2,
                cursorLabelFormat: ENumericFormat.Decimal,
                cursorLabelPrecision: 2,
                drawMajorBands: false,
            },
        }],
        series: [],
        modifiers: [
            { type: EChart2DModifierType.MouseWheelZoom },
            { 
                type: EChart2DModifierType.ZoomExtents,
                options: {
                    isAnimated: false
                }
            }
        ]
           };

       const { sciChartSurface, wasmContext } = await chartBuilder.build2DChart("scichart-root", chartDefinition);  

    xAxesNumberRange = null;
    yAxesNumberRange = null;
};
  • Kelly Chan asked 3 weeks ago
  • last active 3 weeks ago
1 vote
144 views

Hello,

I am trying to make a custom user control for the legend. I’d like to have a file, like MyLegend.xaml, along with a MyLegendViewModel.cs, which can be referenced in a larger view containing the associated surfaces, MyBigChartView.xaml / MyBigChartViewModel.cs. I can’t find any examples of this. Everything I’ve seen is about declaring an ItemTemplate or DataTemplate…

Can anyone point me towards a very simple example of using a custom xaml control to define the legend and then using that in another large xaml view?

1 vote
142 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()
1 vote
157 views

I tried to add a cursorModifier and then modify the stroke color later. But the color changes don’t work. Anything wrong with my codes?

Add cursorModified:

        let cursorModifier = new CursorModifier({
            crosshairStroke: #fff,
            crosshairStrokeThickness: 1,
            showTooltip: true,
            showAxisLabels: false,
            tooltipContainerBackground: "transparent",
            tooltipTextStroke: #fff,
        });
        sciChartSurfaceRef.chartModifiers.add(cursorModifier);

Change the stroke color:

        let cursorModifier = sciChartSurfaceRef.chartModifiers.get(0);
        if (cursorModifier) {
            cursorModifier.crosshairStroke = #333;
            cursorModifier.tooltipTextStroke = #333;
        }
  • Kelly Chan asked 4 weeks ago
  • last active 3 weeks ago
1 vote
175 views

I have a real-time updated chart with multiple series. Is it possible for me to add a custom annotation to the chart by just providing the x1 value? i.e. The y1 value will be the y value of the data point in certain series with the provided x1 value. It will look like that the annotation will be sticked to the series with a fixed x1 value while the chart is updating.

  • Kelly Chan asked 4 weeks ago
  • last active 3 weeks ago
1 vote
176 views

I upgraded to the latest version of Scichart (v6.6.0.26505) WPF. Found that deleting vertical slice annotation no longer works. This is happening in the example suite (Using Vertical Slice Tooltips) as well. When you delete it, the vertical line remains while the labels disappear. However, when you move the mouse over, the labels reappear again.

Any fix for that?

Thanks

Ning

  • Ning Qiang asked 4 weeks ago
  • last active 3 weeks ago
1 vote
0 answers
195 views

Hello,

When I apply the cross marker type to a scatter plot, it’s not centered correctly. It gets more off-center the thicker the stroke becomes. This tends to be the case for any mark that uses the strokeStyle parameter.

This is actually visible in the example app under “Using PointMarkers”. In the attached screenshot of the example app, I increased the cross marker thickness to 15 to show how off-center the cross is to the line. This becomes a bigger issue in a scatter series as there’s no line to reference of where the point should actually be.

Hopefully there’s a way to fix this, but if not, any help on how to apply a corrective offset would be great.

Thanks in advance for any guidance!

0 votes
0 answers
243 views

Hello!

The legend is in horizontal orientation, and Im displaying multiple series.

When the legend is inside the chart (default config), Im able to scroll left or right to see all available series.

But when it is moved outside the chart, it is no longer scrollable. Checkboxes are still clickable to show or hide series.

Thinking it might be something interfering with the scroll gesture, I started a new project following the Android tutorial. It still stops working as soon as I move it outside the chart.

Is this a bug, or am I missing something?

This does not happens on iOS.

Regards

XML Layout
`

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <LinearLayout
        android:layout_margin="30dp"
        android:id="@+id/chart_layout"
        android:layout_width="match_parent"
        android:layout_height="500dp"
        android:orientation="horizontal"/>

    <com.scichart.charting.visuals.legend.SciChartLegend
        android:id="@+id/legend"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_margin="10dp"/>
</LinearLayout>

`

Legend and LegendModifier config

    final SciChartLegend legend = findViewById(R.id.legend);
    legend.setLegendOrientation(Orientation.HORIZONTAL);

    final LegendModifier legendModifier = new LegendModifier(legend, false);

    surface.getChartModifiers().add(legendModifier);
0 votes
0 answers
217 views

Does Scichart Android have a function to import 3D models (.obj, .cad…)?

1 vote
217 views

This might be a feature request, I don’t know. Basically, I’m trying to plot a 3D scatter-plot and programmatically insert an arbitrary number of partially transparent free surface meshes in the same area as the scatter-plot. I started small and made some spheres. Some of my points are inside the spheres. These points are important, and I have my own functions that detect collisions between points and the spheres. The scatter-plot is also dynamic, where I update the color and transparency of the points and this means something. When all of the points are completely opaque, I get the desired behavior where I can see the points inside and behind the partially transparent meshes. However, when I make even one point transparent, all of the points inside and behind the mesh stop rendering. This is really annoying. Deletion is too slow. Is there anyway to force these fully opaque points to continue to render inside the partially transparent mesh while their brothers in the scatter-plot data series are transparent?

Second question, while I’m here. I’ve bolted a UI to the side of the Sci-Chart environment. What is the best way to make sure that the UI stays responsive even if the Sci-Chart environment starts to slow down? I want to crank up the point count past any reason.

https://www.youtube.com/watch?v=0IBBG6WEQw8 I’ve also uploaded a video of my problem. Before I check the box “Draw Geo-fence Violations Only”, all points in the data series 100% not transparent. When I check the box, all the white points start to become 100% transparent. When I click “Draw Geo-fences”, the meshes become 100% transparent (it’s backwards I know). The points are obviously still within the bounds of the mesh, as when the I turn off the mesh they start rendering. You can also see some red dots outside the mesh, as my program flagged a few points right next to the mesh as being inside it. These red dots outside the mesh render even when the red dots inside the mesh don’t.

1 vote
176 views

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

  • Kelly Chan asked 1 month ago
  • last active 1 month ago
0 votes
208 views

I want to visualize the octave band.
How can I visualize it?

1 vote
268 views

Dear SciChart team,

We have been subscribing SciChart WPF 2D Pro for a few years, usually I made some WPF user controls which have SciChartSurface in it, and we use it to display some data in the form of charts. Since my colleagues do not have the developer’s license, so they can’t see these charts on their laptop when they were debugging the solution, but it was fine, they do not care the charts.

Last week I updated the SciChart on my laptop, it works fine on my PC. but it always crashed when my colleagues debugging the solution.

The error info is:
Cannot attach VerticalLineAnnotation, because it is already used.

The call stack is full of SciChart’s calling

at SciChart.Charting.ChartModifiers.VerticalSliceModifier.sfp(VerticalLineAnnotation hhv)
at SciChart.Charting.ChartModifiers.VerticalSliceModifier.sge()
at SciChart.Charting.ChartModifiers.VerticalSliceModifier.OnAttached()
at SciChart.Charting.ChartModifiers.ModifierGroup.geq(IChartModifier gwl)
at SciChart.Core.Extensions.EnumerableExtensions.ForEachDo[T](IEnumerable1 enumerable, Action1 operation)
at SciChart.Charting.ChartModifiers.ModifierGroup.gep(IEnumerable`1 gwk)
at SciChart.Charting.ChartModifiers.ModifierGroup.OnAttached()
at SciChart.Charting.Visuals.SciChartSurface.sjj(IChartModifier anx)
at SciChart.Charting.Visuals.SciChartSurface.sht()
at SciChart.Charting.Visuals.SciChartSurface.OnSciChartSurfaceLoaded()
at SciChart.Charting.Visuals.SciChartSurfaceBase.gtm(Object aqg, RoutedEventArgs aqh)
at System.Windows.RoutedEventHandlerInfo.InvokeHandler(Object target, RoutedEventArgs routedEventArgs)
at System.Windows.EventRoute.InvokeHandlersImpl(Object source, RoutedEventArgs args, Boolean reRaised)
at System.Windows.UIElement.RaiseEventImpl(DependencyObject sender, RoutedEventArgs args)
at System.Windows.UIElement.RaiseEvent(RoutedEventArgs e)
at System.Windows.BroadcastEventHelper.BroadcastEvent(DependencyObject root, RoutedEvent routedEvent)
at System.Windows.BroadcastEventHelper.BroadcastLoadedEvent(Object root)
at MS.Internal.LoadedOrUnloadedOperation.DoWork()
at System.Windows.Media.MediaContext.FireLoadedPendingCallbacks()
at System.Windows.Media.MediaContext.FireInvokeOnRenderCallbacks()
at System.Windows.Media.MediaContext.RenderMessageHandlerCore(Object resizedCompositionTarget)
at System.Windows.Media.MediaContext.RenderMessageHandler(Object resizedCompositionTarget)
at System.Windows.Threading.ExceptionWrapper.InternalRealCall(Delegate callback, Object args, Int32 numArgs)
at System.Windows.Threading.ExceptionWrapper.TryCatchWhen(Object source, Delegate callback, Object args, Int32 numArgs, Delegate catchHandler)
at System.Windows.Threading.DispatcherOperation.InvokeImpl()
at System.Windows.Threading.DispatcherOperation.InvokeInSecurityContext(Object state)
at MS.Internal.CulturePreservingExecutionContext.CallbackWrapper(Object obj)
at System.Threading.ExecutionContext.RunInternal(ExecutionContext executionContext, ContextCallback callback, Object state, Boolean preserveSyncCtx)
at System.Threading.ExecutionContext.Run(ExecutionContext executionContext, ContextCallback callback, Object state, Boolean preserveSyncCtx)
at System.Threading.ExecutionContext.Run(ExecutionContext executionContext, ContextCallback callback, Object state)
at MS.Internal.CulturePreservingExecutionContext.Run(CulturePreservingExecutionContext executionContext, ContextCallback callback, Object state)
at System.Windows.Threading.DispatcherOperation.Invoke()
at System.Windows.Threading.Dispatcher.ProcessQueue()
at System.Windows.Threading.Dispatcher.WndProcHook(IntPtr hwnd, Int32 msg, IntPtr wParam, IntPtr lParam, Boolean& handled)
at MS.Win32.HwndWrapper.WndProc(IntPtr hwnd, Int32 msg, IntPtr wParam, IntPtr lParam, Boolean& handled)
at MS.Win32.HwndSubclass.DispatcherCallbackOperation(Object o)
at System.Windows.Threading.ExceptionWrapper.InternalRealCall(Delegate callback, Object args, Int32 numArgs)
at System.Windows.Threading.ExceptionWrapper.TryCatchWhen(Object source, Delegate callback, Object args, Int32 numArgs, Delegate catchHandler)
at System.Windows.Threading.Dispatcher.LegacyInvokeImpl(DispatcherPriority priority, TimeSpan timeout, Delegate method, Object args, Int32 numArgs)
at MS.Win32.HwndSubclass.SubclassWndProc(IntPtr hwnd, Int32 msg, IntPtr wParam, IntPtr lParam)
at MS.Win32.UnsafeNativeMethods.DispatchMessage(MSG& msg)
at System.Windows.Threading.Dispatcher.PushFrameImpl(DispatcherFrame frame)
at System.Windows.Threading.Dispatcher.PushFrame(DispatcherFrame frame)
at System.Windows.Application.RunDispatcher(Object ignore)
at System.Windows.Application.RunInternal(Window window)
at System.Windows.Application.Run(Window window)
at System.Windows.Application.Run()
at ABB.Motion.WorkBench.App.Main()

  • Chris Chen asked 1 month ago
  • last active 1 month ago
1 vote
216 views

The x, y values showing in the tooltip of crosshair are rounded to 1 decimal place. How I can I modify the tooltip to show the actual x, y values? And how can I change the text font size in the tooltip?

  • Kelly Chan asked 1 month ago
  • last active 1 month ago
0 votes
240 views

Hi there!

I wonder if SciChart has support (for Android & iOS) for the following chart types (see attached example chart images):

  • Timeline chart (where events are mapped onto a linear timeline)

  • “Equation” chart (which shows an ellipsis, based on a mathematical equation)

  • Polar chart (as line, column and stacked bars)

If yes, how do I implement these chart types!?

Thanks in advance!

/Jacob

1 vote
234 views

I added the cursor modifier as below:

const chartDefinition = {
    ......,
    modifiers: [
        { 
            type: EChart2DModifierType.Cursor, 
            options: { crosshairStroke: "green",  crosshairStrokeThickness: 1}  
    },
    { type: EChart2DModifierType.MouseWheelZoom },
    { type: EChart2DModifierType.ZoomExtents }
    ]
};

const { sciChartSurface, wasmContext } = await chartBuilder.build2DChart("scichart-root", chartDefinition);  

As I want to show the x, y values of the cursor somewhere outside the chart instead of showing the tooltip. How can I get the x, y values when the cursor moving?

  • Kelly Chan asked 2 months ago
  • last active 1 month ago
1 vote
284 views

I am using SciChart with Next.js to create a real-time updated line chart. It works fine if there is 1 trace running with 130k datapoints. But when there are 4 traces (each with 130k datapoints) running in the chart, there is performance issue. After running for a while, this error is showing in the browser console:

“RangeError: Failed to execute ‘texImage2D’ on ‘WebGL2RenderingContext’: The ArrayBuffer/ArrayBufferView size exceeds the supported range.”

I tried to optimize the chart by following this page, but it doesn’t help on the lag issue.
https://www.scichart.com/documentation/js/current/Performance%20Tips.html

Here are my codes for updating the chart data:

if (SciChartSurface.renderableSeries.get(trace_num)) {
    SciChartSurface.renderableSeries.get(trace_num).dataSeries = new XyDataSeries(WasmContext, { xValues: dataX, yValues: dataY });
} else {
    const lineSeries = new FastLineRenderableSeries(WasmContext);
    lineSeries.strokeThickness = 1;
    lineSeries.stroke = tracesInfoRef[trace_num].color;
    lineSeries.dataSeries = new XyDataSeries(WasmContext, { xValues: dataX, yValues: dataY, dataIsSortedInX: true, dataEvenlySpacedInX: true, containsNaN: false });
    SciChartSurface.renderableSeries.add(lineSeries);
}

Can SciChart perform well with multiple traces which total datapoints larger than 500k? How can I fix the texImage2D error ?

  • Kelly Chan asked 2 months ago
  • last active 2 months ago
1 vote
264 views

I have been following the tutorials and in Tutorial 3 I have come to the point where data is added to an XyDataSeries and need to know the proper way to do it in Kotlin on Android (not Java).

In MainActivity.kt I have:

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

    SciChartSurface.setRuntimeLicenseKey("...");

    val surface = SciChartSurface(this)

    val chartLayout = findViewById<View>(R.id.chart_layout) as LinearLayout

    chartLayout.addView(surface)

    SciChartBuilder.init(this)

    val sciChartBuilder = SciChartBuilder.instance()

    val xAxis = sciChartBuilder.newNumericAxis()
        .withAxisTitle("X Axis Title")
        .withVisibleRange(-5.0, 15.0)
        .build();

    val yAxis = sciChartBuilder.newNumericAxis()
        .withAxisTitle("Y Axis Title")
        .withVisibleRange(0.0, 100.0)
        .build();

    val textAnnotation = sciChartBuilder.newTextAnnotation()
        .withX1(5.0)
        .withY1(55.0)
        .withText("Hello World!")
        .withHorizontalAnchorPoint(HorizontalAnchorPoint.Center)
        .withVerticalAnchorPoint(VerticalAnchorPoint.Center)
        .withFontStyle(20f, ColorUtil.White)
        .build()

    val chartModifiers = sciChartBuilder.newModifierGroup()
        .withPinchZoomModifier().withReceiveHandledEvents(true).build()
        .withZoomPanModifier().withReceiveHandledEvents(true).build()
        .build()

    // App crashes at the following point
    val lineData: XyDataSeries<Int, Double> = sciChartBuilder.newXyDataSeries(
        Int::class.java,
        Double::class.java
    ).build()

    // I presume this is also incorrect
    val scatterData: XyDataSeries<Int, Double> = sciChartBuilder.newXyDataSeries(
        Int::class.java,
        Double::class.java
    ).build()

    for (i in 0..999) {
        lineData.append(i, Math.sin(i * 0.1))
        scatterData.append(i, Math.cos(i * 0.1))
    }

    val lineSeries = sciChartBuilder.newLineSeries()
        .withDataSeries(lineData)
        .withStrokeStyle(ColorUtil.LightBlue, 2f, true)
        .build();

    surface.renderableSeries.add(lineSeries);

    Collections.addAll(surface.yAxes, yAxis);
    Collections.addAll(surface.xAxes, xAxis);
    Collections.addAll(surface.annotations, textAnnotation);
    Collections.addAll(surface.chartModifiers, chartModifiers);

}

}

The app crashes at the lines “val lineData: XyDataSeries<Int, Double> = sciChartBuilder.newXyDataSeries( …”. What is wrong here?

1 vote
269 views

How is it possible to sync SciChart with a ListView? The vertical chart grid should be the same width as the list view columns. A ScrollBar or a Chart-Overview should be used for synchronous scrolling of the X-axis and the ListView.

  • Tobias asked 2 months ago
  • last active 1 month ago
1 vote
287 views

I tried to use the trial version of SciChart with Next.js. But I got “SciChartSurface.setRuntimeLicenseKey is not a function” error. I don’t know what’s wrong, could you provide guideline for using SciChart with Next.js?

These are the codes in my next.config.js:

const CopyPlugin = require("copy-webpack-plugin");

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  webpack: ( config, { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack } ) => {
    config.plugins.push(
            new CopyPlugin({
                patterns: [
                    { from: "node_modules/scichart/_wasm/scichart2d.data", to: "" },
                    { from: "node_modules/scichart/_wasm/scichart2d.wasm", to: "" }
                ]
            })
        );
    return config;
  },
}

module.exports = nextConfig

And I have imported these files in pages/index.js

import {SciChartSurface} from "scichart/Charting/Visuals/SciChartSurface";
import {NumericAxis} from "scichart/Charting/Visuals/Axis/NumericAxis";
  • Kelly Chan asked 2 months ago
  • last active 2 months ago
1 vote
276 views

Working app suddenly getting System.Windows.Markup.XamlParseException: ‘Provide value on ‘System.Windows.Baml2006.TypeConverterMarkupExtension’ threw an exception.’
Inner Exception
FileNotFoundException: Could not load file or assembly ‘SciChart.Charting.DrawingTools, PublicKeyToken=b55dd9efe817e823’ or one of its dependencies. The system cannot find the file specified.

I am on a Windows 10 machine that looks like it just did a Windows Update…any thoughts on what this is?

1 vote
292 views

Hi,

I’m learning SciChart, and tried following this tutorial https://www.scichart.com/example/wpf-chart/wpf-3d-chart-example-add-objects-to-3d-chart/. I tried adding a mesh I generated in blender, as well as using the knight piece from the same source as the example. It looks to me like the normal vectors on the objects are inverted. This is definitely not a problem with my model, as multiple other .obj viewers don’t have a problem displaying my mesh, and the knight piece isn’t mine anyway. I exported the example into Visual Studio and it worked fine, all the pieces were solid. Does anyone have any idea what I’ve goofed here?

1 vote
301 views
MC3074  XML 네임스페이스 'http://schemas.abtsoftware.co.uk/scichart/exampleExternals'에 'EnumValueToStringConverter' 태그가 없습니다. 줄 26 위치 10. SciChart.Examples   C:\Users\YHS\Downloads\SciChart.Wpf.Examples-SciChart_v6_Release\SciChart.Wpf.Examples-SciChart_v6_Release\Examples\SciChart.Examples\Examples\Charts3D\CreateA3DChart\CreateACustomFreeSurface3DChart.xaml 26  

Tags that cause problems
xmlns:ext=”http://schemas.abtsoftware.co.uk/scichart/exampleExternals”

I am developing using Sci Chart for the first time.
My head hurts with license issues and tag issues.
I hope this is resolved smoothly.

1 vote
355 views

Hi Team,

I am getting the error message Sorry! your trail of schichart has expired message is coming on the end user PC through we have purchased the developer license and activating the schichart using the runtime key provided in my account. Gone through the steps provided in here .

Also checked if there are any spaces in the license key. FYI, my developer license is expired and using the v5.4 with nuget.

0 votes
0 answers
282 views

Some of our users are reporting the following error when installing SciChart WPF v6.6

Failed to uninstall old application files. Please try running the installer again

enter image description here

This issue occurs when an older (pre v6.6) version of SciChart has been installed and trying to re-install version 6.6.

The solution for this is:

  • To go into Control panel and Add or remove programs.
  • Make sure both the SciChart SDK and the SciChart Licensing Wizard are uninstalled.
  • Then try to install SciChart WPF v6.6 again

Please comment below if you experience this problem & the above solution did not work.

Thanks and regards,
Andrew

1 vote
310 views

Hi,
I started the WPF trial version today(must be the newest version). I used the Example demo to export code. But I can not compile it. Please see the attached images. I did run “dotnet restore” from NuGet Package Manager->Package Manager Console. It didn’t help. In the solution explorer, there is yellow mark beside Packages.

What should I do to compile the exported sample?

Thanks
Rosalind

1 vote
323 views

Hi,

I’m trying to add point markers to a scatter series that have transparent fill and coloured stroke. It works but the behavour of the stroke thickness isn’t quite as expected.

Any thickness about 1 starts to clip the square that the sprite is drawn in, making ellipses look square.

SquarePointMarker only seems to draw the stroke on the top and left sides.

TrianglePointMarker clips the stroke at the top and bottom.

I can’t seem to find any other properties that might change this. Padding seems to have no effect.

The following code gereates the point markers:

public static IPointMarker CreatePointMarker(PointMarkerTypes pointType, double size, double strokeThickness, Color fill, Color stroke)
        {
            // Square
            if (pointType == PointMarkerTypes.Square)
            {
                var square = new SquarePointMarker()
                {
                    StrokeThickness = strokeThickness,
                    Stroke = stroke,
                    Fill = fill,
                    Height = size,
                    Width = size,
                };

                return square;
            }

            // Triangle
            if (pointType == PointMarkerTypes.Triangle)
            {
                var triangle = new TrianglePointMarker()
                {
                    StrokeThickness = strokeThickness,
                    Stroke = stroke,
                    Fill = fill,
                    Height = size,
                    Width = size
                };

                return triangle;
            }

            // Inverse Triangle
            if (pointType == PointMarkerTypes.InverseTriangle)
            {
                var invTriangle = new InvertedTrianglePointMarker()
                {
                    StrokeThickness = strokeThickness,
                    Stroke = stroke,
                    Fill = fill,
                    Height = size,
                    Width = size
                };

                return invTriangle;
            }

            // X
            if (pointType == PointMarkerTypes.X)
            {
                var x = new XPointMarker()
                {
                    StrokeThickness = strokeThickness,
                    Stroke = fill,
                    Fill = fill,
                    Height = size,
                    Width = size
                };

                return x;
            }

            // Cross
            if (pointType == PointMarkerTypes.Cross)
            {
                var cross = new CrossPointMarker()
                {
                    StrokeThickness = strokeThickness,
                    Stroke = fill,
                    Fill = fill,
                    Height = size,
                    Width = size
                };

                return cross;
            }

            // Circle
            else
            {
                var circle = new EllipsePointMarker()
                {
                    StrokeThickness = strokeThickness,
                    Stroke = stroke,
                    Fill = fill,
                    Height = size,
                    Width = size,
                };

                return circle;
            }
        }
1 vote
334 views

Good day 🙂

I am kinda new to SciChart …
Still under learning process on how to use it …
I was doing this particular task assigned and I got stuck …
May I know to create a Trace Setting Panel using custom annotation with html element inside ?

This is my index.js code :

import { SciChartSurface } from "scichart/Charting/Visuals/SciChartSurface";
import { NumericAxis } from "scichart/Charting/Visuals/Axis/NumericAxis";
import { FastLineRenderableSeries } from "scichart/Charting/Visuals/RenderableSeries/FastLineRenderableSeries";
import { XyDataSeries } from "scichart/Charting/Model/XyDataSeries";

async function initSciChart() {

    SciChartSurface.setRuntimeLicenseKey("...");

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

    // Create an X,Y Axis and add to the chart
    const xAxis = new NumericAxis(wasmContext);
    const yAxis = new NumericAxis(wasmContext);

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

    const lineSeries1 = new FastLineRenderableSeries(wasmContext, { stroke: "Yellow"});
    sciChartSurface.renderableSeries.add(lineSeries1);
    lineSeries1.dataSeries = new XyDataSeries(wasmContext, {xValues: [1, 3], yValues: [2, 4]});

    const lineSeries2 = new FastLineRenderableSeries(wasmContext, { stroke: "Red"});
    sciChartSurface.renderableSeries.add(lineSeries2);
    lineSeries2.dataSeries = new XyDataSeries(wasmContext, {xValues: [1, 7], yValues: [3, 8]});

    const lineSeries3 = new FastLineRenderableSeries(wasmContext, { stroke: "Blue"});
    sciChartSurface.renderableSeries.add(lineSeries3);
    lineSeries3.dataSeries = new XyDataSeries(wasmContext, {xValues: [1, 7], yValues: [6, 3]});

    const lineSeries4 = new FastLineRenderableSeries(wasmContext, { stroke: "Green"});
    sciChartSurface.renderableSeries.add(lineSeries4);
    lineSeries4.dataSeries = new XyDataSeries(wasmContext, {xValues: [10, 6], yValues: [6, 3]});

    const lineSeries5 = new FastLineRenderableSeries(wasmContext, { stroke: "Purple"});
    sciChartSurface.renderableSeries.add(lineSeries5);
    lineSeries5.dataSeries = new XyDataSeries(wasmContext, {xValues: [15, 8], yValues: [12, 6]});

    const lineSeries6 = new FastLineRenderableSeries(wasmContext, { stroke: "Orange"});
    sciChartSurface.renderableSeries.add(lineSeries6);
    lineSeries6.dataSeries = new XyDataSeries(wasmContext, {xValues: [13, 8], yValues: [2, 1]});

}
initSciChart();

This is my index.html code:

<html lang="en-us">

<head>
    <meta charset="utf-8" />
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>SciChart.js Task 1</title>
    <script async type="text/javascript" src="bundle.js"></script>
    <style>
        body {
            font-family: 'Arial'
        }
    </style>
</head>

<body>
    <h1>task</h1>
    <p>task 1</p>

    <!-- the Div where the SciChartSurface will reside -->
    <div id="scichart-root" style="width: 800px; height: 600px;"></div>

</body>

</html>

Together I will attach my output (from the above code) and also the output which I suppose to get (which I’m not sure how to do it …

Hope to hear from you soon.

Thank you in advance.

1 vote
476 views

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

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

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

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

0 votes
0 answers
291 views

I am trying to implement Scichart JS into a Create React App web application.
So far I have gotten it working for all the functionality I need except for a very key feature.
Is the Zoom functionality completely absent for iOS safari (touch interaction)?
If so, is there a workaround to make it work (ie manually adding pointer events to the chart surface?)

Thanks

1 vote
663 views

Hello,

I recently updated 2 different apps that both use SciChart with XCode14 and uploaded the archives to the App Store via Organizer. They both generated the warning/error:

“The app references non-public selectors in …/Frameworks/SciChart.framework/SciChart: moveToX:y:”

This did not occur with Xcode 13.

Any advice on how best to handle this?

Thank you.

  • C Bolton asked 2 months ago
  • last active 2 weeks ago
1 vote
396 views

Hello I am using the following unixtimestamp format for the x axis and it renders some random numbers instead of treating them as dates. What is the correct format? please see attached screenshot.

export const dateValues: number[] = [
    1546300800000,
    1546304400000,
    1546308000000,
    1546311600000,
    1546315200000,
    1546318800000,
    1546322400000,
    1546326000000,
    1546329600000,
    1546333200000,
    1546336800000,
    1546340400000,
    1546344000000,
    1546347600000,
    1546351200000,
    1546354800000,
    1546358400000,
    1546362000000,
    1546365600000,
    1546369200000,
    1546372800000,
    1546376400000, ]

Here’s the code for creating the chart

  // Create a SciChartSurface
  const { sciChartSurface, wasmContext } = await SciChartSurface.create(
    "scichart-root"
  ); 

  sciChartSurface.xAxes.add(
        new CategoryAxis(wasmContext, {
          labelProvider: new SmartDateLabelProvider(),
          defaultXStep: 1546304400000 - 1546300800000,
          //growBy: new NumberRange(0.05, 0.05),
          drawMajorGridLines: true,
          drawMinorGridLines: true,
          axisAlignment: EAxisAlignment.Bottom,
          autoRange: EAutoRange.Once,
          drawMajorBands: false,
        })
      );
0 votes
343 views

Hello,
When my program runs for a while, the lines disappear. I check the dataseries, it does not have NAN data, and the data is correct.
It can happen twice a week.

Best regards,
YXJ

  • YXJ YXJ asked 3 months ago
  • last active 3 months ago
1 vote
401 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

1 vote
391 views

Hi,

We want to implement averaging of data points when you zoom into a graph.
We have implemented pre-processed average plotting – and this works for certain cases.
Basically, you see less point markers when you zoom out a certain level (point marker will show averaged points), and when you zoom in, point markers show increased sample points – in real time.

  1. Is there a an API that enables this capability and determining when the averaging happens (at what zoom level) and the averaging period (to average values over)?
  2. If there isn’t an API, can you point us in the right direction to implement such feature?
1 vote
0 answers
331 views

Hi,

I have annotation, users can it drag and drop. But for it first need select this annotation and after drag it(with re-touching).
How to immediately drag annotation(without re-touching)?

Thanks in advance.

Regards,
Batyr

1 vote
454 views

I am currently following the tutorial at the page listed here.

https://www.scichart.com/documentation/win/current/webframe.html#Tutorial%2003b%20-%20Adding%20Series%20to%20a%20Chart%20with%20MVVM.html

Instead of using the given values to add to the series, I am using very small values like so:

var lineData = new XyDataSeries<double, double>() { SeriesName = "Testing Series" };
lineData.Append(0, 0);
lineData.Append(1, 0.001);
lineData.Append(2, 0.002);

However the axis ticks do not display a high enough resolution as shown in the image attached. Each one will show either 0, 0.001 or 0.002 and no further. I have tried changing the axis MinorDelta and MajorDelta to smaller values but this has not worked. Is there any way to fix this?

  • Hamza Butt asked 3 months ago
  • last active 3 months ago
1 vote
516 views

Hello,
I’ve got Annotations ViewModels collection (BoxAnnotationViewModel, VerticalLineAnnotationViewModel, LineAnnotationViewModel) bound by AnnotationsBinding. Every Annotation ViewModel has properties set to:

CoordinateMode = AnnotationCoordinateMode.Absolute
IsEditable = true
DragDirections = XyDirection.XYDirection
ResizeDirections = XyDirection.XYDirection

My goal is to move and resize every annotation on SciChart surface only by integer value. Is there any way to achieve this?

Best regards,
Anna

1 vote
437 views

Hi I am trying to add annotation to Linechart example.
I get the error in the image

1 vote
448 views

Hello,

I am trying to change the frequency range in the Y axis on the Heatmap to 100000 from 50000, but the plot does not seem to be working to scale to the proper frequency range on the Y axis. I expect the plot to keep the same scale around 20000 for the upper line when I change the upper scale to 100000, but the graph scales the upper line up to 40000. I’m using function Heatmap2DArrayDataSeries() and passing the series data along with TimeFunc() for mapping to X axis and FreqFunc() for mapping to Y axis. I made some changes to FreqFunc(), but it did not change the upper line to 20000. See below for my partial code. Thanks,

    protected override void OnDisplayLoaded()
    {
    ...
    ...
        _dopplersurface.YAxes[0].VisibleRange = YVisibleRange2; // YVisibleRange2 = {0, 100000}
        _surface.UpdateLayout();

    }

    private void PlotData()
    {
    ...
        ...
        heatmap2DArrayDataSeries = new Heatmap2DArrayDataSeries<DateTime, double, double>(_spectrogramBuffer, TimeFunc, FreqFunc);
        HeatmapRenderableSeries = heatmap2DArrayDataSeries;
    }

    double FreqFunc(int iy)
    {
        double FreqDelta = 1.0 / (time_queue[1] - time_queue[0]).TotalSeconds / (FFT_Points / 2.0);
        if (((FFT_Points / 2.0) * FreqDelta / 2) < (double)YVisibleRange2.Max); // FFT_Points = 1024
        {
            FreqDelta = FreqDelta * 2;
        }
        return iy * FreqDelta / 2; // Returns 0 if iy is 0 and 50000 if iy is 512
    }

    DateTime TimeFunc(int ix)
    {
        if (time_queue.Count > (ix * Step))
        {
            DateTime DateTimeTemp1 = time_queue[ix * Step];
            return DateTimeTemp1;
        }
        else
        {
            return time_queue[time_queue.Count - 1];
        }
    }
  • Hoa Duong asked 3 months ago
  • last active 2 months ago
Showing 1 - 50 of 4k results