Search code examples
c#xamarinchartsxamarin.mac

Plotting a simple graph (x against y) using MicroCharts for Xamarin Mac


I am trying to plot a simple line plot, where I have a struct that contains two lists (one to be the x axis and the other to be the y axis). So far, I learned that in order to draw a microchart you need to do it in the form of Chart Entries. For some reason, there seems to be none of the basic plotting operations such as scaling, legends, etc. Here is my code:

 // this is where i define my struct
 public struct aPoint2
    {
        public double wavelength;
        public double intensity;
    }

 // this is a method that populates the struct lists 
 public aPoint2[] getSpectrum(string fName, CGRect theROI, CGPoint[] pts = null)
    { 
      ...
     }


 // I then draw the chart in my ViewDidLoad()
 public override void ViewDidLoad()
    {
        base.ViewDidLoad();

        aPoint2[] data = getSpectrum(hsiFile, ROI);

        var entries = new List<ChartEntry>();

        for (int i = 0; i < headerInfo1.wavelengths.ToArray().Length; i++) {
            var color = "#5E5CE6FF";
       
            int label = (int)data[i].wavelength;
            int valuelabel = (int)data[i].intensity;
            entries.Add(new ChartEntry((int)data[i].intensity)
                {
                    Label = label.ToString(),
                    ValueLabel = valuelabel.ToString(),
                    Color = SKColor.Parse(color),
                    ValueLabelColor = SKColor.Parse("#FFFFFFFF"),
                    TextColor = SKColor.Parse("#FFFFFFFF"),

                });
        }

        var chart = new LineChart {
            Entries = entries,
            PointMode = PointMode.None,
            BackgroundColor = SKColor.Empty,                
        };

        var chartView = new ChartView
        {
            Frame = View.Bounds,
            AutoresizingMask = NSViewResizingMask.WidthSizable | NSViewResizingMask.HeightSizable,
            Chart = chart,
        };

        View.AddSubview(chartView);


    }

In case it is not clear, I am trying to plot intensity against wavelength. The problem here is that I cannot scale the axes nor have the y axis be on the left instead of on top. I tried scaling them manually by only adding the label for every 50th index, which worked, but it seems like a hack and not very elegant. It also seems that because the elements are read as strings, they are not ordered. Here is how my graph looks like after I scaled it.

Instensity vs Wavelength chart

Notice how the intensities are not sorted and the graph just doesn't make a lot of sense.

I figured that maybe MicroCharts isn't the correct charting tool that I should be using, but it is the only thing I could find to be supported by Xamarin.Mac.

Please let me know if there is a way to achieve what I want using MicroCharts, or if there is another tool I should be using.

P.S: I tried using OxyPlot and SfCharts but both of them do not have support for Xamarin.Mac (only Xamarin.Forms/Android/ios/WPF)


Solution

  • I abandoned MicroCharts as I found that it only offers limited functionality. Instead, I used the pre-release version for OxyPlot Xamarin.Mac. It comes with a huge list of dependencies, however it did exactly what I hoped it would do.

    https://github.com/oxyplot/documentation-examples/blob/master/HelloWorld/MacApplication1/MacApplication1/MainWindowController.cs