Goo day,
A major client of ours needs the ability the be able to see the datapoints of a column series below each chart x-axis column.
Please see sample. How would one even attempt to go about this? Making sure that the grid columns below the chart line up with the columns generated?
Hello Key360,
This is certainly not something that is available out-of-the-box on the XamDataChart, but in order to achieve this, I would recommend placing a XamDataGrid or other data-grid control directly below the XamDataChart, and hiding the headers of that grid so that it looks like it is part of the chart. This can be done with the XamDataGrid by setting the XamDataGrid.FieldLayoutSettings.LabelLocation property to "Hidden" and the XamDataGrid.GroupByAreaLocation property to "None."
The more difficult part here will be getting the columns of your grid to line up with the columns in the XamDataChart. For this, I would recommend exercising the ExportVisualData method of the XamDataChart. Doing this will allow you to get the AxisVisualData from the returned ChartVisualData.Axes collection. This AxisVisualData element will have a TickMarks collection which is of the type PathVisualData. The PathVisualData element has a Data collection, which will be full of LineGeometryData elements, which represent the tick marks. These LineGeometryData elements contain information about your tick marks, such as the position on the chart that they are placed at. Each tick mark will be spaced evenly, and so if you can find the difference between the X1 points of two of the LineGeometryData elements, you can find the width between these tick marks. I would recommend that this becomes your column width for your data grid that you place below the chart.
At this point, the only remaining issue is getting that first column to align with the bottom-left side of the plot area. In order to get a little extra space under your NumericYAxis, I would recommend that you set the NumericYAxis.LabelSettings property to a new AxisLabelSettings object and provide an Extent. This will push out the space between the actual "edge" of the XamDataChart and the labels. The distance between the edge of the XamDataChart will then be this Extent + 6 pixels. This should be the width of your first column in your data grid.
Doing the above should allow you to draw a data grid under the XamDataChart, but I would recommend that you perform this resizing of your columns each time the chart resizes or gets zoomed. You can do this by handling the RefreshCompleted event of the XamDataChart and making a call to a method that performs this resize. Note, you also may want to do this in a Dispatcher.BeginInvoke action, as this will ensure that the chart has finished re-measuring.
I have attached a sample project to demonstrate the above. I hope this helps.
Please let me know if you have any other questions or concerns on this matter.
Sincerely,AndrewAssociate Developer
Fantastic, thank you.
I ended up with a similar answer myself.
Only one problem with your sample, it uses the first item's width. In my case I added a little left margin to the plot area of the chart to make space below for the legend items and the first items it finds is this margin, so I extended the code to continue until it finds a larger consistent width and works like a charm.
Regards,
Martin