We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Inline graph (similar to Excel)

Thread ID:





103600 May 15,2012 03:27 PM May 31,2012 01:55 AM WPF 1
Tags: GridControl
Steven Paplanus
Asked On May 15, 2012 03:27 PM

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 [Syncfusion]
Replied On May 31, 2012 01:55 AM

Hi Steve,

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

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


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


<sync:GridDataColumnStyle CellType="DataBoundTemplate">




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

<sync:ChartArea >

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


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



. . .







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.

Saravanan A


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.