Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
670
XamDataChart TimeXAxis to always display past 20 hours but offer scroll option.
posted

Hi again, final hurdle on the never ending Partogram. The clinicians want the chart to always display the past 20 hours worth of observations regardless of how much history there actually is. Eg, the X axis time scale will always be now - 20 hours. However, if observations span more than 20 hours the chart should be scroll-able so they can see the old observations.

The now - 20 part is simple, but I'm struggling with the scrolling. I'm playing around with XamZoomBar but I can't bind it properly to the chart range.

I'm thinking of giving the user a zoom bar like shown below and they can play with it all they like to get the range required. If there's a better approach, I'm open to ideas.

 <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="30"/>
                    </Grid.RowDefinitions>
                    <igChart:XamDataChart x:Name="xmDataChart" Grid.Row="0" DataContext="{Binding Path=PartogramCollection}" Margin="0,10,10,10">
                        <igChart:XamDataChart.Axes>

                            <igChart:TimeXAxis DateTimeMemberPath="TimeValue" ItemsSource="{Binding}"
                            x:Name="xmXAxis" MinorStroke="LightGray" MajorStroke="LightGray">
                                <igChart:TimeXAxis.LabelSettings >
                                    <igChart:AxisLabelSettings Location="OutsideTop" FontSize="14" FontWeight="Bold"/>
                                </igChart:TimeXAxis.LabelSettings>
                                <igChart:TimeXAxis.LabelFormats>
                                    <igChart:TimeAxisLabelFormat
                                    Format="hh"/>
                                </igChart:TimeXAxis.LabelFormats>
                                <igChart:TimeXAxis.Intervals>
                                    <igChart:TimeAxisInterval Interval="1" IntervalType="Hours"/>
                                </igChart:TimeXAxis.Intervals>
                            </igChart:TimeXAxis>

                            <igChart:NumericYAxis x:Name="Station" IsInverted="True" MaximumValue="3" MinimumValue="-7"
                                      Strip="Transparent" MajorStroke="Transparent" TickLength="0">
                                <igChart:NumericYAxis.Label>
                                    <DataTemplate>
                                        <TextBlock Text="{Binding Item}" FontSize="14" FontWeight="Bold" Foreground="Blue"
                                                   Visibility="{Binding Item, Converter={StaticResource myYConverter}}">
                                        </TextBlock>
                                    </DataTemplate>
                                </igChart:NumericYAxis.Label>
                            </igChart:NumericYAxis>

                            <igChart:NumericYAxis x:Name="Dilation" MaximumValue="10" MinimumValue="0" TickLength="0">
                                <igChart:NumericYAxis.LabelSettings >
                                    <igChart:AxisLabelSettings FontSize="14" FontWeight="Bold" Padding="20,0,5,0"
                                                   Foreground="Black" />
                                </igChart:NumericYAxis.LabelSettings>
                            </igChart:NumericYAxis>

                        </igChart:XamDataChart.Axes>

                        <igChart:XamDataChart.Series>

                            <igChart:LineSeries 
                                    UnknownValuePlotting="LinearInterpolate"
                                    Thickness="2"
                                    Brush="Blue"
                                    ItemsSource="{Binding}" 
                                    XAxis="{Binding ElementName=xmXAxis}" 
                                    YAxis="{Binding ElementName=Station}"
                                    ToolTip="{StaticResource StationToolTip}"
                                    ValueMemberPath="StationValue">
                                <igChart:LineSeries.MarkerTemplate>
                                    <DataTemplate>
                                        <Ellipse Height="20" Width="20"
                                         Fill="{Binding Item.LaborStart, Converter={StaticResource MyFillConverter}}"/>
                                    </DataTemplate>
                                </igChart:LineSeries.MarkerTemplate>
                            </igChart:LineSeries>

                            <igChart:LineSeries 
                                    UnknownValuePlotting="LinearInterpolate"
                                    Thickness="2" 
                                    Brush="Red"
                                    MarkerBrush="Red"
                                    ItemsSource="{Binding}" 
                                    XAxis="{Binding ElementName=xmXAxis}" 
                                    YAxis="{Binding ElementName=Dilation}"
                                    ToolTip="{StaticResource DilationToolTip}"
                                    ValueMemberPath="DilationValue">
                                <igChart:LineSeries.MarkerTemplate>
                                    <DataTemplate>
                                        <Polygon Points="0,4 6,10 0,16 4,20 10,14 16,20 20,16 14,10 20,4 16,0 10,6 4,0"
                                            Fill="Black"/>
                                    </DataTemplate>
                                </igChart:LineSeries.MarkerTemplate>
                            </igChart:LineSeries>

                        </igChart:XamDataChart.Series>

                    </igChart:XamDataChart >

                    <Label FontWeight="Bold" FontSize="14" Margin="25,0,0,0"
                       HorizontalAlignment="Left" VerticalAlignment="Center" Foreground="Black">
                        <Label.LayoutTransform>
                            <RotateTransform Angle="-90"/>
                        </Label.LayoutTransform>
                        <Label.Content>Cervical Dilation cm</Label.Content>
                    </Label>

                    <igChart:XamZoombar x:Name="xmZoombar" Height="30" Margin="50,0,0,0" Grid.Row="1" Background="Transparent" >
                        <igChart:XamZoombar.HorizontalPreviewContent>
                            <Label Content="more"/>
                        </igChart:XamZoombar.HorizontalPreviewContent>
                    </igChart:XamZoombar>
                </Grid>