Declined
Last Updated: 29 Jul 2016 11:39 by ADMIN
Will be useful for pie/donut charts in responsive web page scenarios.
Declined
Last Updated: 29 Jul 2016 12:18 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 1
Category: HtmlChart
Type: Feature Request
1

			
Declined
Last Updated: 29 Jul 2016 11:23 by ADMIN
Created by: x
Comments: 1
Category: HtmlChart
Type: Feature Request
1
In the Radchart there is a property called  activeregion where the user can add a reference to html link. When the user clicks on the chart title, he can navigate to a new web page.
This feature is not available in the new HtmlRadChart . We think that is suitable to have this function in the new HtmlRadchart. It can be even extended to axis labels of HtmlRadchart.
Thank you for your help
Best Regards
AE
Completed
Last Updated: 16 Aug 2023 06:41 by ADMIN
Release R3 2023
ADMIN
Created by: Danail Vasilev
Comments: 0
Category: HtmlChart
Type: Feature Request
1
For the time being you can set the types through the kendoWidget:
		<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
			<script>
				function pageLoad() {
					var chart = $find('<%=RadHtmlChart1.ClientID%>');
					chart._chartObject.options.series[0].type = "verticalLine";
					chart.repaint();
				}
			</script>
		</telerik:RadCodeBlock>
		<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="600px" Height="400px">
			<PlotArea>
				<Series>
					<telerik:LineSeries Name="Product 1">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="15000" />
							<telerik:CategorySeriesItem Y="23000" />
							<telerik:CategorySeriesItem Y="10000" />
						</SeriesItems>
					</telerik:LineSeries>
				</Series>
				<XAxis>
					<Items>
						<telerik:AxisItem LabelText="1" />
						<telerik:AxisItem LabelText="2" />
						<telerik:AxisItem LabelText="3" />
					</Items>
				</XAxis>
			</PlotArea>
			<ChartTitle Text="Product sales for 2011">
			</ChartTitle>
			<Legend>
				<Appearance Position="Bottom" />
			</Legend>
		</telerik:RadHtmlChart>
Completed
Last Updated: 19 Mar 2015 12:24 by ADMIN
Issue is reproducible with the following code:
        <telerik:RadHtmlChart runat="server" ID="ColumnChart1" Width="600px" Height="400px">
            <PlotArea>
                <Series>
                    <telerik:ColumnSeries Name="Product 1">
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="10" />
                            <telerik:CategorySeriesItem Y="8" />
                        </SeriesItems>
                        <LabelsAppearance Position="Center"></LabelsAppearance>
                    </telerik:ColumnSeries>
                </Series>
            </PlotArea>
        </telerik:RadHtmlChart>
For the time being you can change the labels position from "Center" to "OutsideEnd".
Completed
Last Updated: 04 May 2015 08:26 by Elena
ADMIN
Created by: Danail Vasilev
Comments: 1
Category: HtmlChart
Type: Bug Report
1
For the time being you can workaround this behavior as follows:
  1)Place all of the items within a common series.
  2)Use different colors for items in order to distinguish them from their original series.
  3)Create a custom legend if needed one.
Unplanned
Last Updated: 14 Nov 2014 07:45 by ADMIN
ADMIN
Created by: Stamo Gochev
Comments: 0
Category: HtmlChart
Type: Feature Request
1
The property will control the distance between the corresponding series items.
Completed
Last Updated: 05 Aug 2016 13:29 by ADMIN
Created by: Lee
Comments: 1
Category: HtmlChart
Type: Feature Request
1
Would be nice to be able to supply an image for the series background on bar and column charts, this would enable infographic style option to charts, i.e. displaying data for countries the bar series can be repeating national flags.

Unplanned
Last Updated: 23 Mar 2015 11:48 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 0
Category: HtmlChart
Type: Feature Request
1
For the time being the property can be set through the kendo widget:
		<script type="text/javascript">
			function pageLoad() {
				var kendoWidget = $find("<%=RadHtmlChart1.ClientID%>").get_kendoWidget();
				kendoWidget.options.series[0].color = function (e) {
					if (e.value > 20) {
						return "red";
					}
					else {
						return "green";
					}
				}
				kendoWidget.redraw();
			}
		</script>
		<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="400">
			<PlotArea>
				<Series>
					<telerik:ColumnSeries>
						<SeriesItems>
							<telerik:CategorySeriesItem Y="30" />
							<telerik:CategorySeriesItem Y="10" />
							<telerik:CategorySeriesItem Y="20" />
						</SeriesItems>
					</telerik:ColumnSeries>
				</Series>
			</PlotArea>
		</telerik:RadHtmlChart>
