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
Thanks for support, your provided solution solved our mostly problems, only need little changes like
5.) The Legend is a separate control from the XamDataChart which is why it is rendered outside of the chart. Where do you want the legend to appear? You should use the HorizontalAlignment and VerticalAlignment properties along with the Margin property to control where you want the legend to be placed.
1.) I added a DataTrigger to the TextBlock inside the tooltip so when the "NumericFormatIsChecked" property is false, it switches the value to percent.
2 & 3.) The chart tooltips don't appear to work nicely with ScrollViewer it seems. I'm sorry I recommended using a ScrollViewer. Instead I recommend using the default horizontal scrollbar that the chart provides. You can set the WindowScaleHorizontal property to control how "wide" your chart is. The scale goes between 0 and 1 and smaller values produce a "wider" chart. You can also use a separate ScrollBar and then manually hook it up to the XamDataChart using the Scroll event. When the user scrolls the ScrollBar, you can change the datachart's scrollbar accordingly. This gives you a dynamically scrolling chart where as the default scrollbar would require that you scroll and then let go of the scroll thumb to update the chart. If you let the chart handle it's own scrolling then the tooltips work correctly.
4.) This is a consequence of the way we moved the X axis labels upwards. The chart still thinks that it rendered the labels down there because we moved the labels after they have already been rendered. I had to do this in the sample because normally you can't place the axis labels where you currently have them. I'm not sure there's anything we can do about that empty space. That spacing is controlled by the LabelSettings.Extent property but modifying this will just shrink the available space for rendering the labels.
I have a question regarding your minimum Y axis value. Do you allow for a wide range of values between 0 and negative numbers? I ask because of something that ocurred to me while I was testing some things. If you comment out my RenderTransform code in MainWindow.xaml.cs and then add LabelSettings to the CategoryXAxis where the Location is InsideBottom and the Extent is say "150", you will see that the axis labels are rendered over the chart. You will also see that the space between the scrollbar and the chart is gone. Is it possible that this is something you can use? If you do not allow for a wide range of Minimum Y axis values you might be implement some logic that if the Minimum is 0, set the label Location to OutsideBottom but if the Minimum is negative, set the Location to InsideBottom and adjust the Extent so that it places the label where 0 is located. This is probably the only way to actually remove the space.
Thanks,your provided solution is great.
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 slider functionality is very nice, but we don't used it in our production
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.