Drawing Data-Driven Line Charts using Infragistics

1. Add a reference to the Infragistics charting controls in the ASPX page

<%@ Register assembly="Infragistics35.WebUI.UltraWebChart.v8.2, Version=8.2.20082.1000, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" namespace="Infragistics.WebUI.UltraWebChart" tagprefix="igchart" %>

<%@ Register assembly="Infragistics35.WebUI.UltraWebChart.v8.2, Version=8.2.20082.1000, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" namespace="Infragistics.UltraChart.Resources.Appearance" tagprefix="igchartprop" %>

<%@ Register assembly="Infragistics35.WebUI.UltraWebChart.v8.2, Version=8.2.20082.1000, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" namespace="Infragistics.UltraChart.Data" tagprefix="igchartdata" %>

2. Add a data source for the charting data

<asp:SqlDataSource ID="dsChartActivity" runat="server" ConnectionString="<%$ ConnectionStrings:pft_app %>" SelectCommand="SELECT CONVERT(varchar(5), phys_dt, 101) AS Date,

hgt_in AS Height, wt_lb AS Weight, bmi As BMI FROM tbl_ind_htwt WHERE pn_id=@pn_id ORDER BY phys_dt">

<SelectParameters> <asp:SessionParameter Name="pn_id" SessionField="pn_id" /> </SelectParameters> </asp:SqlDataSource>

3. Add an UltraChart control (fig. 1) to the Web form

Fig. 1; UltraChart control

4. Select the chart control in Design view (fig. 2) and click the arrow at the top-right. A settings dialog (fig. 3) will be displayed.

a. Begin the Chart Wizard or select the settings and properties manually

Fig. 2; Chart control in design view

Fig. 3; Chart settings dialog