Export Graphic using InteractiveDataDisplay.WPF

Question

I'm using a InteractiveDataDisplay.WPF component to generate a graphic and everything going well, but when I try to export graphic to an image the Series does not export properly with the graphic.

Follow my code and the images:

<Grid Name="LayoutRoot" Background="White">
    <Grid Name="Grafico">
        <d3:Chart Name="plotter">
            <Grid Name="lines"/>
        </d3:Chart>
    </Grid>
</Grid>

---

public MainWindow()
    {
        InitializeComponent();

        double[] x = new double[200];
        for (int i = 0; i < x.Length; i++)
            x[i] = 3.1415 * i / (x.Length - 1);

        for (int i = 0; i < 25; i++)
        {
            var lg = new LineGraph();
            lines.Children.Add(lg);
            lg.Stroke = new SolidColorBrush(Color.FromArgb(255, 0, (byte)(i * 10), 0));
            lg.Description = String.Format("Data series {0}", i + 1);
            lg.StrokeThickness = 2;
            lg.Plot(x, x.Select(v => Math.Sin(v + i / 10.0)).ToArray());
        }

        int width = 800;
        int heigth = 600;

        Chart Bmain_Chart = new Chart();
        Bmain_Chart.Measure(new Size(width, heigth));
        Bmain_Chart.Arrange(new Rect(new Size(width, heigth)));
        Bmain_Chart.LeftTitle = "Bmain";
        Bmain_Chart.BottomTitle = "Time";
        Bmain_Chart.Content = lines;
        Bmain_Chart.UpdateLayout();

        RenderTargetBitmap bmp = new RenderTargetBitmap(width, heigth, 96, 96, PixelFormats.Pbgra32);
        bmp.Render(Bmain_Chart);

        var encoder = new PngBitmapEncoder();
        encoder.Frames.Add(BitmapFrame.Create(bmp));

        using (Stream stm = File.Create(@"c:\MyCustomPath\test.png")) { encoder.Save(stm); }
    }

Correct Graphic

Exported Graphic

If anyone can help me I will be eternally grateful.

Answer 1

In the current version of IDD a lot of IDD components relies on the "OnLoaded" event. So, you need to place a chart somethere in a window to properly initialize it.

There is a workaround for this problem.

You should render to bmp after idd components loading. So, the next code works fine:

public partial class MainWindow : Window
{
    protected override void OnContentRendered(EventArgs e)
    {

        double width = 800;
        double heigth = 600;

        RenderTargetBitmap bmp = new RenderTargetBitmap((int)width, (int)heigth, 96, 96, PixelFormats.Pbgra32);
        bmp.Render(plotter);

        var encoder = new PngBitmapEncoder();
        encoder.Frames.Add(BitmapFrame.Create(bmp));

        using (Stream stm = File.Create(@"c:\MyCustomPath\test.png")) { encoder.Save(stm); }
    }

    public MainWindow()
    {
        InitializeComponent();

        double[] x = new double[200];
        for (int i = 0; i < x.Length; i++)
            x[i] = 3.1415 * i / (x.Length - 1);

        for (int i = 0; i < 25; i++)
        {
            var lg = new LineGraph();
            lines.Children.Add(lg);
            lg.Stroke = new SolidColorBrush(Color.FromArgb(255, 0, (byte)(i * 10), 0));
            lg.Description = String.Format("Data series {0}", i + 1);
            lg.StrokeThickness = 2;
            lg.Plot(x, x.Select(v => Math.Sin(v + i / 10.0)).ToArray());
        }
    }
}

If you really need not to show your components to user you can add this.Hide(); to the constructor of the window. Otherwise you may add rendering code to a some button OnClick handler.