Completed
Last Updated: 05 Aug 2015 14:48 by Leandro Mussi Silva
ADMIN
Created by: Danail Vasilev
Comments: 3
Category: HtmlChart
Type: Feature Request
5
The property will be like similar to http://docs.telerik.com/kendo-ui/api/dataviz/chart#configuration-categoryAxis.autoBaseUnitSteps.
For the time being the property can be set through the kendo widget:
ASPX:
		<script type="text/javascript">
			function pageLoad() {
				var kendoWidget = $find("<%=RadHtmlChart1.ClientID%>").get_kendoWidget();
				kendoWidget.options.categoryAxis.baseUnitStep = "auto";
				kendoWidget.options.categoryAxis.autoBaseUnitSteps = { months: [4] };
				kendoWidget.redraw();
			}
		</script>
		<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="400">
			<PlotArea>
				<Series>
					<telerik:ColumnSeries DataFieldY="SellQuantity">
					</telerik:ColumnSeries>
				</Series>
				<XAxis DataLabelsField="SellDate" >
					<LabelsAppearance DataFormatString="MM/yyyy" RotationAngle="45"></LabelsAppearance>
				</XAxis>
			</PlotArea>
		</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(2011, 01, 01));
		dt.Rows.Add(1, 2, new DateTime(2011, 06, 01));
		dt.Rows.Add(2, 5, new DateTime(2011, 12, 01));
		dt.Rows.Add(3, 6, new DateTime(2012, 06, 01));
		dt.Rows.Add(4, 4, new DateTime(2012, 09, 01));
		dt.Rows.Add(5, 7, new DateTime(2013, 03, 01));

		return dt;
	}
Completed
Last Updated: 05 Aug 2015 13:29 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 0
Category: HtmlChart
Type: Bug Report
0
For the time being you can use the following workaround:
1) Either hide the chart with visibility:hidden instead of display:none
2) Or use the following workaround:
		<div id="div1" style="display: none;">
			<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>
		<input type="button" onclick="showChart(); return false;" value="Show Chart" />
		<script>
			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>
Completed
Last Updated: 28 Jul 2015 08:17 by Rommel
String data source fields in the RadHtmlChart that contain only numeric characters should not be parsed to decimal. Also when such a string starts with the 0 character, it is omitted. For example the "0" item in the legend is not displayed with the example below:
ASPX:

        <telerik:RadHtmlChart runat="server" ID="PieChart1" Width="800" Height="500" Transitions="true">
            <Appearance>
                <FillStyle BackgroundColor="White"></FillStyle>
            </Appearance>
            <ChartTitle Text="Browser Usage for April 2012">
                <Appearance Align="Center" BackgroundColor="White" Position="Top">
                </Appearance>
            </ChartTitle>
            <Legend>
                <Appearance BackgroundColor="White" Position="Right" Visible="true">
                </Appearance>
            </Legend>
            <PlotArea>
                <Appearance>
                    <FillStyle BackgroundColor="White"></FillStyle>
                </Appearance>
                <Series>
                    <telerik:PieSeries StartAngle="90" DataFieldY="code_count" NameField="items_names">
                        <LabelsAppearance Position="OutsideEnd" DataFormatString="{0} %">
                        </LabelsAppearance>
                        <TooltipsAppearance Color="White" DataFormatString="{0} %"></TooltipsAppearance>
                    </telerik:PieSeries>
                </Series>
            </PlotArea>
        </telerik:RadHtmlChart>

C#:

using System.Data;

    protected void Page_Load(object sender, EventArgs e)
    {
        PieChart1.DataSource = GetData();
        PieChart1.DataBind();
    }

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

        dt.Columns.Add("ID", typeof(int));
        dt.Columns.Add("code_count", typeof(int));
        dt.Columns.Add("items_names", typeof(string));

        dt.Rows.Add(1, 771, "0");
        dt.Rows.Add(2, 187, "1");
        dt.Rows.Add(3, 178, "2");
        dt.Rows.Add(4, 60, "3");

        return dt;
    }
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);
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.
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>
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: 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
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>
Completed
Last Updated: 26 Feb 2015 17:30 by ADMIN
When an item's value is equal to zero in a Bar or Column series,, its labels is not shown.
Completed
Last Updated: 26 Feb 2015 17:28 by Fabian Raul Jofre
Created by: Fabian Raul Jofre
Comments: 0
Category: HtmlChart
Type: Feature Request
1
I know that does not support RADHTMLCHART Marked Zone. But somehow I need to make a mark, for example in the SeriesLine that Saturdays and Sundays this line with another color.
I leave a picture so you can understand.
I need the part or series values Y  Vier and Sab will be anothe color. for examples both series at orange color.

I thank you for the attention.
regards
Completed
Last Updated: 26 Feb 2015 17:26 by ADMIN
Currently when LineSeries Item's YValue is smaller than the BarSeries/ColumnSeries Item's value and both Series Items share the same category, the BarSeries/ColumnSeries Item is the one that receives the mouseover event, so only the bar/column item tooltip is shown. It is not possible to hover over the marker for the  LineSeries and trigger client-side event handlers or show its tooltip. The LineSeries can be hovered/clicked only outside of the area of the Bar/Column Item.
Completed
Last Updated: 26 Feb 2015 17:18 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 0
Category: HtmlChart
Type: Bug Report
2
For the time begin the event logic can be executed with a small time out:

JavaScript

    <script type="text/javascript">
        var isFirstClick = "1";
        function OnClientSeriesClicked(sender, args) {
            setTimeout(function () {
                alert(isFirstClick);
            }, 0);
        }
    </script>
ASPX:

    <telerik:RadHtmlChart runat="server" Width="900px" Height="700px" ID="RadHtmlChart2"
        OnClientSeriesClicked="OnClientSeriesClicked">
        <PlotArea>
            <Series>
                <telerik:BarSeries>
                    <SeriesItems>
                        <telerik:CategorySeriesItem Y="10" />
                    </SeriesItems>
                </telerik:BarSeries>
            </Series>
        </PlotArea>
    </telerik:RadHtmlChart>