Can you display a line series with x and y value pairs using LiveCharts?

Question

I am trying to display a line chart by providing x and y value pairs that get displayed by a cartesian chart. Is this possoble with LiveCharts? I can't find an example for this online.

I know, that you can provide the labels for the x axis, but my values on the x axis are not linear, therefore they should have different spacing.

This is my Xaml so far:

<liveCharts:CartesianChart Grid.Column="0"
                           Margin="5 0 5 0"
                           Series="{Binding TemperatureSeries}">
    <liveCharts:CartesianChart.AxisX>
        <liveCharts:Axis Title="Zeit"
                         FontSize="15"
                         FontWeight="Bold"
                         Labels="{Binding Labels}" />
    </liveCharts:CartesianChart.AxisX>

    <liveCharts:CartesianChart.AxisY>
        <liveCharts:Axis Title="Temperature (°C)"
                         FontSize="15"
                         FontWeight="Bold"
                         LabelFormatter="{Binding DoubleToStingConverter}" />
    </liveCharts:CartesianChart.AxisY>
</liveCharts:CartesianChart>

This is how the TemperatureSeries Property looks like.

this.TemperatureSeries =
    new SeriesCollection
    {
        new LineSeries
        {
            Values = new ChartValues<double>(),
            Stroke = redStroke,
            Fill = redFill
        }
    };

score 2 · Accepted Answer · answered Sep 05 '20 at 15:28

You need to use a Mapper e.g. CartesianMapper<T>. The Mapper maps the data of an arbitrary object to the chart's axis (e.g. x and y in case of the CartesianMapper).
The Mapper also allows to define constraints regarding the presentation of the data values. For example you can define that values exceeding a certain threshold should be painted red.
Then assign this data mapper to the LineSeries.Configuration property.

Note that ChartValues is a generic type that allows to define any data model as chart value. The Mapper knows how to get the values out of this model type. The following example uses a simple Point struct as data model:

private void InitializeData()
{
  var values = new ChartValues<Point>();

  // Create sine graph
  for (double x = 0; x < 361; x++)
  {
    var point = new Point() {X = x, Y = Math.Sin(x * Math.PI / 180)};
    values.Add(point);
  }

  this.TemperatureSeries = new SeriesCollection
  {
    new LineSeries
    {
      Configuration = new CartesianMapper<Point>()
        .X(point => point.X) // Define a function that returns a value that should map to the x-axis
        .Y(point => point.Y) // Define a function that returns a value that should map to the y-axis
        .Stroke(point => point.Y > 0.3 ? Brushes.Red : Brushes.LightGreen) // Define a function that returns a Brush based on the current data item
        .Fill(point => point.Y > 0.3 ? Brushes.Red : Brushes.LightGreen),
      Title = "Series",
      Values = values,
      PointGeometry = null
    }
  };
}

Can you display a line series with x and y value pairs using LiveCharts?

1 Answers1