Hi there;

I've just found this excellent looking library and have looked at the examples, but don't see anything that matches what I'd like to do:

I need to do a plot of thousands of x,y coordinates, each as a stand alone point with a custom color per pixel. The colors will range over 1000's of colors as well (possibly a custom color for each individual pixel)

What type of plot and marker type would I use to do this?

I saw the custom marker types example, but that only seems to allow one custom market type per series. I also took a look at the mouse move examples, and they got that to work by creating a custom series for each mouse movement, which isn't really what I want (way too many series). My data comes in batches, and will probably be in ~10 batches, and each batch will be a custom series, I expect.

Thanks,

Brad

I don't think it's possible right now. As you said you can create a new ScatterSeries/LineSeries for each group of points with the same color.

If you can use the MatrixSeries provided in the examples you can change it partially:

   if (this.image == null)
            {
                var pixels = new OxyColor[m, n];
                for (int i = 0; i < m; i++)
                {
                    for (int j = 0; j < n; j++)
                    {

                        var c = MyColorSelectionMethod(Matrix[m-1-i, j]);
                               

                        pixels[i, j] = Math.Abs(this.Matrix[m - 1 - i, j]) <= this.ZeroTolerance ? OxyColors.Transparent : c;
                        //pixels[i, j] = Math.Abs(this.Matrix[m - 1 - i, j]) <= this.ZeroTolerance ? OxyColors.Transparent : this.NotZeroColor;
                    }
                }

                this.image = OxyImage.PngFromArgb(pixels);
            }

And the custom method could be:

        public static OxyColor MyColorSelectionMethod(double num)
        {
            OxyColor color = new OxyColor();
            IList<OxyColor> listColors = new List<OxyColor>();
            OxyColor c;
            for (double i = 0; i < 1; i += 0.02)
            {
                c = OxyColor.FromHsv(i, 0.8, 0.8);
                listColors.Add(c);
            }

            if (num > 0.7)
            {
                color = listColors[Convert.ToInt32(num * 49)];
            }
            else
            {
                color = listColors[Convert.ToInt32(num * 49)].ChangeAlpha((byte)(100*num));

            }

            return color;
        }

This method assigns a color from gradient depending on the value of "num". Note that in this example I've set its maximum value to 1.

Result:

Hmmm... interesting! thanks for the code and suggestions.... I'll take a look and see what I can make of it.... thanks for your help!

I want to rubberband a line series as we rubberband a polyline in any CAD application.

I have written an example for the same.

[Example("LineSeries rubberbanding")]
        public static PlotModel MouseRubberbandingEvent()
        {
          var model = new PlotModel("Rubberbanding",
                                    "Left click to add line and press Esc to end.")
                        {
                                LegendSymbolLength = 40
                        };

          // Add a line series
          var s1 = new LineSeries("LineSeries1")
                     {
                             Color = OxyColors.SkyBlue,
                             MarkerType = MarkerType.Circle,
                             MarkerSize = 6,
                             MarkerStroke = OxyColors.White,
                             MarkerFill = OxyColors.SkyBlue,
                             MarkerStrokeThickness = 1.5
                     };

          model.Series.Add(s1);

          s1.Points.Add(new DataPoint(10,
                                      10));
          IDataPoint tempDataPoint = new DataPoint(0,0);
               s1.Points.Add(tempDataPoint);

               // Remember to refresh/invalidate of the plot
               model.RefreshPlot(false);
          bool isRubberbanding = false;

          // Subscribe to the mouse down event on the line series
          model.MouseDown += (s, e) =>
          {
            // only handle the left mouse button (right button can still be used to pan)
            if (e.ChangedButton == OxyMouseButton.Left)
            {
                s1.Points.Add(s1.InverseTransform(e.Position));
                isRubberbanding = true;
                // Remember to refresh/invalidate of the plot
                model.RefreshPlot(false);
                // Set the event arguments to handled - no other handlers will be called.
                e.Handled = true;
              
            }
          };

          // Subscribe to the mouse down event on the line series
          s1.MouseDown += (s, e) =>
          {
            // only handle the left mouse button (right button can still be used to pan)
            if (
                (e.ChangedButton == OxyMouseButton.Left)
                &&
                (isRubberbanding)
               )
            {
              s1.Points.Add(s1.InverseTransform(e.Position));
              isRubberbanding = true;
              // Remember to refresh/invalidate of the plot
              model.RefreshPlot(false);
              // Set the event arguments to handled - no other handlers will be called.
              e.Handled = true;

            }
          };

          model.MouseMove += (s, e) =>
          {
            if (isRubberbanding)
            {
              var point = s1.InverseTransform(new ScreenPoint(e.Position.X-8,
                                                              e.Position.Y-8));
              tempDataPoint.X = point.X;
              tempDataPoint.Y = point.Y;
              s1.Points.Remove(tempDataPoint);
              s1.Points.Add(tempDataPoint);
              model.RefreshPlot(false);
            }
          };

          model.MouseUp += (s, e) =>
          {
            if (isRubberbanding)
            {
              s1.LineStyle = LineStyle.Solid;
              model.RefreshPlot(false);
              e.Handled = true;
            }

          };

          

          return model;
        }

