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

We are using a sci-chart in our ReactJs project.

SCI chart values have to be changed from the sidebar and whenever a value is changed from the sidebar the chart values are not updated without re-rendering the entire surface of the SCI chart. We need to change the sidebar value without re-rendering how is this possible?

1 vote
2k views

TextAnnotation,Let me use this method, I want to make all the text in the text attribute display vertically, and find that there is no such function, NativeTextAnnotation has this function but does not support Chinese.I hope you can see that you can give a reply, thank you![enter image description here][1]

1 vote
6k views

Hello,

Normally, if I have a ScichartSurface with a X- and Y-Axis, were both axis AutoRange- properties are set to Always, the surface displays the entire data by adjusting the Visible ranges of the axis after new data has been appended.

This also works if there are multiple Data-Series on the ScichartSurface.

In my case, I have two FastLineRenderableSeries on my Surface. Each of them receiving new data via the Append-function while the x- and y-axis are continuously adjusted automatically to display all the datapoints of both Datasets.

So far so good…

But what would I have to do if I wanted one of the two Datasets to be ignored by the Autorange properties of the x- and y-Axis?

I have already tried to set the X- and YAxisID of one dataset to null, hoping I could make both axis ignore this Dataset while they are adjusting their Visible ranges. However, this only led to error messages.

I could also try to write my own ViewPortManagers and overwrite the OnCalculateNewXRange and OnCalculateNewYRange funvtions, but that seems a little bit excessive.

Is there an easy way to achieve the desired behavior?

Thanks.

1 vote
6k views

I have two SciChartSurfaces

One is a HeatMap (x:Name=”MainChartSurface”), the other a line graph.
I have set it up so that when a vertical cursor is moved the smaller line graph shows a ‘cross-section’ of the heatmap.

The attached image shows the right hand end of the heatmap and the smaller line graph.

The X-axis of the line graph is set to Alignment=Right and this axis has the same range as the y-axis of the heat map – set in xml as:

 MajorDelta="{Binding Source={x:Reference Name=MainChartSurface}, Path=YAxis.MajorDelta, Mode=TwoWay}"
 MinorDelta="{Binding Source={x:Reference Name=MainChartSurface}, Path=YAxis.MinorDelta, Mode=TwoWay}"
 AutoTicks="False"
 VisibleRange="{Binding Source={x:Reference Name=MainChartSurface}, Path=YAxis.VisibleRange, Mode=TwoWay}"

this all works, so if the main graph is zoomed, the 2D line graph Y-axis follows the main graph.

The Y-axis of the line graph has Alignment=Bottom, and it shows the z-values for all y-values at the location vertical cursor (a RolloverModifier) on the main graph.

The problem I have is that the space taken by the axis at the bottom of the charts is different, so the chart areas are different. Look carefully at the attached image and see the bottom axes do not align.

How can I link the space taken to force the bottom axes to stay in alignment?

Thanks
Andrew Milford

1 vote
2k views

How to display data labels vertically and support Chinese,As shown in Fig

1 vote
2k views

Hi.
My colleagues have used on their WPF application SciChartScrollbar to select a portion of a created graph. I want to use the same behavior on Xamarin.Android. What can I use to have the same effect?
Thank you.

1 vote
6k views

Hi ,

I’m encountering a critical problem with the SciChart library. The issue seems related to the loading of native methods, specifically Java_com_scichart_charting_numerics_coordinateCalculators_FlippedDoubleCoordinateCalculator_nativeGetCoordinates.

Development Environment:
SciChart Version: 4.4.0-nightly.4744
Library Type: Android
Android Version: Android 13
Release Method: Play Store Download
Debug/Release Modes: Not Reproducible in Direct Android Studio Build

I’ve reviewed the code and documentation but couldn’t pinpoint the issue. I need help with:
1. Confirming the correct loading of the SciChart library.
2. Suggestions for troubleshooting to identify why the native method invocation is failing.
3. Any updates or configurations needed for proper SciChart library integration.

Thanks

Raja Debbarmann

1 vote
7k views

Is there any option to hide the axis title of NumericAxis3D in ZxAxisPlane. Want to hide the title highlighted in the attached image.

  • Ammar Khan asked 7 months ago
  • last active 2 weeks ago
0 votes
0 answers
2k views

Hello!

I have got an exception on databinding an AxisCollection and then sorting a ListBox with charts inside.

