Unplanned
Last Updated: 26 May 2023 08:35 by ADMIN

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);
}

Declined
Last Updated: 31 Aug 2022 12:33 by ADMIN

Test Environment:

OS: Windows_11
Version: 21H2
OS Build: 22000.795

Browser: Version 103.0.1264.71 (Official Build) (64-bit)

Voice access: Voice Access

Repro Steps:

1. Open URL: https://docs.telerik.com/devtools/aspnet-ajax/controls/chart/understanding-radchart-types/bar-charts page in Edge Browser.

2. Navigate the Graph under the Bar chart section.

3. Observe that Voice Access Numbers are not showing for bar graphs in reports.

Actual Results:

Voice Access Numbers are not showing for bar graphs.

Expected Results:

Voice Access Numbers should be showing for bar graphs.

Completed
Last Updated: 26 Apr 2022 13:31 by ADMIN
Release R2 2022
Created by: Stan
Comments: 0
Category: HtmlChart
Type: Feature Request
0

Currently, the HighlightAppearance of the Series does not have a property that controls the InactiveOpacity:

As a temporary workaround, this can be set through the options in the OnKendoWidgetInitializing event:

<script>
    function OnKendoWidgetInitializing(sender, args) {
        var series = args.series[0]
        series.highlight = series.highlight || {};
        series.highlight.inactiveOpacity = 0.2
    }
</script>
<telerik:RadHtmlChart ID="RadHtmlChart5" runat="server" BorderColor="Fuchsia" BorderStyle="Solid" BorderWidth="1px">
    <ClientEvents OnKendoWidgetInitializing="OnKendoWidgetInitializing" />
    <PlotArea>

        <Series>
            <telerik:PieSeries StartAngle="90">
                <%-- This is how it should be configured after the feature request --%>
                <%--<HighlightAppearance InactiveOpacity="0.2" />--%>

                <SeriesItems>
                    <telerik:PieSeriesItem Name="Slice1" Y="60"></telerik:PieSeriesItem>
                    <telerik:PieSeriesItem Name="Slice2" Y="40"></telerik:PieSeriesItem>
                </SeriesItems>
            </telerik:PieSeries>
        </Series>
    </PlotArea>
</telerik:RadHtmlChart>

Unplanned
Last Updated: 28 Jan 2022 15:53 by ADMIN
When there is no data in the source of the chart, the plot area should be displaying a message in predefined format. Something similar to what we have in the Grid and other controls.
Unplanned
Last Updated: 12 Oct 2021 15:58 by ADMIN
Created by: Bob
Comments: 0
Category: HtmlChart
Type: Bug Report
1

The charts starts to perform zooming when the user pans with one finger in touch devices.

Steps to reproduce:

1. Open the following demo in a touch device (or Chrome simulator)

    https://demos.telerik.com/aspnet-ajax/htmlchart/examples/functionality/pan-zoom/defaultcs.aspx

2. Start panning until the zooming issue occurs

 

Video: http://somup.com/cr6lo73b73 

Completed
Last Updated: 13 Sep 2021 17:04 by ADMIN
Created by: A
Comments: 1
Category: HtmlChart
Type: Bug Report
1

Problem appers with x-axis if you try to zoom. 

Chart without zoom: https://drive.google.com/file/d/1Nem_NctJN5WtzypS8JgZTtIuAARGFQbd/view?usp=sharing

Chart with some zoom: https://drive.google.com/file/d/1TRJZX3FI52YXyuWgB_kpkMTWWXKecVC_/view?usp=sharing

Project included.

Unplanned
Last Updated: 17 Sep 2020 09:55 by ADMIN
Created by: Paul
Comments: 0
Category: HtmlChart
Type: Feature Request
0

I have an htmlchart using a scatter series and a radgrid, on the grid row hover event I call the below javascript function to show the relevant tooltip for the plotted point matching the id of the grid row.

        function showToolTip(eventArgs, chart, plotXvalue, plotYvalue) {
            var chart = $telerik.findControl(document, chart);
            var widget = chart.get_kendoWidget();

            widget.showTooltip(function (point) {
                var gridID = eventArgs.getDataKeyValue("Id");
                var key = "ID";

                var mypoint = point.value.x == eventArgs.getDataKeyValue(plotXvalue) && point.value.y == eventArgs.getDataKeyValue(plotYvalue) && point.dataItem[key] == gridID;

                if (!mypoint) {
                    widget.hideTooltip();
                }
                return mypoint;
            })
        };

 

This all works well, however I would like to also highlight the plotted point that the tooltip relates to, the same effect as the mouse over on the point within the chart.

Completed
Last Updated: 17 Oct 2020 16:02 by ADMIN
Release R3 2020
Created by: rumen jekov
Comments: 0
Category: HtmlChart
Type: Feature Request
0
Add border options for customizing the Series Tooltip.
Unplanned
Last Updated: 30 Jan 2020 13:35 by ADMIN
Created by: Mikael
Comments: 0
Category: HtmlChart
Type: Feature Request
1
Add all ClientSettings to the values saved in the HtmlChart's ViewState.
Completed
Last Updated: 15 Apr 2020 08:45 by ADMIN
Release R1 2020 SP1
Some HtmlChart appearance properties are not fully applied in R1 2020 (e.g. XAxis.MajorGridlines="false", ChartTitle.Appearance.TextStyle.Font, etc.)
 
Temporary workaround:
        <script>
            var datavizThemes = kendo.dataviz.ui.themes || {};
            Telerik.Web.UI.RadHtmlChart.prototype.applyTheme = function () {
                var that = this,
                 kendoWidget = that.get_kendoWidget(),
                 themeName = kendoWidget.options.theme,
                 theme = datavizThemes[themeName];
                if (theme && theme.chart) {
                    kendoWidget.setOptions(that._getTheme());
                }
            }
        </script>
