Completed
Last Updated: 05 Jun 2015 08:32 by ADMIN
ADMIN
Created by: Marin Bratanov
Comments: 3
Category: HtmlChart
Type: Bug Report
0

			
Completed
Last Updated: 18 May 2015 12:57 by JAIME
Currently it is not possible to add null-able series items in RadHtmlChart in the markup or programmatically. If a null-able item is added it is omitted and is replaced by the next series item from the current Series. The workaround is to either data bound the chart to a data source or convert the null-able values to zeros:

C#:

        decimal? nullValue = null;
        if (nullValue == null)
        {
            nullValue = 0;
        }

        ColumnSeries colSeries2 = RadHtmlChart1.PlotArea.Series[1] as ColumnSeries;
        colSeries2.SeriesItems.Add(39);
        colSeries2.SeriesItems.Add(nullValue);
        colSeries2.SeriesItems.Add(3);
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: 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.
Won't Fix
Last Updated: 30 Apr 2015 12:33 by Elena
For the time being the following workaround can be used:

    <style>
        .k-chart .k-tooltip, .k-sparkline .k-tooltip, .k-stockchart .k-tooltip {
            background-image: url("//:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAWCAYAAADAQbwGAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADNJREFUeNpi/P//vwMDFQELEP8beQb+HTWQYgP/DHoD/466cAR4edRAyg38P6hLbIAAAwCnWhhVsxvdCAAAAABJRU5ErkJggg==") !important;
        }
    </style>
Unplanned
Last Updated: 29 Apr 2015 07:06 by Michael
Created by: Michael
Comments: 0
Category: HtmlChart
Type: Feature Request
4
There is no axis click event. If we expose such event we can give custom info to the client about this axis. For the time being the event can the attached through the chartObject:
		<script>
			function pageLoad() {
				var chart = $find("<%=ColumnChart1.ClientID%>");
				chart._chartObject.bind("axisLabelClick", chart_axisLabelClick);
			}
			function chart_axisLabelClick(e) {
				alert(e.value);
			}
		</script>
		<telerik:RadHtmlChart runat="server" ID="ColumnChart1" Width="600px" Height="400px">
			<PlotArea>
				<Series>
					<telerik:ColumnSeries Name="Product 1">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="15000" />
							<telerik:CategorySeriesItem Y="23000" />
							<telerik:CategorySeriesItem Y="10000" />
						</SeriesItems>
					</telerik:ColumnSeries>
				</Series>
				<XAxis>
					<Items>
						<telerik:AxisItem LabelText="Item 1" />
						<telerik:AxisItem LabelText="Item 2" />
						<telerik:AxisItem LabelText="Item 3" />
					</Items>
				</XAxis>
			</PlotArea>
			<ChartTitle Text="Product sales for 2011">
			</ChartTitle>
			<Legend>
				<Appearance Position="Bottom" />
			</Legend>
		</telerik:RadHtmlChart>
Completed
Last Updated: 27 Apr 2015 15:30 by Elena
A JS error is thrown when a RadHtmlChart is databound and there are series items with null values that correspond to DateTime values on the XAxis. 