Element already has a logical parent. It must be detached from the old parent before it is attached to a new one.
at MS.Internal.Controls.InnerItemCollectionView.AssertPristineModelChild(Object item)
at MS.Internal.Controls.InnerItemCollectionView.Insert(Int32 index, Object item)
at System.Windows.Controls.ItemCollection.Insert(Int32 insertIndex, Object insertItem)
at SciChart.Charting.Visuals.SciChartSurface.slf(IAxis ann, AxisAlignment ano, Boolean anp)
at SciChart.Charting.Visuals.SciChartSurface.slb(IAxis ane, AxisAlignment anf, Boolean ang)
at SciChart.Charting.Visuals.SciChartSurface.ske(IAxis aly)
at SciChart.Core.Extensions.EnumerableExtensions.ForEachDo[T](IEnumerable1 enumerable, Action1 operation)
at SciChart.Charting.Visuals.SciChartSurface.OnApplyTemplate()
at System.Windows.FrameworkElement.ApplyTemplate()
at System.Windows.FrameworkElement.MeasureCore(Size availableSize)
at System.Windows.UIElement.Measure(Size availableSize)
at System.Windows.Controls.DockPanel.MeasureOverride(Size constraint)
at System.Windows.FrameworkElement.MeasureCore(Size availableSize)
at System.Windows.UIElement.Measure(Size availableSize)
at System.Windows.Controls.Border.MeasureOverride(Size constraint)
at System.Windows.FrameworkElement.MeasureCore(Size availableSize)
at System.Windows.UIElement.Measure(Size availableSize)
at MS.Internal.Helper.MeasureElementWithSingleChild(UIElement element, Size constraint)
at System.Windows.FrameworkElement.MeasureCore(Size availableSize)
at System.Windows.UIElement.Measure(Size availableSize)
at System.Windows.Controls.Border.MeasureOverride(Size constraint)
at System.Windows.FrameworkElement.MeasureCore(Size availableSize)
at System.Windows.UIElement.Measure(Size availableSize)
at System.Windows.Controls.Control.MeasureOverride(Size constraint)
at System.Windows.FrameworkElement.MeasureCore(Size availableSize)
at System.Windows.UIElement.Measure(Size availableSize)
at System.Windows.Controls.Border.MeasureOverride(Size constraint)
at System.Windows.FrameworkElement.MeasureCore(Size availableSize)
at System.Windows.UIElement.Measure(Size availableSize)
at MS.Internal.Helper.MeasureElementWithSingleChild(UIElement element, Size constraint)
at System.Windows.FrameworkElement.MeasureCore(Size availableSize)
at System.Windows.UIElement.Measure(Size availableSize)
at System.Windows.Controls.Border.MeasureOverride(Size constraint)
at System.Windows.FrameworkElement.MeasureCore(Size availableSize)
at System.Windows.UIElement.Measure(Size availableSize)
at System.Windows.Controls.Control.MeasureOverride(Size constraint)
at System.Windows.FrameworkElement.MeasureCore(Size availableSize)
at System.Windows.UIElement.Measure(Size availableSize)
at System.Windows.Controls.WrapPanel.MeasureOverride(Size constraint)
at System.Windows.FrameworkElement.MeasureCore(Size availableSize)
at System.Windows.UIElement.Measure(Size availableSize)
at System.Windows.ContextLayoutManager.UpdateLayout()
at System.Windows.ContextLayoutManager.UpdateLayoutCallback(Object arg)
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)

I am able to reproduce the issue. Please see the attachment.

I will not write more, since the example is simple.

What can i do to avoid this issue?

Thank you very much!
Paul

1 vote
2k views

Hi!

As described in Deleting DataSeries Memory, deleting a series with all its data can be done by calling .delete() on the renderable (example 3) .

If i do just that, the legend doesn’t reflect that. Is there something else to do?

See repro based on Chart Legends Example – just added a 2s timeout after initialization that deletes the renderableSeries of data3. Removes the series from the chart but not from the legend.

1 vote
2k views

Good day,

we are using the VerticalSliceModifier for sorted data and it works very good.

<local:VerticalSliceModifierExt x:Name="SliceModifier">
<s:VerticalSliceModifier.VerticalLines>
    <chartModifier:SnappyVerticalLine x:Name="VerticalLine"
                          ShowLabel="False"
                          X1="0"
                          Y1="0"
                          CoordinateMode="Absolute"
                          IsEditable="True">
    </chartModifier:SnappyVerticalLine>
