Charts: Example using C# and not XAML

[Jason]

Is there a way to declare and setup the chart instead of using xaml like in the examples in the Q2 release? I'm attempting to update the chart on the fly and it would be easier to do if this was possible. 

[Lance | Manager Technical Support]

Hi Jason,

You can define all the XAML properties you see in the documentation and in demos using C#. The properties are the same, for example DatetimeCategoricalAxis and PropertyNameDataPointBinding, however some may not be that obvious, like AxisLabelFitMode enum. For those, you can let Intellisense guide you on what the property's value needs to be.

I have attached the same demo I sent you in another thread (ticket #1052878), but with the identical chart being created in C# instead of XAML when MainPage is loaded.

Here's how I create the chart:

private void MainPage_Loaded(object sender, RoutedEventArgs e)
{
    //STEP ONE - instantiate and configure the RadCatesianChart
    var chart = new RadCartesianChart();

    //define the axes
    chart.HorizontalAxis = new DateTimeCategoricalAxis { LabelFitMode = AxisLabelFitMode.Rotate};
    chart.VerticalAxis = new LinearAxis();


    //STEP TWO - Instaitate and configure a series
    //instantiate and configure a series
    var lineSeries = new LineSeries();

    //set the items source
    //(NOTE - because SensorDataPoints is an ObservableCollection, and is using OnPropertychanged in the setter, you only need to set this once)
    lineSeries.ItemsSource = viewModel.SensorDataPoints;

    //configure the value and category bindings
    lineSeries.ValueBinding = new PropertyNameDataPointBinding("ReadingValue");
    lineSeries.CategoryBinding = new PropertyNameDataPointBinding("ReadingTimestamp");

    //STEP THREE - Add the series to the CartesianChart
    chart.Series.Add(lineSeries);

    //FINAL STEP - Add the Chart to the VisualTree
    this.RootGrid.Children.Add(chart);
}

Regards,
Lance | Tech Support Engineer, Sr.
Telerik by Progress

[Jason]

Thanks Lance!

One last thing with charts, is it possible to programmatically set the extents of the chart? For example, the actual data to be displayed could be between 0 and 65k, but the actual data presented is only in the 1k to 2k range.

I'd like to be able to switch between the two.

[Lance | Manager Technical Support]

Hello Jason,

I'm assuming you're referring to your LinearAxis, you can use the Minimum, Maximum and ActualRange properties to have the chart only show certain areas of your data (see here for all properties of a NumericalAxis as the LinearAxis inherits from NumericalAxis).

After setting the ActualRange, you can also further tweak the appearance by setting the MajorStep property to decrease the number of ticks on the axis.

Note: If you're referring to another type of axis, I recommend checking out this page in the documentation and drill down to the type of axis you're using to see the available configuration properties we surface.

Lastly, you can add PanAndZoom behavior to the chart to let the user control the visible data.

If this doesn't help, please provide me with your specifics (code and screenshots preferable) and I'll dig in deeper.

Regards,
Lance | Tech Support Engineer, Sr.
Telerik by Progress