It works fine when I offset the mouse cursor by 8 pixel. But when I don't do that the mouse down event doesn't fire up neither for plot model nor for line series.

Please suggest why mouse down is not fires while rubber banding.

Also how can i get the ESC key to end the rubberbanding.

Trying to bind a data source in MVVM and confused on why the data does not seem to be binding.

<oxy:Plot Grid.Row="0" x:Name="BalancesByPeriodChart"
                  LegendPlacement="Outside"
                  LegendPosition="BottomCenter"
                  LegendOrientation="Horizontal"
                  LegendSymbolLength="30"
                  LegendBorder="#000000"
                  LegendBorderThickness="1"
                  LegendFontSize="14"
                  PlotMargins="54,10,10,50"
                  HorizontalContentAlignment="Stretch"
                  VerticalContentAlignment="Stretch"            
                  KeyboardPanHorizontalStep="-0.1"
                  KeyboardPanVerticalStep="-0.1"
                  Model="{Binding ChartViewModel}"
                  Tag="{Binding RelativeSource={RelativeSource AncestorType={x:Type oxy:Plot}}, Path=Model}"
                  >

            <oxy:Plot.ContextMenu>
                <ContextMenu ItemsSource="{Binding Path=PlacementTarget.Tag, RelativeSource={RelativeSource Self} }">
                    <MenuItem Command="{Binding Plot.HideGraph1}" Header="Foo" 
                              IsCheckable="True" IsChecked="True"/>
                    <MenuItem Command="{Binding Plot.HideGraph2}" Header="Foo2" 
                              IsCheckable="True" IsChecked="True"/>
                </ContextMenu>
            </oxy:Plot.ContextMenu>

With this code I am trying to make a context menu so I can eventually set the visibility of two different graphs to hidden. The context menu shows up but when I click on either option, the command in the modelview is not triggered. Any help with this problem is greatly appreciated.

Are you sure that you are binding correctly?

Plot.HideGraph2

This seems weird for me, where the command is located? Is the datacontext set correctly? First try simple operation when you're starting to wiring the commands, try if your commands are working with a MessegeBox. If your bindings are okey: a common mistake is to forget to update the plot. Show the actual code in your command so we can help you.

I am trying to make a simple messagebox appear for my command. I am pretty sure that my bindings are incorrect, and that is what I need help with. The binding of a context menu is confusing to me. So helping with the binding would be great.

I don't know why the binding isn't working. If you really need to perform a command in your bound ViewModel you can do the following:

Create a new static class Mediator:

 static public class Mediator
    {
        static IDictionary<string, List<Action<object>>> pl_dict = new Dictionary<string, List<Action<object>>>();

        static public void Register(string token, Action<object> callback)
        {
            if (!pl_dict.ContainsKey(token))
            {
                var list = new List<Action<object>>();
                list.Add(callback);
                pl_dict.Add(token, list);
            }
            else
            {
                bool found = false;
                foreach (var item in pl_dict[token])
                    if (item.Method.ToString() == callback.Method.ToString())
                        found = true;
                if (!found)
                    pl_dict[token].Add(callback);
            }
        }

        static public void Unregister(string token, Action<object> callback)
        {
            if (pl_dict.ContainsKey(token))
                pl_dict[token].Remove(callback);
        }

        static public void NotifyColleagues(string token, object args)
        {
            if (pl_dict.ContainsKey(token))
                foreach (var callback in pl_dict[token])
                    callback(args);
        }
}

