Unplanned
Last Updated: 26 May 2023 08:35 by ADMIN
abu
Created on: 25 May 2023 13:37
Category: HtmlChart
Type: Feature Request
0
Help to change the RadChart To RadHtmlChart for line chart series

Hi , help to change the RadChart To RadHtmlChart for line chart series , below is the existing code used RadChart . i need to update to RadHtmlChart

hartAnalysis_BLL objBLL = new ChartAnalysis_BLL();
DataTable dt = objBLL.GetMonthlySSMTotalQuantityImported(arrParameters);

// Create new chart
RadChart2.ChartTitle.TextBlock.Appearance.TextProperties.Font = new System.Drawing.Font(RadChart2.ChartTitle.TextBlock.Appearance.TextProperties.Font.FontFamily, 11, System.Drawing.FontStyle.Bold);
RadChart2.ChartTitle.TextBlock.Text = "Extended Monthly SSM Total Quantity Imported \n(" + ssm[0] + ")";
RadChart2.Width = AppConstants.CONST_CHART_WIDTH;
RadChart2.ChartTitle.Visible = true;
RadChart2.Chart.DefaultType = ChartSeriesType.Line;
RadChart2.PlotArea.Appearance.Dimensions.Margins.Left = Telerik.Charting.Styles.Unit.Percentage(10);
RadChart2.PlotArea.Appearance.Dimensions.Margins.Right = Telerik.Charting.Styles.Unit.Percentage(15);
RadChart2.PlotArea.Appearance.Dimensions.Margins.Bottom = Telerik.Charting.Styles.Unit.Percentage(30);

RadChart2.DataManager.ValuesXColumn = "Date";
RadChart2.DataManager.ValuesYColumns = new string[1] { "SSM Quantity" };
RadChart2.IntelligentLabelsEnabled = true;
RadChart2.DataSource = dt;
RadChart2.DataBind();
RadChart2.Skin = AppConstants.CONST_TELERIK_CHARTSKIN;

RadChart2.PlotArea.XAxis.Clear();
RadChart2.PlotArea.XAxis.IsZeroBased = false;
RadChart2.PlotArea.XAxis.AutoScale = false;
RadChart2.PlotArea.XAxis.Appearance.ValueFormat = ChartValueFormat.ShortDate;
RadChart2.PlotArea.XAxis.Appearance.CustomFormat = "MMM yy";
RadChart2.PlotArea.XAxis.AxisLabel.Visible = true;
RadChart2.PlotArea.XAxis.AxisLabel.TextBlock.Text = "Month \n(" + AppFunctions.GetDisclaimer() + ")";
RadChart2.PlotArea.XAxis.AxisLabel.TextBlock.Appearance.TextProperties.Color = System.Drawing.Color.Black;
RadChart2.PlotArea.XAxis.Appearance.LabelAppearance.RotationAngle = -45;

RadChart2.PlotArea.YAxis.AxisLabel.Visible = true;
RadChart2.PlotArea.YAxis.AxisLabel.TextBlock.Text = "Total Quantity of SSM Imported (" + dt.Rows[0]["UOM"] + ")";
RadChart2.PlotArea.YAxis.AxisLabel.TextBlock.Appearance.TextProperties.Color = System.Drawing.Color.Black;

RadChart2.Series.GetSeries(0).Appearance.PointMark.Dimensions.Width = 1;
RadChart2.Series.GetSeries(0).Appearance.PointMark.Dimensions.Height = 1;
RadChart2.Series.GetSeries(0).Appearance.PointMark.FillStyle.MainColor = System.Drawing.Color.Black;
RadChart2.Series.GetSeries(0).Appearance.PointMark.FillStyle.FillType = FillType.Solid;
RadChart2.Series.GetSeries(0).Appearance.PointMark.Visible = true;
RadChart2.Series.GetSeries(0).Appearance.LineSeriesAppearance.Color = System.Drawing.Color.Orange;
RadChart2.Series.GetSeries(0).Appearance.LineSeriesAppearance.Width = 3;

int intYear = dt_SelDateFrom.Year;
int intMonth = dt_SelDateFrom.Month;
DateTime start = new DateTime(intYear, intMonth, 1);
TimeSpan ts = dt_SelDateTo - dt_SelDateFrom;
int intMthDiff = Convert.ToInt32(Math.Ceiling((ts.TotalDays / 30)));

for (int i = 0; i < intMthDiff; i++)
{
    ChartAxisItem item = new ChartAxisItem();
    item.Value = (decimal)start.AddMonths(i).ToOADate();
    RadChart2.PlotArea.XAxis.AddItem(item);
}

