xamlchartsuwpuwp-xamlwinrt-xaml-toolkit

WinRTXAML chart, control style for top label, code


I'm using the WinRTXamlToolkit.Controls.DataVisualization.Charting.Chart object, with a dependent axis integer of 0/1, and an independent axis of time. I'd like to suppress or perhaps rotate the labels at the top of the chart. Are the styles found on the Axis (chart.Axes) or series (LineSeries)? My chart is completely configured through code, snippets below:

EDIT 1/30/2017-3: added hosting XAML page.

<Page
    x:Class="HomeControl.Views.Historical"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:Charting="using:WinRTXamlToolkit.Controls.DataVisualization.Charting"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:HomeControl.Views"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Charting:Chart x:Name="LineChart" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" VerticalAlignment="Top" Height="500">
        </Charting:Chart>
    </Grid>
</Page>

EDIT 1/30/2017-2: added remaining code...

var lowDate = records.First().taken.DateTime;
var highDate = records.Last().taken.DateTime;

var allDeviceTelemetry = records.GroupBy(t => t.sensorid).OrderBy(g => g.Key);

var axisTaken = new DateTimeAxis()
    {
        Title = "Taken",
        Orientation = AxisOrientation.X,
        IntervalType = DateTimeIntervalType.Minutes,
        Interval = 5,
        Minimum = lowDate,
        Maximum = highDate,
};
LineChart.Axes.Add(axisTaken);

LineChart.Axes.Add(new LinearAxis()
{
    Title = "State",
    Orientation = AxisOrientation.Y
});

foreach (var deviceTelemetry in allDeviceTelemetry)
{
    var series = new LineSeries()
    {
        Title = deviceTelemetry.Key, // sensorid
        IndependentValuePath = "taken",
        DependentValuePath = "sensorvalueint",
        ItemsSource = deviceTelemetry
    };
    LineChart.Series.Add(series);
}

The area I'm trying to control is in green: Sample Line Chart

I've played around with some of the other styles, such as the interval and axis titles, I just can't figure out where the data point label styles are?

EDIT 1/30/2017: Here is the tree, with the highlighted object (TextBlock at bottom). I need to figure out how to style this "AxisLabel", "Panel", "AxisGrid" or "CategoryAxis" - through code. enter image description here

Any hints would be appreciated!

-John


Solution

  • I've solved my issue, but not with an outcome I expected - much better.

    After experimenting quite a bit, I've learned a few things about the WinRTXAML charting; these observations are from purely a coding perspective, since I am not using static XAML in my page. I am new to the control, so if anyone knows these learnings to be incomplete or misguided please chime in:

    Applying these learnings to my original issue, here's what happened. Although I had a DateTime axis predefined, my incoming datatype for the independent axis was DateTimeOffset. This value was interpreted as a string value, since it was not DateTime (i.e. no implicit conversion). This caused the Chart to generated a CategoryAxis, assign it to the series, and it placed it at the top of the chart. Not understanding this was happening, I didn't want the labels on this top axis, so I was trying to suppress them, but I could not find the axis, since it was not created until AFTER data binding took place.

    SOLUTION: make the "taken" value datatype DateTime, this caused the chart to align [explicitly or implicitly] to the DateTimeAxis. Optimization: assign the axis directly to the series, don't bother adding them to the Chart.Axes property.

    Thank you @jstreet and @FilipSkakun for taking the time to look at this, I appreciate your attention and patience.

    -John