In your MenuItem set the click event:

                    <MenuItem Header="Mediator!" Click="MenuItem_Click_1" />

Code behind notify the message:

        private void MenuItem_Click_1(object sender, RoutedEventArgs e)
        {
            Mediator.NotifyColleagues("menu1", null);
        }

Don't forget to register to listen the message in your ViewModel constructor:

            Mediator.Register("menu1", yourMethod);

        void yourMethod(object param)
        {
            MessageBox.Show("Hey!");
            myLineSeries.IsVisible = !myLineSeries.IsVisible;
        }

Done!

If would be nice if someone could tell us if he can achieve the binding to command in the context menu.

Can not use the code behind, so I have to do all the binding in the xaml. This makes the task a little more difficult. Also, I have been trying different bindings and nothing seems to be working for me. So I am open to suggestions, that do not use code behind.

Then bind the command to a button, that will work.

I tried to use a {Binding PresentationTraceSources.TraceLevel=High} and it seems the data context is not passed to the context menu. I don't know why..
I added this.ContextMenu.DataContext = this.DataContext; to the Plot control, just before it shows the context menu.
I am not sure if this is an ok way to solve it, but it seems to work.

My problem is that I am using the MVVM model, and I do not have any code behind, so the view is only xaml. Which does not allow me to connect directly to the plot or anything in it. So is there a way to do the same thing in the xaml that you suggested in the code behind.

Hi

I have started using OxyPlot for a simple graph, but I have a problem regarding setting the background color. It apparently doesn't seem to work ?
The plotAreaBackground is changed correctly.
Even setting it to red, it continues to be white. What I have done is the below:

            plotModel = new PlotModel();
            plotModel.PlotAreaBackground = BackgroundBaseColor.ToOxyColor();
            plotModel.Background = OxyColors.Red;
            DateTimeAxis dateTimeAxis = new DateTimeAxis(AxisPosition.Bottom, "Date", CultureInfo.CurrentCulture.DateTimeFormat.ShortDatePattern);
            dateTimeAxis.Maximum = DateTimeAxis.ToDouble(DateTime.Today);
            plotModel.Axes.Add(dateTimeAxis);
            
            OxyPlot.MinWidth = ActualWidth;         
            OxyPlot.MaxHeight = ActualHeight;           
            OxyPlot.Model = plotModel;          
            ContainerPanel.Children.Add(OxyPlot);   

I have tried having ContainerPanel both as a stackpanel and grid...

Hope somebody can help.

Thanks, I see the background of the WPF control was not set by the Background property of the PlotModel. Should be fixed in build 257.

Hi,

Is there a way to render annotations as fast as the tracker gets rendererd? I need annotations to move through the plot with the mouse and as soon as I get a lot of data (around 5k points) it really starts to lag.

I call refreshPlot(false) because I thought its not updating the data then. Is there a better way to do that?

Kind regards

I think you need to write a custom tracker control to do this with max performance! Then you can update the graphics of the tracker without changing the graphics of the plot.

Hi all, I would not have a border at the top and right side of my graphics.

But it seems that this is not possible because the PlotAreaBorderThickness PlotView property is a double, not a Thickness. (currently PlotAreaBorderThickness = "1")

Should be able to write
PlotAreaBorderThickness = "1,0,0,1" like BorderThickness = "1,0,0,1"

Thank.

I found the solution:

var model = new PlotModel()
{
    PlotAreaBorderThickness = 0, 
};

var lineAxis = new LinearAxis()
{
      AxislineStyle = LineStyle.Solid
 };
model.Axes.Add(lineAxis);

....Other axes with AxislineStyle = LineStyle.Solid

model.Axes.Add(dateTimeAxis);

This should be covered by http://oxyplot.codeplex.com/workitem/10006
I agree it is a good idea! But I am not sure who should have the responsibility of drawing those lines - the axes or the plot...

This should be fixed now.
I am sorry about breaking the build for those who have used PlotAreaBorderThickness, but it should be very easy to correct. Simply replace the double value by new OxyThickness(x).

Great, thank you! it's true that it's normal that the PlotAreaBorderThickness property that must manage the plot borders and not axes responsibility.

  PlotAreaBorderThickness = new OxyThickness() { Bottom = 1, Left = 1, Right = 0, Top = 0}
now it works, thank you again.