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,
Andrew
Associate Developer

Hello Andrew,

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.

Thanks in advance for all you do.

Regards.

Sridhar

Forgot to Mention that the data table number of columns should be dynamic.

Regards,

Sridhar.

Hello Sridhar,

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.

Sincerely,
Andrew
Associate Developer

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);

table.Rows.Add(row);
}

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>