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