Inline graph (similar to Excel)

[Steven Paplanus]

I need to create somethign similar to Excel's inline cell graph.   I have a .net datatable, and I created  a new column to hold the values of three criteria columns separated by a " | ".   Now, I want to display these criteria as inline graph to show the contribution of each of these columns to a total number.   Is there any way to do this?

[Saravanan A]

Hi Steve,

We have analyzed your scenario and this can be achieved as in below code snippet.
Code Snippet:
[C#]

//Sample DataTable
DataTable table = new DataTable();
...
table.Columns.Add("PID", typeof(int));
table.Columns.Add("Name", typeof(string));
table.Columns.Add("QualityOfLife", typeof(double));
table.Columns.Add("Competitiveness", typeof(double));
table.Columns.Add("GrowthPotential", typeof(double));
table.Columns.Add("OverallValues", typeof(double));
table.Columns.Add("Analysis", typeof(object));

table.Rows.Add(1, "East Bay", 0.2, 0.7, 0.3, 1.2,"East Bay|0.2|0.7|0.3");
table.Rows.Add(2, "South Bay", 1.2, 0.9, 0.2, 2.5,"South Bay|1.2|0.9|0.2");
. . .
//Converter which is used to bind DataSource for Chart.
//We are populating datasource for Chart by splitting values from CellBoundValue of GridDataControl

class DataSourceConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
string[] values;
string delimStr = "|";
char [] delimiter = delimStr.ToCharArray();
values = value.ToString().Split(delimiter);
List src = new List();
src.Add(new ChartData() { X = values[0], Y1 = double.Parse(values[1]), Y2 = double.Parse(values[2]), Y3 = double.Parse(values[3]) });
return src;
}
..
}

[XAML]

<!-- We have used Syncfusion GridDataControl, and for the last column we have overriden the CellItemTemplate for having Chart-->

<sync:GridDataVisibleColumn.ColumnStyle>

<sync:GridDataColumnStyle CellType="DataBoundTemplate">

<sync:GridDataColumnStyle.CellItemTemplate>

<DataTemplate>

<ContentControl>

<sync:Chart Height="200" Width="300">

<sync:ChartArea >

<sync:ChartSeries Type="StackingBar" DataSource="{Binding CellBoundValue, Converter={StaticResource converter}}" BindingPathX="X" BindingPathsY="Y1">

<sync:ChartSeries.AdornmentsInfo>

<sync:ChartAdornmentInfo Visible="True" HorizontalAlignment="Left" VerticalAlignment="Bottom"/>

</sync:ChartSeries.AdornmentsInfo>

</sync:ChartSeries>

. . .

</sync:ChartArea>

</sync:Chart>

</ContentControl>

</DataTemplate>

</sync:GridDataColumnStyle.CellItemTemplate>

</sync:GridDataColumnStyle>

</sync:GridDataVisibleColumn.ColumnStyle>
Based on this requirement we have prepared a sample and please find the sample in the below location.

Sample :  http://www.syncfusion.com/downloads/Support/DirectTrac/94606/InlineCellGraph_Sync-1463770153.zip

Please let us know, if you need any further assistance.

Thanks,
Saravanan A