How to handle charts directly in code

Question

I started working with C# and Live Charts a few days ago.

Based on examples found in the internet, I made a very simple graph in order to understand the concepts behind it.

That is what I have (it is working perfectly fine):

public partial class Wdw_graph : Window
{
    public SeriesCollection SeriesCollection { get; set; }
    public string[] Labels { get; set; }

    public Wdw_graph(List<dated_value> serie)
    {
        InitializeComponent();

        SeriesCollection = new SeriesCollection();

        ColumnSeries col_serie = new ColumnSeries {
                Values = new ChartValues<double>(),
                DataLabels = true };

        Labels = new string[serie.Count];

        for(int i = 0; i < serie.Count; i++)
        {
            col_serie.Values.Add(serie[i].value);
            Labels[i] = serie[i].date;
        }

        SeriesCollection.Add(col_serie);          

        DataContext = this;
    }
}

<Grid>
    <lvc:CartesianChart Series="{Binding SeriesCollection}" >
          <lvc:CartesianChart.AxisX>
            <lvc:Axis Labels="{Binding Labels}" LabelsRotation="80">
              <lvc:Axis.Separator>
                <lvc:Separator IsEnabled="False" Step="1"></lvc:Separator>
              </lvc:Axis.Separator>
            </lvc:Axis>
          </lvc:CartesianChart.AxisX>
        <lvc:CartesianChart.AxisY>
            <lvc:Axis Title="Sold Apps"></lvc:Axis>
        </lvc:CartesianChart.AxisY>
    </lvc:CartesianChart>
</Grid>

As you can see, I have 'SeriesCollection' and 'Labels' handled in the class code and them they are bound to the XAML.

I would like to know if it is possible to use the same approach to handle other graph elements, such as the 'AxisX'. If so, how can I do it?

In this post "Change the format of the axis tick labels in LiveCharts" there is a code that shows what I would like to do:

cartesianChart2.AxisX.Add(new Axis
{
    Name = "xAxis",
    Title = "DateTime",
    FontSize = 22,
    Foreground = System.Windows.Media.Brushes.Black,
    MinValue = 0,
    MaxValue = _amountValues,
});

But I could not reproduce that. I can't figure out where the 'cartesianChart2' comes from.

Mad River · Answer 1 · 2017-11-14T11:49:51.930

Well, I learned how to refer to the XAML elements in the class code.

I added 'x:Name="something"' to the CartesianChart and removed everything else (not using 'Binding' anymore):

<Grid>
    <lvc:CartesianChart x:Name="cartesian_chart">
    </lvc:CartesianChart>
</Grid>

Then, in the class code I inserted the axis and serie:

public partial class Wdw_graph : Window
{
    public Wdw_graph(List<dated_value> serie)
    {
        InitializeComponent();         

        cartesian_chart.AxisX.Add(new Axis
        {
            Name = "xAxis",
            Title = "Date and Time",
            FontSize = 20,
            Foreground = System.Windows.Media.Brushes.Black,
            MinValue = 0,
            MaxValue = serie.Count,
            Labels = new String[serie.Count],
        });
        cartesian_chart.AxisY.Add(new Axis
        {
            Name = "yAxis",
            Title = "Currency",
            FontSize = 20,
            Foreground = System.Windows.Media.Brushes.Black,
            MinValue = 0,
            MaxValue = 10,
        });

        cartesian_chart.AxisX[0].Separator.Step = 1;
        cartesian_chart.AxisX[0].LabelsRotation = 80;

        ColumnSeries col_serie = new ColumnSeries {
                Values = new ChartValues<double>(),
                DataLabels = true };

        for(int i = 0; i < serie.Count; i++)
        {
            col_serie.Values.Add(serie[i].value);
            cartesian_chart.AxisX[0].Labels[i] = serie[i].date;
        }

        cartesian_chart.Series.Add(col_serie);

        DataContext = this;
    }
}

I really preferred to handle the graph directly from the code, instead of using the XAML.

Can you tell me what are the drawbacks of this approach?

For more complicated layouts, using code can become much easier and hard to understand than XAML. Using XAML for UI/layouts and code for logic helps maintain separation between the two. — AlBal, Nov 15 '17 at 21:30

How to handle charts directly in code

1 Answers1