Wednesday, 9 December 2015

Telerik - Create RadHTML Chart Dynamically using C#

There are three simple steps:
 
1. Declare asp panel in your .aspx page:
<asp:Panel ID="pnlChart" runat="server"></asp:Panel>
 

3. copy paste following in your code behind class:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI;
using System.Drawing;
using System.Data;

public partial class YourPage: Page
{

 protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            LoadSampleChart();
        }
    }


private void LoadSampleChart()
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("Sale", typeof(Decimal));
        dt.Columns.Add("Returned", typeof(Decimal));
        dt.Columns.Add("SaleDate", typeof(DateTime));

        DataRow dr1 = dt.Rows.Add(); dr1["Sale"] = 85.00; dr1["Returned"] = 15.00; dr1["SaleDate"] = "2015/12/01"; //dt.Rows.Add(dr1);
        DataRow dr2 = dt.Rows.Add(); dr2["Sale"] = 50.00; dr2["Returned"] = 50.00; dr2["SaleDate"] = "2015/12/02"; //dt.Rows.Add(dr2);
        DataRow dr3 = dt.Rows.Add(); dr3["Sale"] = 25.00; dr3["Returned"] = 75.00; dr3["SaleDate"] = "2015/12/03"; //dt.Rows.Add(dr3);

        RadHtmlChart rdChart = new RadHtmlChart();
        rdChart.DataSource = dt;
        rdChart.Width = Unit.Pixel(1000);
        rdChart.Height = Unit.Pixel(800);
        rdChart.Style.Value = "margin: 0 auto";
        rdChart.PlotArea.XAxis.TitleAppearance.Text = "Sale Dates";

        rdChart.PlotArea.XAxis.LabelsAppearance.DataFormatString = "{0:dd-MMM-yy}";
        rdChart.PlotArea.XAxis.LabelsAppearance.TextStyle.Padding = "7px";
        rdChart.PlotArea.YAxis.MaxValue = 1;
        rdChart.Transitions = true;

        rdChart.Legend.Appearance.Position = Telerik.Web.UI.HtmlChart.ChartLegendPosition.Bottom;

        AddSeries("Sale", "X", rdChart, Color.Green, "Sale");
        AddSeries("Returned", "X", rdChart, Color.Red, "Returns");

        rdChart.PlotArea.XAxis.DataLabelsField = "SaleDate";
        rdChart.DataBind();

        pnlChart.Controls.Add(rdChart);
    }


 private void AddSeries(string YDataFieldName, String groupName, RadHtmlChart objChart, Color seriesColor, String legendName)
    {
        BarSeries objSeries = new BarSeries();
        objSeries.Appearance.FillStyle.BackgroundColor = seriesColor;
        objSeries.StackType = Telerik.Web.UI.HtmlChart.Enums.HtmlChartStackType.Stack100;
        objSeries.DataFieldY = YDataFieldName;
        objSeries.GroupName = groupName;
        objSeries.Name = legendName;
        objSeries.LabelsAppearance.Position = Telerik.Web.UI.HtmlChart.BarColumnLabelsPosition.Center;
        objSeries.LabelsAppearance.DataFormatString = "{0}%";
       
        objChart.PlotArea.Series.Add(objSeries);

    } 
}

Here is the output:

No comments:

Post a Comment