When C1Chart is bound to any data source, it uses all of the bound data as its source of data for specified series data, and presents it in graphic form on the surface of the chart as directed by the series and other chart properties. This process requires several simple steps, but requires some knowledge of the chart object model. Chart binding is explained in the documentation. However, many of our customers have faced problems while binding to the following chart types :

1. Pie Chart
2. Hilo Chart
3. HiloOpenClose Chart
4. Gantt Chart

Through this blog we'll discuss the simple steps to bind the above mentioned chart types to any data source.

Pie Charts

A Pie chart draws each series as a slice in a pie. The number of pies is the number of points in the data. Each pie displays the nth data point in each series. The key point to remember while binding Pie charts is that each ChartDataSeries is a Pie Slice. So for binding, set the datasource, create multiple chart data series and add them to SeriesList collection of C1Chart. After this, set the point data length and populate the chart with single data points in each series by setting the ChartDataSeries.Y[0]. The simple code looks as follows :

c1Chart1.ChartGroups[0].ChartType = Chart2DTypeEnum.Pie;  
c1Chart1.ChartGroups[0].ChartData.SeriesList.Clear();  
// Set the chart's datasource  
c1Chart1.DataSource = ds.Tables[0];  
ChartDataSeries cds;  

for (int i = 0; i < 10; i++)  
{  
    //Create New Series  
    cds = new ChartDataSeries();  
    cds = c1Chart1.ChartGroups[0].ChartData.SeriesList.AddNewSeries();  
    // set the point data length  
    cds.PointData.Length = 1;  
    //Populate the chart with single data point in each series  
    cds.Y[0] = ds.Tables[0].Rows[ i ].ItemArray[5];  
}

You may add few additional things like tooltips, legends, etc.

HiLo Charts

A HiLo chart combines two independent values to supply high and low data for each point in a series. HiLo charts are used primarily in financial applications to show the high and low price for a given stock. The elements of the Y and Y1 arrays in each series of a HiLo chart represent the high value, and the low value. In a HiLo chart, you can have even one chart data series. You need to set the datafields for every ChartDataArrayObject to be used for plotting data in the chart. Set the ChartDataSeries.X.DataField to the column for which the product you want to show the pricing and ChartDataSeries.Y.DataField and ChartDataSeries.Y1.DataField to the high and low price columns respectively. The simple code looks like following :

c1Chart1.ChartGroups[0].ChartType = C1.Win.C1Chart.Chart2DTypeEnum.HiLo;              // Set the chart type  
c1Chart1.ChartGroups[0].ChartData.SeriesList.Clear();                                  // Clear any existing SeriesCollection  
c1Chart1.DataSource = ds.Tables[0];                                                    // Set the chart's datasource  
ChartDataSeries cds;  
cds = new ChartDataSeries();                                                           // create 1st series  
cds = c1Chart1.ChartGroups[0].ChartData.SeriesList.AddNewSeries();  
cds.LineStyle.Thickness = 10;  
cds.LineStyle.Color = Color.Red;  
// set the datafields for every ChartDataArrayObject to be used for plotting data in the chart  
cds.X.DataField = "ProductName";  
cds.Y.DataField = "ProdPriceInMay";  
cds.Y1.DataField = "ProdPriceInAug";

HiLoOpenClose Charts

HiLoOpenClose charts are similar to HiLo charts except they combine four independent values to supply high, low, open and close data for a point in a series. In addition to showing the high and low value of a stock, the Y2 and Y3 array elements represent the stock's opening and closing price, respectively. So, apart from ChartDataSeries's X, Y, Y1 you also need to set Y2 and Y3 for open and close data columns. The simple code looks like following :

c1Chart1.ChartGroups[0].ChartType = C1.Win.C1Chart.Chart2DTypeEnum.HiLoOpenClose;      // Set the chart type  
c1Chart1.ChartGroups[0].ChartData.SeriesList.Clear();                                  // Clear any existing SeriesCollection  
c1Chart1.DataSource = ds.Tables[0];                                                    // Set the chart's datasource  
ChartDataSeries cds;  
cds = new ChartDataSeries();                                                           // create 1st series  
cds = c1Chart1.ChartGroups[0].ChartData.SeriesList.AddNewSeries();  
cds.LineStyle.Thickness = 10;  
cds.LineStyle.Color = Color.Red;  
// set the datafields for every ChartDataArrayObject to be used for plotting data in the chart  
cds.X.DataField = "ProductName";  
cds.Y.DataField = "ProdPriceInMay";  
cds.Y1.DataField = "ProdPriceInAug";  
cds.Y2.DataField = "OpenPriceInMay";  
cds.Y3.DataField = "ClosePriceInAug";

Gantt Charts

A Gantt chart is used to illustrate a timeline of various tasks and outline the critical activities to the project's completion. The Gantt chart has the following similarities to the Bar and the HiLo charts:

• Like the Bar chart, the Gantt chart uses bars, but it is commonly displayed as an inverted and reversed bar chart.
• Similar to the HiLo chart, where the elements of the Y and Y1 arrays in each series represent the high value and the low value, the Gantt chart uses the Y and Y1 elements to represent the start and finish time of a task.

A Gantt chart clearly illustrates a timeline in the following ways:

• Activities/Tasks The activities/tasks are displayed along the left side of the chart and a timeline is shown at the top or bottom of the chart.
• Task Duration The duration of each project's task is represented as a bar. The beginning of the bar indicates the start time of the activity or task. The end of the bar indicates the finish or completion time of the activity or task.

While binding this chart type, set the C1Chart's DataSource to the desired datatable and then add the multiple chart data series that are required. For binding, set the ChartDataSeries.X to the Task, ChartDataSeries.Y and ChartDataSeries.Y1 to Start Date and End date respectively. Also, remember that the Y and Y1 are bound to arrays or we can populate the values manually. In our code, we are binding them manually as :

c1Chart1.ChartGroups[0].ChartType = Chart2DTypeEnum.Gantt;            // Set the chart type  
c1Chart1.ChartGroups[0].ChartData.SeriesList.Clear();                 // Clear any existing SeriesCollection  
c1Chart1.ChartGroups[0].Gantt.Width = 80;                             // set the bar width for Gantt chart  
c1Chart1.DataSource = ds.Tables[0];                                   // Set the chart's datasource  
ChartDataSeries cds;  
for (int i = 0; i < 10; i++)  
{  
    cds = new ChartDataSeries();                                       // create new series  
    cds = c1Chart1.ChartGroups[0].ChartData.SeriesList.AddNewSeries();  
    cds.PointData.Length = 1;                                          // set the point data length  
    cds.Y1.Length = 1;  
    cds.X.DataField = "CustomerID";                                    // set the data fied for the X Axis  
    cds.Y[0] = ds.Tables[0].Rows[ i ].ItemArray[3];                      // populate the chart with single  
    cds.Y1[0] = ds.Tables[0].Rows[ i ].ItemArray[5];                     // data point in each series  
}

Please refer to the attached sample with detailed implementation along with few other settings like Chart Titles, Tooltips, Legends, etc. Download Sample