Hi Team,
public class Service{
public string ServiceName{get;set;}
public string List {get;set;}
}
In which each service has a list of reports.Report structure is as below
public class Report{
public string ReportName{get;set;}
public int density{get;set;}
On X axis i wanted the service name that has list of report bars grouped together with the same colour of service, report bars are based on density value.
on xaxis service names should show up.
on report bars on the tooltip report name should be displayed
In simple words i wanted to display all the reports under services.But all services under a report should have the same colour and must be grouped.Also attached the screen shot of the requirement i need.
Tried the same way but it is not working as expected
Waiting for your help on this.Thanks in advance for all you do
Regards.
Sridhar
In the above mentioned structure the Service class is as follows.
Public class service
{
Public string service name{get;set;}
Public List<Report> Reports{get;set;}
Hello Sridhar,
Thank you for your post(s).
Unfortunately, this is not the way that the XamDataChart works with its ColumnSeries elements. The amount of ColumnSeries used for a particular category on the axis depends on the number of ColumnSeries elements that you have in your XamDataChart.Series collection, and for this to work, you would need a separate ValueMemberPath for each of the column series so that you could "group" by the services in your chart.
For your requirement to work, I would recommend having a separate class, or perhaps a DataTable with the number of value-properties (or columns) equal to the maximum number of reports in one of your services. Using this, you can have X number of ColumnSeries in your XamDataChart, where X is that number of value-properties or columns. For the "services" that don't have the maximum amount of reports, you can set the value for those reports to "0" or "null" if you use a nullable type, and the columns for that particular service will not show for the values that are null or 0, assuming you set the MinimumValue of your NumericYAxis to 0.
What this will do, is it will allow you to have multiple columns in your chart existing for each service in the chart. The issue now, is that each of these columns will be a different color for that particular service. This issue can be eliminated by handling the AssigningCategoryStyle event of the ColumnSeries. This allows you to color the columns of a column series individually, and to handle this event, you need to opt into it by setting the IsCustomCategoryStyleAllowed property of your ColumnSeries to "true" and then hook the event normally.
From the event arguments of this event, you can get the data item that a particular column represents, and color it according to the service that it represents in your application. The tooltip can also be set here, or on the ColumnSeries by setting the ToolTip property to a ContentControl of your creation.
I have attached a sample project that demonstrates how this can be done. I hope this helps you.
Please let me know if you have any other questions or concerns on this matter.
Sincerely,AndrewAssociate Developer
Hello Andrew,
Thanks a lot for the example posted.But it doesnt meet my requirement completely.
The structure which you have defined is as follows:
public class SampleData
public string ServiceName { get; set; }
public string ReportName { get; set; }
public int Report1Density { get; set; }
public int Report2Density { get; set; }
public int Report3Density { get; set; }
But i wanted the report structure to be defined a level lower .
public class SampleData { public string ServiceName { get; set; } public List<Report> Reports { get; set; } }
public class Report { public string ReportName { get; set; } public int Density { get; set; } }
One more thing to mention is you have defined the series as static elements in the UI but in my requirement both the services and reports are dynamic
This is how you have mapped series as static elements:
<ig:XamDataChart.Series>
<ig:ColumnSeries XAxis="{Binding ElementName=xAxis}" YAxis="{Binding ElementName=yAxis}" ItemsSource="{Binding Data}"
ValueMemberPath="Report1Density" IsCustomCategoryStyleAllowed="True" AssigningCategoryStyle="ColumnSeries_AssigningCategoryStyle"
ToolTip="{StaticResource theTooltip}"/>
ValueMemberPath="Report2Density" IsCustomCategoryStyleAllowed="True" AssigningCategoryStyle="ColumnSeries_AssigningCategoryStyle"
ValueMemberPath="Report3Density" IsCustomCategoryStyleAllowed="True" AssigningCategoryStyle="ColumnSeries_AssigningCategoryStyle"
</ig:XamDataChart.Series>
But i wanted this part to be dynamic where i will provide density single column instead of static(Report3Density,Report3Density2,Report3Density1).The value member path needs to be dynamic
Thanks in advance for all you do.
Regards,
Sridhar.
It appears from the structure of your code and the appearance of your chart that you are adding multiple rows in your DataTable with the same service name. The chart will not recognize this as a group, but it will recognize each as its own separate category item. This is why you are seeing multiple duplicate Service names in your chart, and why you are seeing a single, flat color for your single column series.
There is no built-in functionality at the moment to group by a given label path in the XamDataChart for the ColumnSeries, and so I would recommend that you have a single row in your data table for each service, but have multiple columns that represent the Report values for that particular service. At that point, you can have multiple column series that point at each of these value paths, which will group your chart by your service names. This will work to group your service names because you will only have a single service category item for each service, but with multiple value paths, and so multiple column series would need to be shown for each. This way is much like the original way that I had sent you, where there was a value path for Report1, Report2, and Report3, but with the usage of the DataTable, this becomes much more dynamic, as you can add more columns and therefore, more value paths.
If you would like to see category-grouping functionality included for the XamDataChart's column series, I would recommend suggesting a new product idea for this functionality at http://ideas.infragistics.com. This product ideas site places you in direct communication with our product management teams who plan and prioritize upcoming features and products based on community and user feedback.
Hi Andrew,
Thanks a lot for your support .
I have taken your sample and modified it for bar series as mentioned below.
One issue i have found is i need to group the reports based on the service .Where can i specify the group by option in the mentioned graph.
Currently for all the reports i am getting service Name on the X axis .I wanted the reports to be grouped under a single service Name.
Code Behind File:
using System.Windows;using System.Windows.Controls;using System.Windows.Data;using System.Windows.Documents;using System.Windows.Input;using System.Windows.Media;using System.Windows.Media.Imaging;using System.Windows.Shapes;using Infragistics.Controls.Charts;
namespace XamDataChartServiceReportsCase{ /// <summary> /// Interaction logic for DataTableTest.xaml /// </summary> public partial class DataTableTest : Window { Random r = new Random(); DataTable table = new DataTable(); public DataTableTest() { InitializeComponent(); table.Columns.Add(new DataColumn("Label", typeof(string))); table.Columns.Add(new DataColumn("Value", typeof(int))); table.Columns.Add(new DataColumn("Report", typeof(string))); for(int i=0; i<5; i++) { DataRow row = table.NewRow();
row["Label"] = "Service " + Convert.ToString(1); row["Report"] = "Report " + i.ToString(); row["Value"] = r.Next(1, 5);
table.Rows.Add(row); }
for (int i = 0; i < 5; i++) { DataRow row = table.NewRow();
row["Label"] = "Service " + Convert.ToString(2); row["Report"] = "Report " + i.ToString(); row["Value"] = r.Next(6, 12);
this.DataContext = table; }
int count = 1; private void addColumnBtn_Click(object sender, RoutedEventArgs e) { count++; table.Columns.Add(new DataColumn("Value" + count.ToString(), typeof(int))); for(int i=0; i<table.Rows.Count; i++) { DataRow row = table.Rows[i]; row["Value" + count.ToString()] = r.Next(1, 10); }
LineSeries series = new LineSeries() { XAxis = xAxis, YAxis = yAxis, ItemsSource = table.DefaultView, ValueMemberPath = "Value" + count.ToString() }; chart.Series.Add(series); } }}
Xaml File:
<Window x:Class="XamDataChartServiceReportsCase.DataTableTest" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:ig="http://schemas.infragistics.com/xaml" Title="DataTableTest" Height="300" Width="300"> <Grid> <Grid.Resources> <ContentControl x:Key="theTooltip"> <StackPanel Orientation="Vertical"> <StackPanel Orientation="Horizontal"> <TextBlock Text="Service: " FontWeight="Bold"/> <TextBlock Text="{Binding Item.Label}"/> </StackPanel> <StackPanel Orientation="Horizontal"> <TextBlock Text="Report: " FontWeight="Bold"/> <TextBlock Text="{Binding Item.Report}"/> </StackPanel> </StackPanel> </ContentControl>
</Grid.Resources> <Grid.RowDefinitions> <RowDefinition/> <RowDefinition Height="40"/> </Grid.RowDefinitions> <ig:XamDataChart x:Name="chart"> <ig:XamDataChart.Axes> <ig:CategoryXAxis x:Name="xAxis" ItemsSource="{Binding DefaultView}" Label="{}{Label}"/> <ig:NumericYAxis x:Name="yAxis" MinimumValue="0" MaximumValue="10"/> </ig:XamDataChart.Axes> <ig:XamDataChart.Series> <ig:ColumnSeries XAxis="{Binding ElementName=xAxis}" YAxis="{Binding ElementName=yAxis}" ItemsSource="{Binding DefaultView}" ValueMemberPath="Value" ToolTip="{StaticResource theTooltip}"/>
</ig:XamDataChart.Series> </ig:XamDataChart> <!--<Button x:Name="addColumnBtn" Content="Add Column/Series" Click="addColumnBtn_Click" Grid.Row="1"/>-->
</Grid></Window>
I have attached a sample project to demonstrate binding of a XamDataChart to a data table. In this sample, the number of columns is dynamic, as there is a button that allows you to add new columns, and thus, new series to the chart.
It is worth noting that it is not possible to bind directly to the DataTable, as the ItemsSource properties of the series and the axes expect an IEnumerable derivation. You can, however, bind to the default view of the DataTable.
I hope this helps you. Please let me know if you have any other questions or concerns on this matter.
Forgot to Mention that the data table number of columns should be dynamic.
Thanks a lot for your help extended.
I have tried binding a data table but it is not working as expected.Can you please provide a sample of data table binding.