Pages

Wednesday 30 May 2012

Dynamically bind Telerik RAD Chart

Add Telerik chart in html source view :

<telerik:RadChart ID="rdChartSales" runat="server">
<Appearance Border-Visible="false"></Appearance>
<telerik:RadChart>
 


In code behind write the following code :
//clear series

rdChartSales.Clear();
rdChartSales.Series.Clear();
rdChartSales.PlotArea.XAxis.Clear();



//set height, width and apperance of chart

rdChartSales.Height = ChartHeight;
rdChartSales.Width = ChartWidth;
rdChartSales.Appearance.Dimensions.Height = ChartHeight;
rdChartSales.Appearance.Dimensions.Width = ChartWidth;
rdChartSales.ChartTitle.Appearance.Visible =
rdChartSales.Appearance.Border.Visible =
rdChartSales.PlotArea.Appearance.Dimensions.Width = 150;
rdChartSales.PlotArea.Appearance.Dimensions.Height = 120;
  




//set apperance of series
ChartSeries() chartSeries1 = new ChartSeries();
chartSeries1.Type = ChartSeriesType.StackedBar; chartSeries1.Appearance.TextAppearance.Visible = true;
chartSeries1.Appearance.FillStyle.MainColor = Color.Black;
chartSeries1.Appearance.FillStyle.SecondColor = Color.Red;


//add series to chart

rdChartSales.Series.Add(chartSeries1);
//add y axis range

rdChartSales.PlotArea.YAxis.AddRange(0,4,1);

//Add XAxis Periods
string[] xAxisArray = new string[] { "Bar1", "Bar2", "Bar3", "Bar4" };
foreach (string item in xAxisArray)
{
item1 = new ChartAxisItem(item);
rdChartSales.PlotArea.XAxis.Items.Add(item1);
}


//set values for chart series

rdChartSales.Series[0].SetValues(Target);