Completed
Last Updated: 20 Jun 2020 17:08 by ADMIN
Created by: Doug
Comments: 1
Category: HtmlChart
Type: Bug Report
1
The XAxis.MajorGridLines of the chart YAxis are always visible as of 2020.1.114
 
Code to reproduce the issue:
<telerik:RadHtmlChart ID="RequestsMonthChart" runat="server" Height="500">
    <ClientEvents OnLoad="chartLoad" />
    <PlotArea>
        <Series>
            <telerik:ColumnSeries Name="Series 1">
                <SeriesItems>
                    <telerik:CategorySeriesItem Y="30" />
                    <telerik:CategorySeriesItem Y="10" />
                    <telerik:CategorySeriesItem Y="20" />
                </SeriesItems>
            </telerik:ColumnSeries>
        </Series>
        <XAxis Name="Year" DataLabelsField="Month">
            <LabelsAppearance RotationAngle="-35" />
            <MajorGridLines Visible="false" />
            <MinorGridLines Visible="false" />
            <Items>
                <telerik:AxisItem LabelText="Item 1" />
                <telerik:AxisItem LabelText="Item 2" />
                <telerik:AxisItem LabelText="Item 3" />
            </Items>
        </XAxis>
        <YAxis>
            <MajorGridLines Visible="false" />
            <MinorGridLines Visible="false" />
        </YAxis>
    </PlotArea>
    <Legend>
        <Appearance Visible="true" Position="Bottom" Width="500" />
    </Legend>
    <ChartTitle Text="Requests Received by Month" />
</telerik:RadHtmlChart>
Unplanned
Last Updated: 28 Jan 2020 15:20 by ADMIN

We want the Kendo chart widget (RadHtmlChart actually) to blend in with the webpage we use it in. In this page, we use font-weight 300. Since there is no way to specify the font-weight in the chart, we have had to use a hack to specify it:

 

            function chartLoad(chart, args) {
                chart.get_kendoWidget().setOptions({ title: { font: "20px sans-serif; font-weight: 300" }});
            }

 

This is not only a clumpsy hack, but it also make use of a custom skin impossible (for setting the font).

Unplanned
Last Updated: 13 Nov 2019 08:42 by ADMIN
The font size and family set through the RadHtmlChartSkins.js file are not applied to RadHtmlChart. They are overwritten by the default font styles set in the code behind of the chart wrapper.
Unplanned
Last Updated: 08 Apr 2020 15:28 by ADMIN

Hello, 

 

I would like to highlight a GridLine based on a Labelled item when I have implemented skip in the HTML Chart. 

 

Essentially, I have a series of days and would like to step the labels on a weekly basis. At each step I would like to highlight the GridLine associated with the label.

Unplanned
Last Updated: 14 Jun 2021 08:06 by ADMIN
Created by: Scott
Comments: 1
Category: HtmlChart
Type: Feature Request
1

Label position dynamic. I'm currently using "InsideBase", but if those values are so small it's not very visible, so i'd like place those on the outside end.

Declined
Last Updated: 11 Aug 2020 17:58 by ADMIN

Please refer to the ticket for more details.

 

Unplanned
Last Updated: 05 Mar 2019 12:36 by ADMIN
The memory usage consumed by RadHtmlChart increase on each AJAX update and is never released.
Video:
Completed
Last Updated: 30 Oct 2020 21:30 by ADMIN
My objective is to compare product revenue over time. This I would like to achieve using data binding. I do not have information of product names or have the product names as columns. My data table structure is having three columns:

Date
Product Name
Revenue

This I should simply be able to achieve using data binding to a table with above three columns. 
In result I expect each of the Product Names to appear as independent series with revenues plotted on different dates.

A similar graph is displayed in the Line Chart documentation for RadHtmlChart.
https://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/chart-types/line-chart
Declined
Last Updated: 21 Mar 2019 05:51 by ADMIN
Hi,

MissingValue set to Gap or Zero doesn't work in RadHtmlChart with ScatterLineSeries.

Interpolation is done instead.

              <telerik:RadHtmlChart runat="server">
                    <PlotArea>
                        <Series>
                            <telerik:ScatterLineSeries Name="Test" DataFieldX="XValue"
                                DataFieldY="YValue" MissingValues="Gap">
                                <SeriesItems>
                                    <telerik:ScatterSeriesItem X="1" Y="8" />
                                    <telerik:ScatterSeriesItem X="2" Y="9" />
                                    <telerik:ScatterSeriesItem X="3" Y="4" />
                                    <telerik:ScatterSeriesItem X="4" Y="6" />
                                    <telerik:ScatterSeriesItem X="5" Y="7" />
                                    <telerik:ScatterSeriesItem X="8" Y="1" />
                                    <telerik:ScatterSeriesItem X="9" Y="5" />
                                    <telerik:ScatterSeriesItem X="10" Y="4" />
                                </SeriesItems>
                            </telerik:ScatterLineSeries>
                        </Series>
                    </PlotArea>
                </telerik:RadHtmlChart>


The workaround described in the following link doesn't work either :
https://feedback.telerik.com/Project/108/Feedback/Details/44399-fix-the-functionality-of-the-missingvalue-property-when-set-to-gap-in-areaserie

Can you please fix this bug ?

Thanks and regards.
Completed
Last Updated: 27 Feb 2024 11:47 by Atanas2
Release R3 2023
The contrast between the colors for the background and the text in the Tooltip of the Chart series is very low (dark background and black text). https://www.screencast.com/t/fhx6937j

The problem is most obvious in the Outlook, Simple, Web20 and Sunset skins. 

Workaround would be  setting the Color property for the ToolTipAppearance to White

1 2 3 4 5 6