This is a migrated thread and some comments may be shown as answers.

MVVM CartesianMarkedZoneAnnotation and Fixed range

4 Answers 141 Views

ChartView

This is a migrated thread and some comments may be shown as answers.

Thincster asked on 30 Mar 2015, 07:31 PM

concentration.png

I'm having a couple of problems creating a marked zone on a RadCartesianChart and also with setting the "viewable" range on the chart. I was able to pretty much get it working in the code behind. The attached picture shows what I'm after. I'd like to be able to bind three separate charts 8hr, week and "all" or have one chart that can be set to display any of these 3. The Marked Zones that I've added come from ranges set elsewhere in the application.

<telerik:ChartDataSource x:Name="EightHourChartDataSource"

ItemsSource="{Binding EightHourData}"

SamplingUnit="Hour"

SamplingUnitInterval="1" />

<StackPanel Margin="0,0,0,30"

Orientation="Vertical">

<Label Content="Concentration % Last 8 Hours"

FontFamily="/GUIO;component/Fonts/#Segoe WP Black"

FontSize="16" />

<telerik:RadCartesianChart x:Name="chart1"

Height="150">

<telerik:RadCartesianChart.HorizontalAxis>

<telerik:DateTimeContinuousAxis LabelInterval="2"

LabelFormat="HH:mm"

FontFamily="Segoe UI"

PlotMode="OnTicks"

TickOrigin="{Binding Timestamp}" />

</telerik:RadCartesianChart.HorizontalAxis>

<telerik:RadCartesianChart.VerticalAxis>

<telerik:LinearAxis />

</telerik:RadCartesianChart.VerticalAxis>

<telerik:RadCartesianChart.Behaviors>

<telerik:ChartPanAndZoomBehavior />

</telerik:RadCartesianChart.Behaviors>

<telerik:LineSeries CategoryBinding="Timestamp"

ValueBinding="Data"

ItemsSource="{Binding ElementName=EightHourChartDataSource}"

StrokeThickness="2"

Stroke="Black"

ShowLabels="True">

<telerik:LineSeries.PointTemplate>

<DataTemplate>

<Ellipse Width="6"

Height="6"

Fill="Black" />

</DataTemplate>

</telerik:LineSeries.PointTemplate>

<telerik:LineSeries.LabelConnectorsSettings>

<telerik:ChartSeriesLabelConnectorsSettings>

<telerik:ChartSeriesLabelConnectorsSettings.Style>

<Style TargetType="{x:Type Path}">

<Setter Property="Stroke"

Value="Black" />

</Style>

</telerik:ChartSeriesLabelConnectorsSettings.Style>

</telerik:ChartSeriesLabelConnectorsSettings>

</telerik:LineSeries.LabelConnectorsSettings>

<telerik:LineSeries.LabelDefinitions>

<telerik:ChartSeriesLabelDefinition VerticalAlignment="Top"

Margin="0 0 0 6">

<telerik:ChartSeriesLabelDefinition.Template>

<DataTemplate>

<Border Background="Black"

BorderBrush="White"

BorderThickness="1">

<TextBlock Text="{Binding Label}"

Foreground="White"

FontFamily="Segoe UI"

Margin="2 0 2 1"

FontSize="10" />

</Border>

</DataTemplate>

</telerik:ChartSeriesLabelDefinition.Template>

</telerik:ChartSeriesLabelDefinition>

</telerik:LineSeries.LabelDefinitions>

</telerik:LineSeries>

</telerik:RadCartesianChart>

This is how I added the "zones" and fixed the viewable range:

Protected Overrides Sub OnViewReady(view As Object)

MyBase.OnViewReady(view)

'Get the data

Dim frm = Now.Subtract(TimeSpan.FromHours(8))

EightHourData = New BindableCollection(Of DecimalData)(_dataService.GetDecimalData("CoolantMonitor").Where(Function(d) d.Timestamp > frm))

If Not EightHourData.Any Then Return

'Get the date of the first point with 30 min padding

Dim f = EightHourData.First.Timestamp.Subtract(TimeSpan.FromMinutes(30))

FromDate = New Date(f.Year, f.Month, f.Day, f.Hour, 0, 0)

'Get the date of the last point with 30 min padding

Dim t = EightHourData.Last.Timestamp.Add(TimeSpan.FromMinutes(30))

ToDate = New Date(t.Year, t.Month, t.Day, t.Hour, 0, 0)

'Get the view

Dim v As CoolantMonitorDataView = Me.GetView

'Get the chart

Dim cv As RadCartesianChart = v.chart1

'Create a vertical axis to scale the vertical view to the min and max

cv.VerticalAxis = New LinearAxis With {.Minimum = 0, .Maximum = 20, .ShowLabels = False}

'Create a line series that will scale the horizontal view

Dim ls As New LineSeries

ls.DataPoints.Clear()

_startPoint = New CategoricalDataPoint With {.Category = FromDate, .Value = 0}

ls.DataPoints.Add(_startPoint)

_endPoint = New CategoricalDataPoint With {.Category = ToDate, .Value = 0}

ls.DataPoints.Add(_endPoint)

cv.Series.Add(ls)

cv.Annotations.Clear()

'Get the range settings

Dim ranges = CoolantConcentrationRange.GetRange.Ranges

'Create a marked zone for each range and add it the the Chart Annotations

For Each r In ranges

Dim b As New SolidColorBrush(r.RangeColor)

b.Opacity = 0.3

cv.Annotations.Add(New CartesianMarkedZoneAnnotation With {.HorizontalFrom = FromDate,

.HorizontalTo = ToDate,

.VerticalFrom = r.LowerValue,

.VerticalTo = r.UpperValue,

.Fill = b})

Next

End Sub

4 Answers, 1 is accepted

Accepted

answered on 01 Apr 2015, 03:40 PM

wpf-ChartView-921470.zip

Chart.png

Hello Thincster,

Thank you for the clarification. I have attached a small project demonstrating a bound chart. The chart has fixed size and its series and annotation are bound to a view model. I left the axes take their automatic range, but I have left two commented axes that have a manual range (as you mentioned). I hope this is helpful.

Regards,
Petar Marchev
Telerik

See What's Next in App Development. Register for TelerikNEXT.