Hi,
We use MVVM in our application, and XamDataChart is used for display of records every thing is working fine, but we need following features, how can we achieve these ?
Hi elinder,
I have attached a sample that produces a chart similar to your screenshot. Your X Axis values are a little weird so I couldn't use them for directly placing the vertical info strips and vertical lines. Instead I used values between 0 - 29 (you have 30 labels so 30 data points). Since I used CategoryXAxis for the XAxis labels, I needed to have another X axis present to allow for more accurate placement between the labels. So there is a NumericXAxis in the chart with hidden labels. I also hid its grid lines. With this hidden NumericXAxis I was able to more accurately place the info strips and vertical lines so the final outcome produces a chart very similar to your screenshot.
Let me know if you have any questions
Hi Rob,
Thanks, your provided solution is very great, but we have a little issue with this like
I'll update my sample to include your requirements. Should be ready tomorrow.
One more thing related to XamDataChart Axis labels formatting,
<ig:CategoryXAxis x:Name="DaysOfYearXAxis" Interval="1" MajorStroke="Transparent" ItemsSource="{Binding DaysOfYear}"> <ig:CategoryXAxis.Label> <DataTemplate> <StackPanel Orientation="Vertical"> <Border Background="Gray" Width="1.5" Height="3"/> <TextBlock Text="{Binding Item.Label}" HorizontalAlignment="Center" TextAlignment="Center"> <TextBlock.RenderTransform> <TransformGroup> <RotateTransform Angle="-90"/> <TranslateTransform Y="55" X="0"/> </TransformGroup> </TextBlock.RenderTransform> </TextBlock> </StackPanel> </DataTemplate> </ig:CategoryXAxis.Label> </ig:CategoryXAxis>
<ig:NumericYAxis x:Name="DaysOfYearYAxis" MajorStroke="Gray" MajorStrokeThickness="1.5" MajorStrokeDashArray="1 2"> <ig:NumericYAxis.Label> <DataTemplate> <StackPanel Orientation="Horizontal" Margin="0"> <TextBlock Text="{Binding Item, StringFormat=N2}" Width="40" Foreground="Black" FontSize="11"></TextBlock> <Border Background="Gray" Width="3" Height="1.5"/> </StackPanel> </DataTemplate> </ig:NumericYAxis.Label> </ig:NumericYAxis>
We passed these XAxis and YAxis to the programatically generated series.
In this case we need a StringFormat property who bind where we was defined fixed StringFormat=N2. But this is not worked.
Can you include these settings in upcoming sample application?
From your screenshot I couldn't tell how your data points are split up so I just created a table with 252 random values. The sample is attached.
- X Axis label gap with Y axis 0.0
I was using the wrong approach for moving the X axis labels vertically. I have fixed this so it will work no matter where 0 is.
- ValueOverlays are showing up in the legend
Set the LegendItemVisibility property on the ValueOverlays to Collapsed. If you do not want a series to be visible in the legend, set the LegendItemVisibility property
- Custom labels are overlapped and not visible.
There are so many points in the chart that the x axis doesn't have enough room to display the labels. I recommend rotating the x axis labels by 90 degrees and increasing the Interval so you cut down on the number of visible labels. Inside the AxisLabelSettings there is a property called Angle which you can use to rotate the labels. Set this to -90.
- Y Axis label format
Instead of creating a custom TextBlock and setting the format there, you can set the format in the NumericYAxis.Label property. When binding to this property, make sure your format looks like this: "{0:N2}%". If you set the format in XAML you need to add an extra set of curly braces in front of it. ("{}{0:N2}%") You can look at my sample for more details.
Thank you so much for your great support, I was modified the sample application
Thank you so much, your provided solution solved my problems.
My previous sample already resolved the Y axis labels displaying underneath the ScrollBar. I fixed it by placing the XamDataChart and ScrollBar inside a Grid with some RowDefinitions.
Fixing the ToolTip issue is a little tricky because the tooltip is actually just a Popup. One issue with using a Popup is that it is removed from the Visual Tree of the main window so a RelativeSource binding to the window is not going to work. I had to adjust the ToolTip content you have such that when the content is loaded, I set it's Tag property to the window's view model. From here, binding to the Tag property is fairly straight forward.
For the Y axis value ranges, I modified the code so that it switches between OutsideBottom and InsideBottom depending on where the 0 value is. If the 0 value is near the bottom or is the very bottom, the X axis labels are displayed with OutsideBottom. When the 0 value moves high enough up the chart, it switches to InsideBottom. Switching to InsideBottom removes the space below the chart as you required. When the 0 value moves back down enough though, it switches back to OutsideBottom.
Thanks your slider functionality is very nice, but we don't used it in our production
For XAML defined TextBlocks you can use the below code to set your DataTrigger:
<TextBlock Name="MyXamlDefinedTextBlock"> <TextBlock.Style> <Style TargetType="TextBlock"> <Style.Triggers> <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Window}, Path=DataContext.NumericFormatIsChecked}" Value="False"> <Setter Property="Text" Value="{Binding Item, StringFormat='{}{0:N2}%'}"/> </DataTrigger> </Style.Triggers> </Style> </TextBlock.Style> </TextBlock>
The issues I was talking about with using a wide range of minimum values was due to the approach I was thinking about taking which was to switch the X axis location between OutsideBottom and InsideBottom depending on where the 0 value was on the Y axis. I decided to go with a different approach which made things a bit easier. Although I'm not sure if you'd be ok with it. Basically I keep the X axis inside the chart at all times and move it up based on where the 0 value is (as I did before). This produced an interesting effect that I think should be ok. You can see it in my sample. There is a slider down at the bottom left of the window that you can use to shift the minimum value around.
Thanks,your provided solution is great.