MVVM CartesianMarkedZoneAnnotation and Fixed range

5 posts, 1 answers
  1. Thincster
    Thincster avatar
    3 posts
    Member since:
    May 2013

    Posted 30 Mar 2015 Link to this post

    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
  2. Petar Marchev
    Admin
    Petar Marchev avatar
    968 posts

    Posted 31 Mar 2015 Link to this post

    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
     

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

     
  3. UI for WPF is Visual Studio 2017 Ready
  4. Thincster
    Thincster avatar
    3 posts
    Member since:
    May 2013

    Posted 01 Apr 2015 in reply to Petar Marchev Link to this post

    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.
  5. Answer
    Petar Marchev
    Admin
    Petar Marchev avatar
    968 posts

    Posted 01 Apr 2015 Link to this post

    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.

     
  6. Thincster
    Thincster avatar
    3 posts
    Member since:
    May 2013

    Posted 01 Apr 2015 in reply to Petar Marchev Link to this post

    Excellent answer exactly what I was looking for thanks!
Back to Top
UI for WPF is Visual Studio 2017 Ready