Pre loader

Tag: Export to PNG

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

Such as title

  • Josk Zhou asked 2 years ago
  • last active 1 year ago
0 votes
8k views

Hello SciChart team,

How do I serialize custom tick placement and labels, generated by TickProviderAPI and LabelProvider? Actually, the main problem is that I need to export high quality (i.e. higher than actual figure size on screen) PNG images in MVVM application and method ExportToFile(fileName, ExportType.Png, false, new Size(…, …)) produces axis ticks and labels as if they were controled by original MinorDelta and MajorDelta parameters. ExportToFile() without size parameter produces output correctly, so that must be due to not-serialized TickProvider and LabeProvider properties (?), which in exported serialized surface string does not exist.

Thank you!

1 vote
8k views

Hi all,

I am trying to save a copy of my chart in form of a “Png” image. However I keep getting the following exception:

“Element already has a logical parent. It must be detached from the old parent before it is attached to a new one”

I was wondering if anyone could help me passing through this.

Here is what I do:

I have a main chart surface in my program of which properties are bound to my ViewModel. For instance, as can be seen from the snippet below, my SciChartSurface’s YAxes is bound to an AxisCollection that resides in my ViewModel. Same thing is done for the RenderableSeries, Annotations, ChartModifierGroup, ChartVisibility and the XAxis properties of my Chart Surface:

<sci:SciChartSurface Grid.Row="1" Grid.Column="0"  
                         RenderableSeries="{Binding SciChartSeriesViewModels}"    
                         Padding="0,8,0,2"                                         
                         sci:ThemeManager.Theme="BrightSpark"                                       
                         YAxes="{Binding SciChartYAxesCollection, Mode=TwoWay}"                                         
                         AutoRangeOnStartup="True"                                       
                         Annotations="{Binding ChartAnnotations}"                                     
                         x:Name="ApplicationSciChart"                                       
                         ChartModifier ="{Binding ChartModifierGroup}"
                         BorderBrush="LightSlateGray"
                         BorderThickness="1"
                         Visibility="{Binding ChartVisibility}"
                         XAxis="{Binding SciChartXAxis}">
    </sci:SciChartSurface>

Now, In order to save a copy of my chart into a “Png” file, I created a new SciChartsurface in my Viewmodel. This newly created chart is desired to be rendered in the memory so I can save it as an Image (Very similar to what is instructed in: Screenshots, Printing and Export to XPS Traingin module. Somewhere in my ViewModel, after I generated all the required data for creating my chart, I call a function to form a new SciChart (rendered in memory) and perform the saving action:

private void SaveChart()
    {
        SciChartSurface AppSciChart = new SciChartSurface()
        {
            RenderableSeries = SciChartSeriesViewModels,
            XAxis = new TimeSpanAxis(),
            YAxes = SciChartYAxesCollection,
            ChartTitle = "Rendered in memory",
            Annotations = ChartAnnotations
        };

        var parent = AppSciChart.Parent;
        AppSciChart.Width = 1920;
        AppSciChart.Height = 1080;

         ThemeManager.SetTheme(AppSciChart, "BrightSpark");
         AppSciChart.ExportToFile("C:\\Chart.png",SciChart.Core.ExportType.Png, false);

    }

The RenderableSeries, YAxis and Annotations of the Chart Surface in the above code (AppSciChart) are the same as the ones I used for my main chart in my XAML code (First Snippet above).

My main chart surface in my application shows up fine, and performs what it is supposed to, but as soon as the SaveChart() is called, the program stops with an Unhandled Exception: System.InvalidOperationException: ‘Element already has a logical parent. It must be detached from the old parent before it is attached to a new one.’

I was wondering if anybody could let me know what I am possibly missing here!

Many thanks!

1 vote
2k views

Hello,

I try to add some TextAnnotation to my Surface by creating some TextAnnotationViewModel in my C# code and export the chart to PNG with non-default size. If I do it right when the MainWindow is loaded , I have no problem exporting the chart and I can see the annotation on the PNG:

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        this.Loaded += OnLoaded;
    }

    private void OnLoaded(object sender, RoutedEventArgs routedEventArgs)
    {
        var annotationViewModel = new TextAnnotationViewModel
        {
            CoordinateMode = AnnotationCoordinateMode.Relative,
            X1 = 0.3,
            X2 = 0.7,
            Y1 = 0,
            Y2 = 0.1,
            Text = "Test"
        };

        var annotationViewModels = new List<IAnnotationViewModel> { annotationViewModel };

        annotationViewModels.Add(annotationViewModel);
        var annotationsSourceCollection = new AnnotationsSourceCollection(annotationViewModels);

        sciChartSurface.Annotations = new AnnotationCollection(annotationsSourceCollection);

        var filePath = "{somePath}";
        sciChartSurface.ExportToFile(filePath, ExportType.Png, false, new System.Windows.Size(sciChartSurface.RenderSize.Width * 4,
            sciChartSurface.RenderSize.Height * 4));
    }
}

But if I try to trigger the sciChartSurface.ExportToFile with a Button (well after Loaded), it doesn’t work anymore and he gives me the following exception:

System.Exception: ‘An error occurred when using serialization to clone a chart for export to file. Please check the inner exception for details.’
Inner exception : FormatException: Input string was not in a correct format.

I know it comes from the annotation because if I remove it, the export works again.
Then I have tried reinitializing the sciChartSurface.Annotations just before exporting and by doing that, the export works again :

public partial class MainWindow : Window
{
    private List<IAnnotationViewModel> annotationViewModels = new List<IAnnotationViewModel>();
    public MainWindow()
    {
        InitializeComponent();
        this.Loaded += OnLoaded;
    }

    private void OnLoaded(object sender, RoutedEventArgs routedEventArgs)
    {
        var annotationViewModel = new TextAnnotationViewModel
        {
            CoordinateMode = AnnotationCoordinateMode.Relative,
            X1 = 0.3,
            X2 = 0.7,
            Y1 = 0,
            Y2 = 0.1,
            Text = "Test"
        };

        annotationViewModels.Add(annotationViewModel);
        var annotationsSourceCollection = new AnnotationsSourceCollection(annotationViewModels);

        sciChartSurface.Annotations = new AnnotationCollection(annotationsSourceCollection);
    }


    private void OnClick(object sender, RoutedEventArgs e)
    {
        // I added this:
        var annotationsSourceCollection = new AnnotationsSourceCollection(annotationViewModels);
        sciChartSurface.Annotations = new AnnotationCollection(annotationsSourceCollection);

        var filePath = "{somePath}";
        sciChartSurface.ExportToFile(filePath, ExportType.Png, false, new System.Windows.Size(sciChartSurface.RenderSize.Width * 4,
            sciChartSurface.RenderSize.Height * 4));
    }
}

What is going on here ?

Thank you in advance for your help.

0 votes
4k views

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

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.

Showing 6 results

Try SciChart Today

Start a trial and discover why we are the choice
of demanding developers worldwide

Start TrialCase Studies