</s:VerticalSliceModifier.VerticalLines>

Please see the image “Example Vertical Slice Modifier”.

The challange is to have something similar for unsorted data.

One of the issues are multiple intersections. Please see the image “Multiple Intersections” where i would like be able to select what intersections shall be highlighted.

The next challange is the usage of multiple series and synchronization based on a different property (t for time). Please see “Multiple Series” image.

We already have IPointMetadata with X,Y and t to be able to find the data point to highlight.

My question: Is there already some modifier chat can help with this requirements or what would be a clean solution if we need to develop a custom modifier.

Thank you in advance
Paul

1 vote
6k views

Hello, how do I remove the shadow from tooltips, generated by the VerticalSliceModifier?

Thanks!

1 vote
6k views

I am currently working on a chart that shows data in minutes.
As shown in the attached photo, I would like to create a tick label for every minute and bold the labels for the 5 minute ticks. Is this possible?

1 vote
2k views

Good evening. Lately I’ve been troubleshooting a problem with page memory usage increasing. Over time, the memory grows exponentially and reaches several gigabytes. To explain the problem, we need to describe how we use charts:

On our website in real time, depending on our algorithm, the charts replace each other. The user constantly sees 4 charts, which are constantly replaced by others. Adding new charts occurs unnoticed by the user and only after the graph is fully loaded and drawn does it replace the previous one. That is, the user actually sees 4 charts, but there may be more on the page. After replacing the desired chart, the old one is deleted using surface.delete() and removing all dependencies.

At first, when creating a chart, I used the create() method. After a number of attempts to avoid memory accumulation and re-reading the documentation, I came to the conclusion that it is possible, since all graphs are created using create() – they have a common wasm and since there cannot be a situation in which all charts will be deleted (at least 4 are always present ), then wasm memory is not freed. Tell me if I’m right about this.

Afterwards, I decided to try to create charts using createSingle() with a reliable method, which now, since each graph has its own wasm, memory will be freed. Perhaps this was the case, but I can’t say for sure, because now after some time the page began to reload automatically with the appearance of an error, the screenshot of which I attached. This is most likely due to a wasm limitation on the page when using createSingle. Although it’s strange, when you delete the chart, the amount of wasm should decrease. And even with a limit of 16 copies, this should be enough. Please explain this error to me as well, perhaps the problem with rebooting can be somehow solved by you (I’m not sure that this should happen)

Thank you very much in advance for your answer. Have a good day!

1 vote
2k views

This demo was very helpful in working export out. I have a followup question. For a specific user request, I’m currently attempting something along these lines (current state; there’s some spaghetti-against-the-wall method going on at the moment):

const previousTheme = surface.themeProvider;

    const exportTheme = {
        ...previousTheme,
        sciChartBackground:"Transparent",
        gridBackgroundBrush:"Transparent",
        axisBandsFill: "Transparent"
    }

    surface.applyTheme(exportTheme);
    surface.background = "Transparent";

    new Promise(r => setTimeout(r, 1000)).then(() => {
        try {
            const node = document.getElementById('scichart-stuff');
            if (!node)
                return;
            domtoimage
                .toPng(node )
                .then(function (blob) {
                    saveAs(blob, 'plot.png');
                })
                .catch(function (error) {
                    console.error('Problem exporting/saving image of plot', error);
                });
        } finally {
            surface.applyTheme(previousTheme);
        }
    })

I am able to see the update (after adding the delay) on the screen, but the export appears to be ignoring the values I’m setting. I’m wondering what I might be missing in terms of the interactions of these libraries.

1 vote
2k views

Am trying to get the same look and feel of the cursor modifier on both the charts.

  • am not able to get the tool tip to show on the other side.
  • am not able to get the get horizontal lines.
  • P S asked 7 months ago
  • last active 7 months ago
1 vote
7k views

Sorry for opening another question, but this followup to https://www.scichart.com/questions/js/series-labels got missed.

I’m looking to add a border and background to a TextAnnotation.

Back in the WPF days we had the ability to pretty easily add background colors and such to annotations, thanks to the existing WPF model. I’m assuming in the JS example this would be custom; do you have any existing code/examples for that? Looking for being able to use a colored box whose fill matches the renderable series stroke, along with a contrasting text color.

Dan

1 vote
2k views

I remember asking about something similar many years ago with WPF, but in browser the problem seems more apparent.

