MVVM CartesianMarkedZoneAnnotation and Fixed range

[Thincster]

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

[Petar Marchev]

Hello Thincster,

I am a little unsure what is your exact question here. You seem to need marked zone annotations and as you mentioned you have got it working. Can you please specify how we can assist you?

Regards,
Petar Marchev
Telerik

 

 

[Thincster]

Sorry for not stating my request more clearly. Can you give me an example of a chart like the one in the picture using binding for the marked zones rather than code behind?  Can you also show me how to create a chart with fixed size? I want to have a chart that shows 8 hours of data with a vertical range of 0 to 20.

[Petar Marchev]

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

 

 

[Thincster]

Excellent answer exactly what I was looking for thanks!