How to embed piechart in datagrid columns?

11-07-2009 4:05 PM |

I know how to create a list and bind it to a datagrid to display data.

I also know how to create pieseries list for a pie chart and bind it to display the piechart.

Now I want to have the piechart in one of the columns of the datagrid.

I have created the template column for the piechart.

I am able to bind the data from the list to the datagrid but do not know how to access the piechart in the datagrid to populate it.

I am not sure whether I should create the pieseries list which is embedded in the grid data list or should access the piecharts separately.

Thanks.

 

Some of the code

public class Answers

{

public String Questions { get; set; }

public int Answer_1 { get; set; }

public int Answer_2 { get; set; }

public int Answer_3 { get; set; }

public int Answer_4 { get; set; }

}

public class AnswersPie

{

public string AnswerName { get; set; }public int AnswerQty { get; set; }

}

 

List<Answers> source = new List<Answers>();

int itemsCount = 5;

for (int i = 0; i < itemsCount; i++)

{

source.Add(new Answers()

{

Questions = "Question " + i.ToString(),

Answer_1 = i * 10,

Answer_2 = i * 20,

Answer_3 = i * 30,

Answer_4 = i * 40

});

}

AnswerGrid1.ItemsSource = source;

List<AnswersPie> _answerpie =

new List<AnswersPie>{

new AnswersPie { AnswerName="Ans1", AnswerQty=20},

new AnswersPie { AnswerName="Ans2", AnswerQty=30},

new AnswersPie { AnswerName="Ans3", AnswerQty=10}, new AnswersPie { AnswerName="Ans4", AnswerQty=10}

};

PieSeries pieSliceanswers = piechartanswers.Series[0] as PieSeries;

pieSliceanswers.ItemsSource = _answerpie;

 

 

<data:DataGrid Name="AnswerGrid1" Height="300" Width="450" AutoGenerateColumns="False" Canvas.Top="10">

<data:DataGrid.Columns>

<data:DataGridTextColumn Header="Questions" Binding="{Binding Questions}" />

<data:DataGridTextColumn Header="Answer_1" Binding="{Binding Answer_1}"/>

<data:DataGridTextColumn Header="Answer_2" Binding="{Binding Answer_2}"/>

<data:DataGridTextColumn Header="Answer_3" Binding="{Binding Answer_3}"/>

<data:DataGridTextColumn Header="Answer_4" Binding="{Binding Answer_4}"/>

<data:DataGridTemplateColumn Header="Select Chart" >

<data:DataGridTemplateColumn.CellTemplate>

<DataTemplate>

<Button Content="Chart" Click="Bar_Chart_Button_click" ></Button>

</DataTemplate>

</data:DataGridTemplateColumn.CellTemplate>

</data:DataGridTemplateColumn>

<data:DataGridTemplateColumn Header="PieChart" >

<data:DataGridTemplateColumn.CellTemplate>

<DataTemplate>

<chartingToolkit:Chart x:Name="piechartanswers" Title="Pie Chart Answers" >

<chartingToolkit:PieSeries

IndependentValueBinding="{Binding Path=AnswerName}"

DependentValueBinding="{Binding Path=AnswerQty}">

</chartingToolkit:PieSeries>

</chartingToolkit:Chart>

</DataTemplate>

</data:DataGridTemplateColumn.CellTemplate>

</data:DataGridTemplateColumn>

 

</data:DataGrid.Columns>

</data:DataGrid>

Re: How to embed piechart in datagrid columns?

11-08-2009 7:10 PM |

 Thanks that works. Only correction I had to make was Column [5] instead of 6.

But now I want to populate the piechart with the values from the data in this grid row.

How do I get the values from the cell of the row being loaded. I tried a few ideas but not successful.

I want to get the values  in the columns 1, 2,3 and 4 of the data row. which is being loaded.

Thanks.

Re: How to embed piechart in datagrid columns?

11-09-2009 5:35 AM |

Try like below:

 

        private void AnswerGrid1_LoadingRow(object sender, DataGridRowEventArgs e)
        {
            var answer= e.Row.DataContext as Answers;
        }

  Then you can use the answer reference to collect the chart data.