Using the current data model (I can be fairly flexible on the backend, and don’t necessarily have to do things this way), for some of the plots I generate many series that do some funky overlapping stuff (example attached). In the extreme examples, this can be thousands of series (the total number of data points might be < 100k).

In these cases, drawing basically grinds to a halt. Zooms take seconds, the OS starts complaining that chrome is locked up — you get the idea.

Is there a better way to approach this sort of plot? Are there any tuning recommendations for this scenario?

1 vote
2k views

I’m a C# developer looking to evaluate working with SciChartJS for a possible future project.

I’ve created a .NET Blazor Project working with JavaScript Interop and I would like to extend the CustomChartModifier2D in TypeScript.

I’ve not used npm to install SciChart into the project, rather I’m using the CDN approach in my _Host.cshtml file.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/index.min.js" crossorigin="anonymous"></script>

I’ve been searching online for a SciChartJS TypeScript definition file so that I can leverage TS Strongly Typed system in my test project.

Is there one? Or do I need to build my own, or even is there an already made example of extending SciChart with TypeScript somewhere I’ve missed?

Thank you

  • David P asked 7 months ago
  • last active 7 months ago
1 vote
2k views

Hi –

I could not find an example in the various examples your provide

I have several charts in different components

When a component is closed I want to ensure the chart is destroyed and there is not potential for memory leak

What is this best way of doing this?

Thanks

1 vote
2k views

As part of a recent flag added to 3.2.509, I moved from 3.2 to 3.2.509; it looks like positioning of the scichart legend has changed. The style is now appearing as position: absolute — I don’t have access to source, but I wonder if this was part of 3.2.491, which mentioned something about positioning of the legend?

Anyway, if this was an intended change — and if it’s not something I managed to do to myself — it broke my implementation of an outside-of-plot legend. This is how the style is currently appearing:

<div class="scichart__legend" style="height: 100%; position: absolute; display: flex; left: 0; top: 0; text-align: center;">
...
</div>

This is how it appeared my currently deployed code:

<div class="scichart__legend" style="height: 100%; display: flex; float: left; text-align: center;">
...
</div>

Anyway, should be able to figure something out I hope — I’m no CSS wizard — but wanted to flag it as a possible breaking change that might not have been intended.

1 vote
2k views

Hello,

