Xamarin.iOS Documentation | ComponentOne
Controls / FlexChart / Features / Line Marker
In This Topic
    Line Marker
    In This Topic

    Line marker is a line that is drawn on chart plot and bound to some value on an axis. It may be used to show a trend or mark an important value on the chart. It displays the lines over the plot with an attached label. It is useful in scenarios, where a user has a lot of data in a line or area chart, or if a user wants to display data from multiple series in a single label. With built-in interactions, such as Drag and Move, a user can drag the line marker to select the data point on the chart more precisely.

    If you set the Interaction property to Drag, you need to set the DragContent and the DragLines property to specify whether the content and values linked with the line marker lines are draggable or not.

    To implement LineMarkers in the FlexChart, we use the following key properties.

    The image below shows how the FlexChart appears after adding a line marker.

    FlexChart LineMarker

    The following code example demonstrates how to add line marker. The example uses the sample created in the QuickStart section.

    C#
    Copy Code
    public override void ViewDidLoad() {
     base.ViewDidLoad();
      chart.ItemsSource = new LineMarkerViewModel().Items;
     // initialize series elements and set the binding to variables of
     // ChartPoint
     chart.ChartType = ChartType.Line;
     chart.BindingX = "Date";
     ChartSeries inputSeries = new ChartSeries();
     ChartSeries outputSeries = new ChartSeries();
     inputSeries.SeriesName = "Input";
     inputSeries.Binding = "Input";
     outputSeries.SeriesName = "Output";
     outputSeries.Binding = "Output";
     chart.Series.Add(inputSeries);
     chart.Series.Add(outputSeries);
    
     initMarker();
     chart.Layers.Add(lineMarker);
    }
    
    private void initMarker() {
     lineMarker = new C1LineMarker();
     lineMarker.DragContent = true;
     UIView view = new UIView(new CGRect(0, 0, 110, 70));
     xLabel = new UILabel(new CGRect(5, 5, 110, 20));
     view.Add(xLabel);
     view.BackgroundColor = UIColor.LightGray;
     for (int index = 0; index < chart.Series.Count; index++) {
      var series = chart.Series[index];
      var fill = ((IChart) chart).GetColor(index);
      UILabel yLabel = new UILabel(new CGRect(5, 25 + 20 * index, 110, 20));
      yLabels.Add(yLabel);
      view.Add(yLabel);
     }
     lineMarker.Content = view;
     lineMarker.PositionChanged += LineMarker_PositionChanged;
    }
    
    private void LineMarker_PositionChanged(object sender, PositionChangedArgs e) {
     if (chart != null) {
      var info = chart.HitTest(new CGPoint(e.Position.X, double.NaN));
      int pointIndex = info.PointIndex;
      xLabel.Text = string.Format("{0:MM-dd}", info.X);
    
      for (int index = 0; index < chart.Series.Count; index++) {
       var series = chart.Series[index];
       var value = series.GetValues(0)[pointIndex];
    
       var fill = (int)((IChart) chart).GetColor(index);
       string content = string.Format("{0} = {1}", series.SeriesName, string.Format("{0:f0}", value));
       UILabel yLabel = yLabels[index];
       yLabel.Text = content;
      }
     }
    }
    public class LineMarkerViewModel
       {
          const int Count = 300;
          Random rnd = new Random();
    
          public List<LineMarkerSampleDataItem> Items
          {
           get
           {
              List<LineMarkerSampleDataItem> items = new List<LineMarkerSampleDataItem>();
              DateTime date = new DateTime(2016, 1, 1);
              for (var i = 0; i < Count; i++)
              {
              var item = new LineMarkerSampleDataItem()
              {
              Date = date.AddDays(i),
              Input = rnd.Next(10, 20),
              Output = rnd.Next(0, 10)
              };
              items.Add(item);
              }
              return items;
                    }
                }
                public List<string> LineType
                {
                    get
                    {
                        return Enum.GetNames(typeof(LineMarkerLines)).ToList();
                    }
                }
                public List<string> LineMarkerInteraction
                {
                    get
                    {
                        return Enum.GetNames(typeof(LineMarkerInteraction)).ToList();
                    }
                }
            }
            public class LineMarkerSampleDataItem
            {
                public int Input { get; set; }
                public int Output { get; set; }
                public DateTime Date { get; set; }
            }
        }