Populating a chart inside a GridView in ASP.NET

Question

I have a GridView control where I aneed to show some information regarding some important variable of mine. These variables vary in time and I would like to plot their trend in the table as the last column using a Chart control.

Here's a generic view of the code:

<asp:GridView runat="server" ID="Variables_GridView" CssClass="grid" AutoGenerateColumns="false" Width="100%">
   <FooterStyle BackColor="White" ForeColor="#000066" />
   <HeaderStyle CssClass="gridheader" />
   <RowStyle ForeColor="#000066" />
   <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
   <SortedAscendingCellStyle BackColor="#F1F1F1" />
   <SortedAscendingHeaderStyle BackColor="#007DBB" />
   <SortedDescendingCellStyle BackColor="#CAC9C9" />
   <SortedDescendingHeaderStyle BackColor="#00547E" />
   <Columns>
      <asp:BoundField DataField="VariableName" HeaderText="Name" />
      <asp:BoundField DataField="VariableType" HeaderText="Type" />
      <asp:BoundField DataField="VariableDescription" HeaderText="Description" />
      <asp:TemplateField HeaderText="Latest values">
         <ItemTemplate>
            <asp:Chart ID="Values_Chart" runat="server" Width="150" Height="50">
               <Series>
                  <asp:Series Name="Values_Series" XAxisType="Primary" XValueType="Int32" ChartType="Line"></asp:Series>
               </Series>
               <ChartAreas>
                  <asp:ChartArea Name="Values_ChartArea"></asp:ChartArea>
               </ChartAreas>
            </asp:Chart>
         </ItemTemplate>
      </asp:TemplateField>
   </Columns>
</asp:GridView>

In my codebehind you can find this type, the one used for mapping properties (the ones I specified):

public class VariableRepresentation {

        private string variableName;

        private string variableType;

        private string variableDescription;

        private float[] variableValues;

        public string VariableName {
            get { return this.variableName; }
            set { this.variableName = value; }
        }

        public string VariableType {
            get { return this.variableType; }
            set { this.variableType = value; }
        }

        public string VariableDescription {
            get { return this.variableDescription; }
            set { this.variableDescription = value; }
        }

        public float[] VariableValues {
            get { return this.variableValues; }
            set { this.variableValues = value; }
        }

        public VariableRepresentation(string name, string type, string description) {
            this.variableName = name;
            this.variableType = type;
            this.variableDescription = description;
        }

        public VariableRepresentation(string name, string type, string description, float[] initialValues) : this(name, type, description) {
            this.variableValues = initialValues;
        }

    }

OK!

In the loading method of this page I have the following:

protected void Page_Load(object sender, EventArgs e) {
   VariableRepresentation[] vars = new VariableRepresentation[6];
   vars[0] = new VariableRepresentation("Variable 1", 
      "Type 1", "A generic variable", new float[] { 11, 12, 13, 14, 11, 20 });
   vars[1] = new VariableRepresentation("Variable 2", 
      "Type 2", "A generic variable", new float[] { 11, 12, 13, 14, 11, 20 });
   vars[2] = new VariableRepresentation("Variable 3", 
      "Type 3", "A generic variable", new float[] { 11, 12, 13, 14, 11, 20 });
   vars[3] = new VariableRepresentation("Variable 4", 
      "Type 1", "A generic variable", new float[] { 11, 12, 13, 14, 11, 20 });
   vars[4] = new VariableRepresentation("Variable 5", 
      "Type 2", "A generic variable", new float[] { 11, 12, 13, 14, 11, 20 });
   vars[5] = new VariableRepresentation("Variable 6", 
      "Type 3", "A generic variable", new float[] { 11, 12, 13, 14, 11, 20 });
   this.Variables_GridView.DataSource = vars;
   this.Variables_GridView.DataBind();
}

Well, as you could imagine, the output is a table but my chart is empty. How can I act in the .aspx file, in the xhtml markup, the first code I showed, to let this happen?

I suppose I shoild place in the template field, some data binding expression, but I do not know what to place there....

Could you help me please?

Thankyou

PS: Please note that I didn't provide a solution here, the matter is that I do not know how to connect the data to the chart, actually it is correct that the charts (one per table line) show nothing, because I did not specify any binding expressions in the aspx page nor a properly piece of code in codebehind.

Answer 1

I don't know if there is a convenient way of Binding Data into Chart Series directly in XHTML? but perhaps you could just create an event on GridView.RowDataBound find the Chart Control there and then append the Data to the chart series?