I found an issue with very high memory usage by the application. after some tests I found the problem and moved it to a separate example(https://codepen.io/PodaRocheK/pen/PoVmzvP?editors=0011). Please check this code and observe the memory usage on this page. With prolonged use (after 10 minutes), it is clear that more and more memory is used. After hours, the memory used may already be more than several gigabytes. Tell me what the problem is, maybe I’m doing something wrong. Maybe I’m somehow storing old data incorrectly or adding it incorrectly.

This example is not a working example, it has been sped up in order to quickly identify the problem. In our example, an unnecessary data update will occur once every few seconds and after a night of inactivity, the entire page will die. Please tell me what the problem is.

Thank you!

1 vote
2k views

Hi Folks,

Wanted to ensure I’m working in the right direction here. Requirement is to add inline series labels on the plot surface. It’s an awkward requirement at times, but it keeps coming up with because other providers do this sometimes.

I’ve been playing with the examples of using data labels ( https://github.com/ABTSoftware/SciChart.JS.Examples/blob/master/Examples/src/components/Examples/Charts2D/TooltipsAndHittest/UsingVerticalSliceModifier/index.tsx ).

This might work. It’s a little strange since I only need to show at most one label per series. So I use the data label provider I assume and have to manually space them along the index range.

The only alternative I’m aware of is the annotations api, which of course is quite robust and probably a little too fancy for this case.

Appreciate any thoughts on the approach here — thanks!

EDIT: Attached very contrived example. The idea is to supply a label to name the series inline (apparently a legend is not sufficient), but in a way that is reasonably useful visually (similar to the spacing capabilities in the data labels api). The text would be some piece of metadata that is derived from the series (or at least has a 1:1 relationship with the series).

1 vote
6k views

Hello,

i’m trying to build a chart using a Stripe Data series, on the X axis i have a DatetimeAxis while on Y axis i have a Numeric.

I have an observable collection of IRenderableSeriesViewModel, and when i try to add a StripeRenderableSeriesViewModel if the dataseries contains many elements (>2000) it logs this exception below:

Exception thrown: ‘System.InvalidCastException’ in System.Private.CoreLib.dll
SciChartSurface didn’t render, because an exception was thrown:
Message: Invalid cast from ‘Double’ to ‘DateTime’.
Stack Trace: at System.Double.System.IConvertible.ToDateTime(IFormatProvider provider)
at System.Convert.ChangeType(Object value, Type conversionType, IFormatProvider provider)
at SciChart.Charting.Model.DataSeries.StripeDataSeries2.rwx(ResamplingParams gib, StripePointSeries gic)
at SciChart.Charting.Model.DataSeries.StripeDataSeries
2.ToPointSeries(ResamplingParams resamplingParams, ResamplingMode resamplingMode, IPointResamplerFactory factory, IPointSeries lastPointSeries)
at dih.lay(AxisCollection gg, IRenderableSeries gh, RenderPassInfo gi, IPointResamplerFactory gj, Boolean gk, IDataSeries& gl, IndexRange& gm, IPointSeries& gn, Int32& go)
at dih.lax(ISciChartSurface gd, Size ge, Boolean gf)
at dih.RenderLoop(IRenderContext2D renderContext)
at SciChart.Charting.Visuals.SciChartSurface.DoDrawingLoop()
Exception thrown: ‘System.Threading.SynchronizationLockException’ in SciChart.Drawing.dll
SciChartSurface didn’t render, because an exception was thrown:
Message: Object synchronization method was called from an unsynchronized block of code.
Stack Trace: at System.Threading.Monitor.Exit(Object obj)
at irv.hds(jbq r, SCRTRenderContext s)
at jbv.Dispose()
at SciChart.Charting.Visuals.SciChartSurface.DoDrawingLoop()

Binding and data i’m pretty sure are ok since with fewer data it works fine

EDIT: i was able to reproduce the issue in the wpf sample project (repo), just replace GanttChartViewModel.cs with the sample one i have attached here and it can be reproduced by navigating to the Gantt chart example

1 vote
2k views

When I’m using a BoxAnnotation, and it is selected, I can see that the borders are shown expanding past the chart area, on top of the axes.
Ideally they would have the same behaviour as the normal stroke, and keep constrained to the chart area.

Codepen showing the issue: https://codepen.io/jrfv/full/bGzqvoE

Am I missing some configuration to make this work?

Thanks!

1 vote
2k views

Hello everybody,

Having two FastLineRenderableSeries objects, how can I display them on the same chart, where the X axis represents the time, but the second one with a small time delay on the x-axis (shifted)? Thanks.

1 vote
2k views

Hi,

I am facing another issue with dataLabels in latest version of Scichart. I saw another question with similar is already posted and the fix is released.

Can you check this code.

I tried to reproduce the issue with the vue js example code, codesandbox. But the issues is behaving differently in example code, codesandbox, and my existing project.

codesandbox: https://codesandbox.io/s/scichart-error-6xc6jw?file=/src/index.ts
codesandbox:- Text in the bottom area are displayed and top area no labes are displayed.

I am attaching the vue js file also. Please check the file also, On the example no labels are displayed.

I am attaching the video of my project also, Here the labels are invisible sometimes, sometimes the labels are showing not properly. Video Link: https://drive.google.com/file/d/1vZ0lO5xdmN9VfFGXMaoTPfTgqRytrEAl/view?usp=sharing

1 vote
2k views

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

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

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

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

Hello everyone,

I have 2 HorizontalLineAnnotations on the chart as price indicators. Sometimes i need to add to some label more data on the second line of the text. You can see example of correct annotation’s label. How can i add ‘\n’ or ‘
‘ to the text for such result?

Thank you a lot!

1 vote
2k views

Hello everyone. A similar question has already been asked just below the forum, but there is no answer. I have dynamically added diagrams. However, I am interested in the possibility of adding buttons for closing and collapsing diagrams directly to the chart panel. I need the option to close any selected chart. How can this be implemented and written? Thank you.

1 vote
2k views

Dear SciChart team,

I’ve been using SciChart WPF 2D professional for many years now, but this week I’m having a strange problem on one of my colleague’s new laptop (Lenovo X13). The charts seem frozen.

To check if it’s a problem with my application or something else, I installed SciChart on the laptop and launched the SciChart WPF v7 example (.net framework). Then I found all the charts do not render properly.

I have searched the questions on the forum, and I found this https://www.scichart.com/questions/wpf/zoom-not-working-properly-on-one-single-computer, it seems there was someone had the same issue, but it was posted 10 years ago, so I am not sure does the intel graphics hardware still has this problem now days.

I am asking my colleague to upgrade the graphic adapter’s driver, but if you have any other idea to fix this issue, please also let me know.

Best Regards
Chris

  • Chris Chen asked 8 months ago
  • last active 8 months ago
1 vote
2k views

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

  • Vishnu K U asked 8 months ago
  • last active 7 months ago
0 votes
2k views

Good afternoon. Scichart WPF has two built-in small buttons in the top right corner of the panels for collapsing and closing charts. How can you add such buttons in Scichart javascript and how to correctly describe the functions?

1 vote
10k views

I’m looking on https://demo.scichart.com/javascript-multi-pane-stock-charts-sync-technique
I have a q react application. Can I add/remove subcharts(indicator panes) dynamically?

1 vote
2k views

I’m using an example of RealtimeTickingStockCharts

https://github.com/ABTSoftware/SciChart.JS.Examples/tree/master/Examples/src/components/Examples/Charts2D/CreateStockCharts/RealtimeTickingStockCharts

I’ve added a modifier

new YAxisDragModifier({
            dragMode: EDragMode.Scaling,
        }),

I see icon changed to arrows but scaling does not work. What should I check ?

1 vote
6k views

a

1 vote
10k views

Hello,
I’m currently rewriting a program in .net7 WPF using MVVM as much as possible.

In my MainViewModel:

I read data from a CSV file and transforming it into an ObservableCollection of LineRenderableSeriesViewModel (stored in the « RenderableSeriesViewModels » variable) . Additionally, the Y axes are transformed into ObservableCollection of IAxisViewModel (within the « Yaxes » variable).
Each series corresponds to a LineRenderableSeriesViewModel and each Y axis is represented as a NumericAxisViewModel. The X-axis is a DateTime common to all series and is declared only in XAML.

Within my view’s XAML:

I declare RenderableSeries=”{s:SeriesBinding RenderableSeriesViewModels}” and YAxes=”{s:AxesBinding YAxes}. I’ve defined a legend template to add several elements:
– DataContext=”{Binding RenderableSeries}”
– A checkbox to toggle serie visibility (IsVisible binding).
– A checkbox to toggle Y-axis visibility for the serie (YAxis.Visibility binding).
– A color picker to change the color of a serie, bound to “Stroke”, “YAxis.TickTextBrush”, and “YAxis.BorderBrush”
– A slider for adjusting serie thickness (StrokeThickness binding).

Results:

Each element acts on the graph as expected: RenderableSeries updates and the graph refreshes correctly.

In the MainViewModel, RenderableSeriesViewModels and YAxes are not updated for all elements:
– “IsVisible” and “StrokeThickness” for the concerned series are instantly modified in RenderableSeriesViewModels but “Stroke” is not.
– “YAxes” is not updated.

The code for the LegendTemplate and a screenshot of the resulting legend are in the attachements.

Could you please help me to understand what I do wrong?

1 vote
2k views

I want to be able to disable a chart if there is no data on it, and then enable the chart when there is data. The reason why I want to do that is because I have three charts that are sync and I want to disable the other charts that have no data, so that the cursor modifier or the zooming and stuff will not affect the other charts without data and will only affect the one with data.

Attached image is 3 charts that are in sync.

  • Nung Khual asked 8 months ago
  • last active 8 months ago
0 votes
0 answers
10k views

Several legends are displayed using LegendModifier.

  1. Using ScrollViewer.VerticalScrollBarVisibility=”Auto”, it was possible to move using mouse scrolling, bar grabbing, etc., but it did not work when the border was dragged in a screen touch environment. Is there a way to drag on a touch monitor?

  2. It is being displayed using Orientation=”Horizontal”, but there is a limit to displaying it on one line due to the large number of legends. What document can I refer to if I want to change it to display as multi-line? I think the MVVM method would be best.

  • Lee Ji Un asked 8 months ago
  • last active 8 months ago
1 vote
10k views

Hi everyone,

I am using SciChart trial in Angular and I find it so powerful
Thanks for developing this
However, I am having some troubles using it with plotting realtime stock data

From having searched around I found that it is recommended to use CategoryAxis for stock charts to avoid gaps on days without data
However, how do I append/update the data with new data coming in
XYDataSeries.append takes a number for the x-value

In the code below, assume “addNewData” is called every second
How do I properly add the new data with the new DateTime and also format it however i would like

Thanks for your help

  sciChartSurface.xAxes.add(new CategoryAxis(wasmContext));
  sciChartSurface.yAxes.add(new NumericAxis(wasmContext,{
    axisAlignment: EAxisAlignment.Left,
  }));

  addNewData(){
    const x = new Number(new Date()).toString()
    if(this.sciChartSurface){
      const series = this.sciChartSurface.renderableSeries.get(0);
      const dataSeries = <XyDataSeries> series.dataSeries;
      const x = dataSeries.count();
      const y = Math.random()
      dataSeries.append(x, y)
      this.sciChartSurface.zoomExtents()
    }
  }
0 votes
2k views

My code is as below

for (int i = 0; i < plot.ZData.Length; i++)
{
var xData = plot.XData[i];
var yData = plot.YData[i];
for (int j = 0; j < xData.Length; j++)
{
dataSeries[i, j] = yData[j];
}
}

Here Z values and X values are linear and Y values are in Logarthimic scale.
I have used Z and Y axis as NumericAxis3D and X is LogarithmicNumericAxis3D .

Is something wrong here? Please suggest.

1 vote
4k views

The format of the set DateTimeAxis x-axis is (“yyyy-MM-dd hh:mm:ss”), but when the chart is enlarged, if the range is short, it changes to (“hh:mm:ss”). I want to display year/month/day information as well, even if the range is short. Please answer with the MVVM model.

  • Lee Ji Un asked 8 months ago
  • last active 8 months ago
1 vote
5k views

Hello,

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

Thank you!

1 vote
0 answers
5k views

Hi,

We have a waterfall chart where we plot spectrums of XData length 2097153 and of multiple slices. It takes forever to plot this chart. Our application hangs. I tried multiple resampling algorithms as given in the link https://github.com/ABTSoftware/SciChart.Wpf.Examples/blob/SciChart_v6_Release/Sandbox/CustomerExamples/ResamplingOfGridDataSeries3D/ResamplingOfGridDataSeries3D.xaml.cs

But this changes the plot’s appearance completely which makes plot unusable.
Please can you suggest how I can plot this chart with decent performance.

Regards,
Deepashree

1 vote
10k views

Hi, so I need to get the data of an annotation when clicked, I have tried with addEventListener ‘mousedown’ event and it work for most case, but the issue comes when some annotations are overlapping.

codesandbox example: https://codesandbox.io/s/vertically-stacked-axes-forked-smkd8v?file=/src/App.tsx

In the codesandbox example, you will see that M1 and M2 are overlapping, if I were to click on M2, the click event will return both M1 and M2, but I only want M2 to be return since I only click on M2.

I couldn’t make the clicking to work on codesandbox but I’m sure you get the idea. I have tested it on my local and I got that issue.

Please let me know if you got any other question, thank you.

  • Nung Khual asked 8 months ago
  • last active 8 months ago
1 vote
2k views

Error from chart in div instrument_candle_chart_2
RuntimeError: call_indirect to a signature that does not match (evaluating ‘invoker(fn, thisWired, arg0Wired, arg1Wired, arg2Wired, arg3Wired, arg4Wired, arg5Wired, arg6Wired, arg7Wired, arg8Wired)

error here: OhlcSeriesDrawingProvider.prototype.draw:

this.nativeDrawingProvider.DrawPointsVec(nativeContext, xDrawValues, openValues, highValues, lowValues, closeValues, renderPassData.xCoordinateCalculator.nativeCalculator, renderPassData.yCoordinateCalculator.nativeCalculator, this.args);

1 vote
5k views

Hi,

I want to add a heatmap control (vertical bar) Image attached. This bar should display the energy levels of the waterfall. Basically how the Y axis varies as per the color. How can I achieve this?

1 vote
0 answers
10k views

(Edited to add code blocks)
I am trying to draw 4 series simultaneously on a chart. I have 2 Scatter plot series, a FastLineRenderableSeries (Which I’ll call the trendline) and I have a FastErrorBarsRenderableSeries which I’ll call the uncertainty. The scatter plots always draw.

When I draw the scatter plots and the trendline, everything looks right. As soon as I add any points to the HlcDataSeries in the uncertainty, though, the trendline disappears, and the error bars won’t draw. It’s very strange.
Below is my xaml and code (edited for clarity).


   void SetData(int channels, MyDataSet incomingData){
        var n = incomingData.Count;
        var unc = new List<Point>(n); //Point has x y coords and uncertainty
        double[] xValues = new double[n], yValues = new double[n];
        for (int i = 0; i < n; i++)
        {
            var x = incomingData[i].X.Value; //Incoming data has x y coords 
                                                                  //with uncertainties in each direction
            var y = incomingData[i].Y.Value;
            xValues[i] = x;
            yValues[i] = y;
            var yVal = incomingData[i].Y;
            if (yVal is not { Uncertainty: not null and not 0 }) continue;
            unc.Add(incomingData[i]);
        }
        if (xValues.Any())
            PointData = new XyDataSeries<double>(xValues, yValues);
        var xList = new double[channels];
        var yList = new double[channels];
    if (incomingData.CalibrationCoefficients == null)
    {
            incomingData.Fit(); //Generate coefficients
    }
    for (var i = 0; i < channels; i++)
    {
          xList[i] = i;
          yList[i] = incomingData.GetY(i); //Apply Coefficients
     }
    LineData = new XyDataSeries<double>(xList, yList);
    unc.Add(new Point(1, 0, 100, 50)); //x, x uncertainty, y, y uncertainty
    unc.Add(new Point(10, 0, 100, 50));//Adding bogus data to ensure uncertainty
    unc.Add(new Point(100, 0, 1000, 50));
    unc.Add(new Point(1000, 0, 500, 50));
    unc.Add(new Point(5000, 0, 250, 50));
    if (unc.Any())
    {
        UncertaintyData = new HlcDataSeries<double, double>();
        var hlc = (HlcDataSeries<double, double>)UncertaintyData;
        foreach (var t in unc)
        {
            var uncertainty = Math.Abs(t.Y.Uncertainty);
            var y = t.Y.Value;
            hlc.Append(t.X.Value, y,
                y- uncertainty,
                y+ uncertainty);
        }
    }

}

And my Xaml:


 <s:SciChartSurface MinWidth="200" MinHeight="200" 
                                   Name="ChartSurface" Padding="0"  
                                   Style="{Binding CurrentChartStyle}" >
            <s:SciChartSurface.RenderableSeries>
 <!-- Scatter plots omitted for brevity -->
                <s:FastErrorBarsRenderableSeries DataSeries="{Binding UncertaintyData}" 
                                                 ErrorDirection="YAxis"
                                                 Stroke="Blue"
                                                 StrokeThickness="2"
                                                 LastErrorBarWidth="7"
                                                 DataPointWidthMode="Absolute"
                                                 /> 

                <s:FastLineRenderableSeries x:Name="LineSeries" AntiAliasing="True" Stroke="Gray"
 DataSeries="{Binding LineData}" StrokeThickness="2"/>
            </s:SciChartSurface.RenderableSeries>
 <!-- Axes omitted for brevity --> 
        </s:SciChartSurface>
1 vote
6k views

Hi,

I want to change the grid distance between the two slices dynamically in both X , Y and Z direction. But whatever the value I set for StepZ and StepX, nothing changes in the output. I still see the same graph.

Please can you suggest if there is any way to achieve this.

I am attaching the code of waterfall example here.

1 vote
2k views

As if right now, I have create a custom annotation, which is a red circle and the idea is to show some info when hovering on it, like a tooltip.

Right now, when hovering on the red circle, I am adding another custom annotation to show the info and then removing it when not hovering anymore. The issue with this is that it is not very stable, as in if I don’t point my cursor right in the middle of the red circle, it won’t register as hit. I tried putting hitTestRadius to 50 on CursorModifier, but doesn’t seem to make any difference.

I have also try with xyScatterRenderableSeries and EllipsePointMarker, the issue I find with it is that it is interfering with my data series tooltip, as the cursor modifier recognize it as a chart series and try to show on the tooltip, which I don’t want. I only want the red circle to be trigger only when cursor is right on it.

The first image is my code and how I am trying to achieve it at the moment, it does work, but I don’t think it’s very stable, I wish there is a more natural way to do it.

The second image is how my current solution looks like, as you can see, the data series tooltip is overlapping it, which I want to avoid. I can’t think of a way to solve the overlapping issue yet. Other than unstableness and the tooltip overlapping, it work fine.

The third image is how I want it to look like.

  • Nung Khual asked 8 months ago
  • last active 8 months ago
Showing 151 - 200 of 4k results