Completed
Last Updated: 15 Jun 2021 14:11 by ADMIN
Created by: Kasper
Comments: 1
Category: HtmlChart
Type: Feature Request
1
I would like to suggest ability to display data series in doughnut and pie charts, see attached example from Excel.

And thanks for a great Telerik experience, you make my development work very easy.
Unplanned
Last Updated: 05 May 2015 06:32 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 0
Category: HtmlChart
Type: Feature Request
1
The selection (http://demos.telerik.com/kendo-ui/chart-api/selection) can be configured through the kendo widget:
		<script>
			function pageLoad(args) {
				var kendoWidget = $find("<%=RadHtmlChart1.ClientID%>").get_kendoWidget();
				kendoWidget.options.categoryAxis.select = { from: 1, to: 2 };
				kendoWidget.bind("selectStart", onSelectStart);
				kendoWidget.bind("select", onSelect);
				kendoWidget.bind("selectEnd", onSelectEnd);

				kendoWidget.redraw();
			}

			function formatRange(e) {
				var categories = e.axis.categories;

				return kendo.format("{0} - {1} ({2} - {3})",
					e.from, e.to,
					categories[e.from],
					// The last category included in the selection is at (to - 1)
					categories[e.to - 1]
				);
			}

			function onSelectStart(e) {
				console.log(kendo.format("Select start :: {0}", formatRange(e)));
			}

			function onSelect(e) {
				console.log(kendo.format("Select :: {0}", formatRange(e)));
			}

			function onSelectEnd(e) {
				console.log(kendo.format("Select end :: {0}", formatRange(e)));
			}
		</script>
		<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="600px" Height="400px">
			<PlotArea>
				<Series>
					<telerik:ColumnSeries Name="Product 1">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="1" />
							<telerik:CategorySeriesItem Y="2" />
							<telerik:CategorySeriesItem Y="3" />
							<telerik:CategorySeriesItem Y="4" />
							<telerik:CategorySeriesItem Y="2" />
						</SeriesItems>
					</telerik:ColumnSeries>
				</Series>
				<XAxis>
					<Items>
						<telerik:AxisItem LabelText="1" />
						<telerik:AxisItem LabelText="2" />
						<telerik:AxisItem LabelText="3" />
						<telerik:AxisItem LabelText="4" />
						<telerik:AxisItem LabelText="5" />
					</Items>
				</XAxis>
			</PlotArea>
		</telerik:RadHtmlChart>
Completed
Last Updated: 14 Jun 2021 10:36 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 2
Category: HtmlChart
Type: Feature Request
1
A visual example - http://i.stack.imgur.com/zRwlo.jpg

The feature will be useful for projects that need 508 compliance.

A boolean properties will also be useful: "EnabledTexturedFill", "EnableColorAndTexturedFill"
Completed
Last Updated: 10 Jun 2021 18:30 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 1
Category: HtmlChart
Type: Feature Request
1
The chart's labels also look misaligned in rtl direction, so you can change only chart's direction to ltr with CSS:
	<style>
		.RadHtmlChart {
			direction: ltr;
		}
	</style>

		<div dir="rtl">
			some text
		<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="400">
			<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>
					<LabelsAppearance RotationAngle="33"></LabelsAppearance>
					<Items>
						<telerik:AxisItem LabelText="Item 1" />
						<telerik:AxisItem LabelText="Item 2" />
						<telerik:AxisItem LabelText="Item 3" />
					</Items>
				</XAxis>
			</PlotArea>
		</telerik:RadHtmlChart>
		</div>
Completed
Last Updated: 02 Mar 2022 13:27 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 1
Category: HtmlChart
Type: Feature Request
1
A possible workaround: 
	<form id="form1" runat="server">
		<telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
		<script>
			var ExplodeLevel = 0.15;
		</script>
		<telerik:RadHtmlChart runat="server" ID="PieChart1" Transitions="true">
			<PlotArea>
				<Series>
					<telerik:PieSeries StartAngle="90">
						<LabelsAppearance Position="OutsideEnd" DataFormatString="{0} %" />
						<TooltipsAppearance DataFormatString="{0} %" />
						<SeriesItems>
							<telerik:PieSeriesItem BackgroundColor="Purple" Exploded="true" Name="Internet Explorer" Y="18.3" />
							<telerik:PieSeriesItem BackgroundColor="Orange" Exploded="false" Name="Firefox" Y="35.8" />
							<telerik:PieSeriesItem BackgroundColor="Green" Exploded="false" Name="Chrome" Y="38.3" />
							<telerik:PieSeriesItem BackgroundColor="Blue" Exploded="true" Name="Safari" Y="4.5" />
							<telerik:PieSeriesItem BackgroundColor="Red" Exploded="false" Name="Opera" Y="2.3" />
						</SeriesItems>
					</telerik:PieSeries>
				</Series>
			</PlotArea>
			<ChartTitle Text="Browser Usage for April 2012">
			</ChartTitle>
		</telerik:RadHtmlChart>
		<script>
			var math = Math,
				dataviz = kendo.dataviz,
				Box2D = dataviz.Box2D,
				Point2D = dataviz.Point2D,
				OUTSIDE_END = "outsideEnd",
				RIGHT = "right",
				util = kendo.util,
				valueOrDefault = util.valueOrDefault;

			kendo.dataviz.PieChart.fn.reflow = function (targetBox) {
				var chart = this,
					options = chart.options,
					box = targetBox.clone(),
					space = 5,
					minWidth = math.min(box.width(), box.height()),
					halfMinWidth = minWidth / 2,
					defaultPadding = minWidth - minWidth * 0.85,
					padding = valueOrDefault(options.padding, defaultPadding),
					newBox = Box2D(box.x1, box.y1,
					box.x1 + minWidth, box.y1 + minWidth),
					newBoxCenter = newBox.center(),
					seriesConfigs = chart.seriesConfigs || [],
					boxCenter = box.center(),
					points = chart.points,
					count = points.length,
					seriesCount = options.series.length,
					leftSideLabels = [],
					rightSideLabels = [],
					seriesConfig, seriesIndex, label,
					segment, sector, r, i, c;

				padding = padding > halfMinWidth - space ? halfMinWidth - space : padding;
				newBox.translate(boxCenter.x - newBoxCenter.x, boxCenter.y - newBoxCenter.y);
				r = halfMinWidth - padding;
				c = Point2D(
					r + newBox.x1 + padding,
					r + newBox.y1 + padding
				);

				for (i = 0; i < count; i++) {
					segment = points[i];

					sector = segment.sector;
					sector.r = r;
					sector.c = c;
					seriesIndex = segment.seriesIx;
					if (seriesConfigs.length) {
						seriesConfig = seriesConfigs[seriesIndex];
						sector.ir = seriesConfig.ir;
						sector.r = seriesConfig.r;
					}

					if (seriesIndex == seriesCount - 1 && segment.explode) {
						sector.c = sector.clone().radius(sector.r * ExplodeLevel).point(sector.middle());
					}

					segment.reflow(newBox);

					label = segment.label;
					if (label) {
						if (label.options.position === OUTSIDE_END) {
							if (seriesIndex == seriesCount - 1) {
								if (label.orientation === RIGHT) {
									rightSideLabels.push(label);
								} else {
									leftSideLabels.push(label);
								}
							}
						}
					}
				}

				if (leftSideLabels.length > 0) {
					leftSideLabels.sort(chart.labelComparator(true));
					chart.leftLabelsReflow(leftSideLabels);
				}

				if (rightSideLabels.length > 0) {
					rightSideLabels.sort(chart.labelComparator(false));
					chart.rightLabelsReflow(rightSideLabels);
				}

				chart.box = newBox;
			};
		</script>
	</form>
Unplanned
Last Updated: 02 Jul 2015 07:21 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 0
Category: HtmlChart
Type: Feature Request
1

			
Completed
Last Updated: 27 Jan 2016 11:24 by ADMIN
The workaround is to convert the color names to HEX, for example through the following HexConverter() method:
ASPX:

        <telerik:RadClientExportManager runat="server" ID="RadClientExportManager1">
        </telerik:RadClientExportManager>
        <telerik:RadButton ID="RadButton1" runat="server" OnClientClicked="exportRadHtmlChart" Text="Export RadHtmlChart to PDF" AutoPostBack="false" UseSubmitBehavior="false"></telerik:RadButton>
        <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="400">
            <PlotArea>
                <Series>
                    <telerik:ColumnSeries Name="Series 1" DataFieldY="myValues" ColorField="Color">
                    </telerik:ColumnSeries>
                </Series>
            </PlotArea>
        </telerik:RadHtmlChart>
        <script>
            var $ = $telerik.$;
            function exportRadHtmlChart() {
                $find('<%=RadClientExportManager1.ClientID%>').exportPDF($(".RadHtmlChart"));
            }
        </script>

C#:

    protected void Page_Load(object sender, EventArgs e)
    {
        DataTable dt = GetData();

        for (int i = 0; i < dt.Rows.Count; i++)
        {
            //Not all Color Names can be exported
            // dt.Rows[i]["Color"] = ColorTranslator.ToHtml(GetColor(i));

            //Convert colors to HEX works properly
            dt.Rows[i]["Color"] = HexConverter(GetColor(i));
        }
        RadHtmlChart1.DataSource = dt;
        RadHtmlChart1.DataBind();
    }

    public static DataTable GetData()
    {
        DataTable dt = new DataTable("ChargeData");
        dt.Columns.Add("myValues", typeof(int));
        dt.Columns.Add("Color", typeof(string));


        dt.Rows.Add(11, "");
        dt.Rows.Add(12, "");
        dt.Rows.Add(13, "");
        dt.Rows.Add(14, "");
        dt.Rows.Add(15, "");
        dt.Rows.Add(16, "");
        dt.Rows.Add(17, "");
        dt.Rows.Add(18, "");
        dt.Rows.Add(19, "");
        dt.Rows.Add(20, "");
        return dt;
    }

    public static String HexConverter(System.Drawing.Color c)
    {
        return "#" + c.R.ToString("X2") + c.G.ToString("X2") + c.B.ToString("X2");
    }

    public static Color GetColor(int index)
    {
        return colors[index % colors.Length];
    }

    public static readonly Color[] colors =
    {
        Color.Orange,
        Color.Violet,
        Color.MediumSeaGreen,
        Color.HotPink,
        Color.Black,
        Color.DarkGoldenrod,
        Color.DarkMagenta,
        Color.Chocolate,
        Color.DarkOliveGreen,
        Color.DarkTurquoise
    };
Completed
Last Updated: 27 Jun 2016 08:10 by ADMIN
JavaScript workaround:
		<telerik:RadHtmlChart runat="server" ID="LineChart" Width="800" Height="500" Transitions="true">
			<PlotArea>
				<Series>
					<telerik:LineSeries Name="Week 15" ZIndex="0">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="15" />
							<telerik:CategorySeriesItem />
							<telerik:CategorySeriesItem Y="71" />
							<telerik:CategorySeriesItem Y="93" />
							<telerik:CategorySeriesItem Y="43" />
							<telerik:CategorySeriesItem Y="23" />
						</SeriesItems>
					</telerik:LineSeries>
				</Series>
			</PlotArea>
		</telerik:RadHtmlChart>
		<script>
			kendo.dataviz.LineChart.fn.animationPoints = function () {
				var series = this.seriesOptions;
				var points = [];
				var seriesPoints;
				var pointsIdx, idx;
				for (idx = 0; idx < series.length; idx++) {
					if (series[idx].markers.visible) {
						seriesPoints = this.seriesPoints[idx];
						for (pointsIdx = 0; pointsIdx < seriesPoints.length; pointsIdx++) {
							if (seriesPoints[pointsIdx] != null) {
								points.push(seriesPoints[pointsIdx].marker);
							}
						}
					}
				}
				return points.concat(this._segments);
			}
		</script>
Completed
Last Updated: 27 Jan 2016 11:24 by Mike
ADMIN
Created by: Danail Vasilev
Comments: 1
Category: HtmlChart
Type: Bug Report
1

			
Unplanned
Last Updated: 06 Oct 2015 12:44 by druffyw
Created by: druffyw
Comments: 0
Category: HtmlChart
Type: Feature Request
1
When using the RadHtmlChart RadarSeries the axis are default drawn like a spiders web. (see screenshot)

A common request is that axis lines for this type of graph are drawn as circles (represending more a Radar type look).

This can currently be achieved by accessing the Kendo widget like so:

$find('RadarAreaChart').get_kendoWidget().options.valueAxis.majorGridLines.type="arc";
$find('RadarAreaChart').get_kendoWidget().options.valueAxis.minorGridLines.type="arc";
$find('RadarAreaChart').get_kendoWidget().redraw();

But it would be VERY convenient (and probably very easy to implement for you guys :-) if it was a setting on the RadarSeries itself (or perhaps on the axis of the RadarSeries.

E.g. property on RadarSeries called AxisType with values (Spider or Radar).

Best Regards

Thomas