The issue could be handled in the following way:
Check if there is a series item's value that is null and if this is the case then do not add it to the datasource
Completed
Last Updated: 27 Apr 2015 12:04 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 3
Category: HtmlChart
Type: Bug Report
3
Currently a long legend in RadHtmlChart overflows the PlotArea under IE, while in the rest browsers it is cut. The workaround is to hide the legend and create a custom one in a styled div (e.g. KendoUI demonstrates such an example here - http://demos.kendoui.com/dataviz/bubble-charts/index.html)
Completed
Last Updated: 21 Apr 2015 13:24 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 2
Category: HtmlChart
Type: Bug Report
1
Issue will be fixed for Q3 2014 release.
For the time being you can manually set color to the selection hint:
CSS:
	<style>
		.k-chart .k-navigator-hint .k-tooltip {
			color: black;
		}
	</style>
Completed
Last Updated: 21 Apr 2015 10:38 by ADMIN
Reproduction steps - Run the code below and click Show Chart - chart is not displayed.
ASPX:
		<div id="div1" style="visibility: hidden;">
			<telerik:RadHtmlChart runat="server" ID="ColumnChart1" Width="600px" Height="400px">
				<PlotArea>
					<Series>
						<telerik:ColumnSeries Name="Product 1">
							<SeriesItems>
								<telerik:CategorySeriesItem Y="1" />
								<telerik:CategorySeriesItem Y="2" />
								<telerik:CategorySeriesItem Y="3" />
							</SeriesItems>
						</telerik:ColumnSeries>
					</Series>
				</PlotArea>
			</telerik:RadHtmlChart>
		</div>
		<div id="chart" style="visibility: hidden;">HtmlChart wrapper</div>
		<input type="button" onclick="showChart(); return false;" value="Show Chart" />
		<script>
			$ = $telerik.$;
			function showChart() {
				$("#div1").attr("style", "visibility:visible");
			}
		</script>
Solution 1:
Use the workaround below:
		<telerik:RadRotator ID="RadRotator1" runat="server" Height="500px" ItemHeight="300px" ItemWidth="300px" Skin="Default" Width="1000px" RotatorType="AutomaticAdvance">
			<Items>
				<telerik:RadRotatorItem>
					<ItemTemplate>
						<telerik:RadHtmlChart ID="RadHtmlChart2" runat="server" Height="300px" Skin="Silk" Width="300px" Transitions="False" Visible="true">
							<PlotArea>
								<Series>
									<telerik:PieSeries>
										<SeriesItems>
											<telerik:PieSeriesItem Name="a" Y="12" />
											<telerik:PieSeriesItem Name="b" Y="5" />
										</SeriesItems>
									</telerik:PieSeries>
								</Series>
							</PlotArea>
						</telerik:RadHtmlChart>
					</ItemTemplate>
				</telerik:RadRotatorItem>
			</Items>
			<ItemTemplate>
			</ItemTemplate>
		</telerik:RadRotator>
		<script>
			$ = $telerik.$;
			Telerik.Web.UI.RadHtmlChart.prototype.repaint = function () {
				var that = this;
				if (that._chartObject) {
					if (that._isDataSourceChanged()) {
						that._loadData();
					}
					else {
						that._resetVisibilityOption();
						that._chartObject.redraw();
					}
				}
			};

			Telerik.Web.UI.RadHtmlChart.prototype._resetVisibilityOption = function () {
				var that = this;
				that._chartObject.options.visible = that._options.visible = that.get_visible();
			};

			Telerik.Web.UI.RadHtmlChart.prototype._getMainConfig = function () {
				var that = this;
				//when visible is false - nothing is sent from the server to save transferred data
				//e.g - there are properties set but visible is false - we do not need to send those properties amyway
				//that is why - set visible: false when nothing is sent from the server
				that._options = $telerik._getPropertiesParameter(that, that.constructor);
				that._cleanUpConfigProperties();

				that._options["theme"] = that.get_skin();
				that._options["visible"] = $(that.get_element()).is(':visible');
				that._options["title"] = that._chartTitle ? that._parseObject(that._chartTitle) : { visible: false };
				that._options["legend"] = that._legend ? that._parseObject(that._legend) : { visible: false };

				if (that._chartArea) {
					that._options["chartArea"] = that._parseObject(that._chartArea);
				}

				if (that._isSparklineChart()) {
					that._setMinimumSparklineWidth();
				}

				if (that._plotArea) {
					that._configurePlotArea();
				}

				if (that._series) {
					/*jshint evil: true */
					that._options["series"] = eval(that._series);
					/*jshint evil: false */
				}

				if (that._isStockChart()) {
					that._configureStockChart();
				}
			};
		</script>
Solution 2:
Hide the chart on load event:
		<div id="div1">
			<telerik:RadHtmlChart runat="server" ID="ColumnChart1" Width="600px" Height="400px">
				<ClientEvents OnLoad="OnLoad" />
				<PlotArea>
					<Series>
						<telerik:ColumnSeries Name="Product 1">
							<SeriesItems>
								<telerik:CategorySeriesItem Y="1" />
								<telerik:CategorySeriesItem Y="2" />
								<telerik:CategorySeriesItem Y="3" />
							</SeriesItems>
						</telerik:ColumnSeries>
					</Series>
				</PlotArea>
			</telerik:RadHtmlChart>
		</div>
		<div id="chart" style="visibility: hidden;">HtmlChart wrapper</div>
		<input type="button" onclick="showChart(); return false;" value="Show Chart" />
		<script>
			$ = $telerik.$;
			function showChart() {
				$("#div1").attr("style", "visibility:visible");
			}

			function OnLoad() {
				$("#div1").attr("style", "visibility:hidden");
			}

		</script>
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: 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".
Unplanned
Last Updated: 11 Mar 2015 11:28 by Eirik H
ADMIN
Created by: Danail Vasilev
Comments: 5
Category: HtmlChart
Type: Feature Request
11

			
Completed
Last Updated: 27 Feb 2015 10:14 by ADMIN
Completed
Last Updated: 27 Feb 2015 10:09 by ADMIN
Completed
Last Updated: 27 Feb 2015 06:51 by ADMIN
Declined
Last Updated: 26 Feb 2015 18:51 by ADMIN
For the time being properties can be set to the kendoWidget on the client:
ASPX:
		<script>
			function pageLoad() {
				var chart = $find("<%=RadHtmlChart1.ClientID%>");
				chart._chartObject.options.xAxis.min = new Date(2013, 04, 01);
				chart._chartObject.options.xAxis.max = new Date(2013, 05, 01);
				chart.repaint();
			}
		</script>
		<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="640px" Height="480px">
			<PlotArea>
				<Series>
					<telerik:ScatterLineSeries DataFieldY="SellQuantity" DataFieldX="SellDate">
						<LabelsAppearance DataFormatString="{1} cars sold on {0:m}">
						</LabelsAppearance>
						<TooltipsAppearance Color="White" DataFormatString="{1} cars sold on<br/>{0:D}" />
					</telerik:ScatterLineSeries>
				</Series>
				<XAxis BaseUnit="Days">
					<TitleAppearance Text="Sell Date">
					</TitleAppearance>
					<LabelsAppearance DataFormatString="d" RotationAngle="45">
					</LabelsAppearance>
					<MajorGridLines Color="#EFEFEF" Width="1"></MajorGridLines>
					<MinorGridLines Color="#F7F7F7" Width="1"></MinorGridLines>
				</XAxis>
				<YAxis>
					<TitleAppearance Text="Quantity">
					</TitleAppearance>
					<MajorGridLines Color="#EFEFEF" Width="1"></MajorGridLines>
					<MinorGridLines Color="#F7F7F7" Width="1"></MinorGridLines>
				</YAxis>
			</PlotArea>
			<ChartTitle Text="Sold Cars per Date">
			</ChartTitle>
		</telerik:RadHtmlChart>
C#:
	protected void Page_Load(object sender, EventArgs e)
	{
		RadHtmlChart1.DataSource = GetData();
		RadHtmlChart1.DataBind();
	}

	protected DataTable GetData()
	{
		DataTable dt = new DataTable();

		dt.Columns.Add("ID", typeof(int));
		dt.Columns.Add("SellQuantity", typeof(int));
		dt.Columns.Add("SellDate", typeof(DateTime));

		dt.Rows.Add(1, 2, new DateTime(2013, 05, 12));
		dt.Rows.Add(2, 5, new DateTime(2013, 05, 13));
		dt.Rows.Add(3, 6, new DateTime(2013, 05, 17));
		dt.Rows.Add(4, 4, new DateTime(2013, 05, 18));
		dt.Rows.Add(5, 7, new DateTime(2013, 05, 22));

		return dt;
	}
Declined
Last Updated: 26 Feb 2015 18:40 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 1
Category: HtmlChart
Type: Feature Request
0
For the time being the property can be set through the kendoWdiget:

        <script>
            function pageLoad() {
                var kendoWidget = $find("<%=RadHtmlChart1.ClientID%>")._chartObject;
                kendoWidget.options.series[0].labels.distance = 20;
                kendoWidget.redraw();
            }
        </script>
        <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="400px" Height="400px">
            <PlotArea>
                <Series>
                    <telerik:PieSeries>
                        <SeriesItems>
                            <telerik:PieSeriesItem Y="30" />
                            <telerik:PieSeriesItem Y="10" />
                            <telerik:PieSeriesItem Y="20" />
                        </SeriesItems>
                    </telerik:PieSeries>
                </Series>
            </PlotArea>
        </telerik:RadHtmlChart>
Completed
Last Updated: 26 Feb 2015 18:19 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 0
Category: HtmlChart
Type: Bug Report
0
For the time being the CommonTooltipsAppearance.Shared property must be set to false. For example:

        <telerik:RadHtmlChart ID="RadHtmlChart2" runat="server" Layout="Sparkline" Width="100" Height="150">
            <PlotArea>
                <CommonTooltipsAppearance Shared="false"></CommonTooltipsAppearance>
                <Series>
                    <telerik:LineSeries>
                        <TooltipsAppearance>
                            <ClientTemplate>
                                Value: #=value# <br />
                                Category #=category#
                            </ClientTemplate>
                        </TooltipsAppearance>
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="30" />
                            <telerik:CategorySeriesItem Y="10" />
                            <telerik:CategorySeriesItem Y="20" />
                        </SeriesItems>
                    </telerik:LineSeries>
                </Series>
                <XAxis>
                    <Items>
                        <telerik:AxisItem LabelText="item 1" />
                        <telerik:AxisItem LabelText="item 2" />
                        <telerik:AxisItem LabelText="item 3" />
                    </Items>
                </XAxis>
            </PlotArea>
        </telerik:RadHtmlChart>