Inserting a bitmap into axes

Jul 24, 2013 at 12:37 PM
I need to be able to use oxyplot axes, but insert a bitmap that I have already drawn into the graph rather than any other series. This is because the oxyplot axes work perfectly but without drawing the bitmap myself, I would be trying to plot over 20 million points and its too much for this library to handle satisfactorily for me.

Is there anyway I can achieve this? The bitmap would be drawn to the correct scale etc, so would just need to be placed at 0,0 on the graph and sized to the size of the plot and all should be correct.
Jul 24, 2013 at 1:02 PM
Have you tried with the image annotation ? It sounds to fit with your problem.
Jul 24, 2013 at 1:59 PM
I haven't. Any pointers? Is there an example?
Jul 24, 2013 at 2:55 PM
Edited Jul 24, 2013 at 2:56 PM
There is an official example here : http://www.oxyplot.org/examplebrowser (in the annotation category).


Here is the source code (from oxyplot) :
[Example("ImageAnnotations")]
        public static PlotModel ImageAnnotations()
        {
            var model = new PlotModel("ImageAnnotations") { PlotMargins = new OxyThickness(60, 4, 4, 60) };
            model.Axes.Add(new LinearAxis(AxisPosition.Bottom));
            model.Axes.Add(new LinearAxis(AxisPosition.Left));

            OxyImage image;
            var assembly = Assembly.GetExecutingAssembly();
            using (var stream = assembly.GetManifestResourceStream("ExampleLibrary.Resources.OxyPlot.png"))
            {
                image = new OxyImage(stream);
            }

            // Centered in plot area, filling width
            model.Annotations.Add(new ImageAnnotation
            {
                ImageSource = image,
                Opacity = 0.2,
                Interpolate = false,
                X = new PlotLength(0.5, PlotLengthUnit.RelativeToPlotArea),
                Y = new PlotLength(0.5, PlotLengthUnit.RelativeToPlotArea),
                Width = new PlotLength(1, PlotLengthUnit.RelativeToPlotArea),
                HorizontalAlignment = HorizontalAlignment.Center,
                VerticalAlignment = VerticalAlignment.Middle
            });

            // Relative to plot area, inside top/right corner, 120pt wide
            model.Annotations.Add(new ImageAnnotation
            {
                ImageSource = image,
                X = new PlotLength(1, PlotLengthUnit.RelativeToPlotArea),
                Y = new PlotLength(0, PlotLengthUnit.RelativeToPlotArea),
                Width = new PlotLength(120, PlotLengthUnit.ScreenUnits),
                HorizontalAlignment = HorizontalAlignment.Right,
                VerticalAlignment = VerticalAlignment.Top
            });

            // Relative to plot area, above top/left corner, 20pt high
            model.Annotations.Add(new ImageAnnotation
            {
                ImageSource = image,
                X = new PlotLength(0, PlotLengthUnit.RelativeToPlotArea),
                Y = new PlotLength(0, PlotLengthUnit.RelativeToPlotArea),
                OffsetY = new PlotLength(-5, PlotLengthUnit.ScreenUnits),
                Height = new PlotLength(20, PlotLengthUnit.ScreenUnits),
                HorizontalAlignment = HorizontalAlignment.Left,
                VerticalAlignment = VerticalAlignment.Bottom
            });

            // At the point (50,50), 200pt wide
            model.Annotations.Add(new ImageAnnotation
            {
                ImageSource = image,
                X = new PlotLength(50, PlotLengthUnit.Data),
                Y = new PlotLength(50, PlotLengthUnit.Data),
                Width = new PlotLength(200, PlotLengthUnit.ScreenUnits),
                HorizontalAlignment = HorizontalAlignment.Left,
                VerticalAlignment = VerticalAlignment.Top
            });

            // At the point (50,20), 50 x units wide
            model.Annotations.Add(new ImageAnnotation
            {
                ImageSource = image,
                X = new PlotLength(50, PlotLengthUnit.Data),
                Y = new PlotLength(20, PlotLengthUnit.Data),
                Width = new PlotLength(50, PlotLengthUnit.Data),
                HorizontalAlignment = HorizontalAlignment.Center,
                VerticalAlignment = VerticalAlignment.Top
            });

            // Relative to the viewport, centered at the bottom, with offset (could also use bottom vertical alignment)
            model.Annotations.Add(new ImageAnnotation
            {
                ImageSource = image,
                X = new PlotLength(0.5, PlotLengthUnit.RelativeToViewport),
                Y = new PlotLength(1, PlotLengthUnit.RelativeToViewport),
                OffsetY = new PlotLength(-35, PlotLengthUnit.ScreenUnits),
                Height = new PlotLength(30, PlotLengthUnit.ScreenUnits),
                HorizontalAlignment = HorizontalAlignment.Center,
                VerticalAlignment = VerticalAlignment.Top
            });

            // Changing opacity
            for (int y = 0; y < 10; y++)
            {
                model.Annotations.Add(
                    new ImageAnnotation
                        {
                            ImageSource = image,
                            Opacity = (y + 1) / 10.0,
                            X = new PlotLength(10, PlotLengthUnit.Data),
                            Y = new PlotLength(y * 2, PlotLengthUnit.Data),
                            Width = new PlotLength(100, PlotLengthUnit.ScreenUnits),
                            HorizontalAlignment = HorizontalAlignment.Center,
                            VerticalAlignment = VerticalAlignment.Bottom
                        });
            }

            return model;
        }
I think in your case, it's the image annotation bind to a point that will be usefull.
Jul 24, 2013 at 3:33 PM
Thanks very much, this is definitely what I was looking for.

How do I get load a locally saved image (bitmap) into the OxyImage then?
Jul 25, 2013 at 7:14 AM
Use this code :
OxyImage image;
using (FileStream stream = new FileStream(PathOfYourImage, FileMode.Open))
{
          image = new OxyImage(stream);
 }
Jul 25, 2013 at 7:53 AM
Is It possible to use a System.Drawing.Bitmap?

Basically I draw my bitmap, and can save it as a file, but would be quicker if I just used the one stored in memory.
Bitmap b = makeBitmap(scatter);
Jul 25, 2013 at 10:32 AM
Well, i added a bitmapimage, but I cant make it zoom. which property am i missing?

thanks a lot
Jul 25, 2013 at 11:20 AM
Edited Jul 25, 2013 at 11:20 AM
willmoore88 wrote:
Is It possible to use a System.Drawing.Bitmap?

Basically I draw my bitmap, and can save it as a file, but would be quicker if I just used the one stored in memory.
Bitmap b = makeBitmap(scatter);
Save your bitmap in a stream and then use this stream to create your OxyImage
b.Save(Stream, ImageFormat);
image = new OxyImage(Stream);