DataTable dt_avg = objBLL.GetSSMTotalImportedLastYearAverage(arrParameters);

// Define chart series
ChartSeries avg_series = new ChartSeries();
avg_series.Appearance.LabelAppearance.Visible = false;
avg_series.Name = "Last Year Average";
avg_series.Type = ChartSeriesType.Line;
avg_series.Appearance.PointMark.Dimensions.Width = 1;
avg_series.Appearance.PointMark.Dimensions.Height = 1;
avg_series.Appearance.PointMark.FillStyle.MainColor = System.Drawing.Color.Black;
avg_series.Appearance.PointMark.FillStyle.FillType = FillType.Solid;
avg_series.Appearance.PointMark.Visible = true;
avg_series.Appearance.LineSeriesAppearance.Color = System.Drawing.Color.Red;

foreach (DataRow row in dt_avg.Rows)
{
    foreach (DataColumn col in dt_avg.Columns)
    {
        Decimal dec_data = Convert.ToDecimal(row[col]);
        Double dbl_data = Convert.ToInt32(dec_data);
        avg_series.AddItem(dbl_data);
    }
}

RadChart2.AddChartSeries(avg_series);

ArrayList arrParameterBaseline = new ArrayList();
arrParameterBaseline.Add(dt_SelBaselineFrom);
arrParameterBaseline.Add(dt_SelBaselineTo);
arrParameterBaseline.Add(dt_SelSSMSeqID);
SqlDataReader dr_baseline = objBLL.GetSSMTotalImportedBaseline(arrParameterBaseline);

ChartSeries baseline_series = new ChartSeries();
baseline_series.Appearance.LabelAppearance.Visible = false;
baseline_series.Name = "Baseline Average";
baseline_series.Type = ChartSeriesType.Line;
baseline_series.Appearance.PointMark.Dimensions.Width = 1;
baseline_series.Appearance.PointMark.Dimensions.Height = 1;
baseline_series.Appearance.PointMark.FillStyle.MainColor = System.Drawing.Color.Black;
baseline_series.Appearance.PointMark.FillStyle.FillType = FillType.Solid;
baseline_series.Appearance.PointMark.Visible = true;
baseline_series.Appearance.LineSeriesAppearance.Color = System.Drawing.Color.Chartreuse;

Double dbl_baseline = 0;

if (dr_baseline == null)
{
    dbl_baseline = 0;
}
else
{
    try
    {
        while (dr_baseline.Read())
        {
            if (dr_baseline["TotalImportedBaseline"] == DBNull.Value)
                dbl_baseline = 0;
            else
            {
                Decimal dec_baseline = dr_baseline.GetDecimal(dr_baseline.GetOrdinal("TotalImportedBaseline"));
                dbl_baseline = Convert.ToDouble(dec_baseline);
            }
        }
    }
    catch (Exception ex)
    {
        AppFunctions.SetMessageError(this.Page, AppConstants.CONST_ERROR_LOAD_CHART);
        AppFunctions.ErrorLog(ex);
    }
    finally
    {
        if (dr_baseline != null)
        {
            dr_baseline.Close();
            dr_baseline.Dispose();
        }
    }
}

for (int i = 0; i < intMthDiff; i++)
{
    baseline_series.AddItem(dbl_baseline);
}

RadChart2.AddChartSeries(baseline_series);

Panel1.Controls.Add(RadChart2);

}
catch (Exception ex)
{
    AppFunctions.SetMessageError(this.Page, AppConstants.CONST_ERROR_LOAD_CHART);
    AppFunctions.ErrorLog(ex);
}

1 comment
ADMIN
Rumen
Posted on: 26 May 2023 08:35

Hi Abu,

Please review the following RadChart to RadHtmlChart migration articles: Migrate Functionalities - Features and Series Types ParityMigrating SeriesMigrating AxesMigrating Date AxesMigrating DatabindingFeatures parity.

You can find an example of how to define a line chart series in the following resources:

It is also mandatory to upgrade your version of Telerik UI for ASP.NET AJAX to at least 2020.1.114 or better the latest one because of the known vulnerabilities in the earlier versions of the suite. See this article for example https://docs.telerik.com/devtools/aspnet-ajax/knowledge-base/common-allows-javascriptserializer-deserialization

Regards,
Rumen
Progress Telerik

Heads up! Telerik UI for ASP.NET AJAX versions for .NET 3.5 and 4.0 are retired. Progress will continue shipping assemblies compatible with .NET 4.5 and later. See whether this affects your apps in this article.