Completed
Last Updated: 27 Jan 2016 11:24 by Mike
ADMIN
Created by: Danail Vasilev
Comments: 1
Category: HtmlChart
Type: Bug Report
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: 09 Jun 2016 06:50 by ADMIN
Completed
Last Updated: 11 Feb 2016 12:48 by ADMIN
For the time being you can use the following JavaScript workaround:

		<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="300">
			<PlotArea>
				<Series>
					<telerik:LineSeries Name="series 1">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="30" />
							<telerik:CategorySeriesItem Y="10" />
							<telerik:CategorySeriesItem Y="25" />
							<telerik:CategorySeriesItem Y="20" />
						</SeriesItems>
					</telerik:LineSeries>
				</Series>
				<XAxis MinValue="1">
				</XAxis>
			</PlotArea>
		</telerik:RadHtmlChart>
		<script>

                       //JavaScript workaround

			function isNumber(val) {
				return typeof val === "number" && !isNaN(val);
			}


			var dataviz = kendo.dataviz,
				inArray = dataviz.inArray,
				deepExtend = kendo.deepExtend,
				math = Math,
				AREA = "area",
				VERTICAL_AREA = "verticalArea",
				VERTICAL_LINE = "verticalLine",
				LINE = "line";

			kendo.dataviz.CategoricalPlotArea.fn.filterSeries = function (currentSeries, categoryAxis) {
				var range = categoryAxis.totalRangeIndices();
				var justified = categoryAxis.options.justified;
				var outOfRangePoints = inArray(currentSeries.type, [LINE, VERTICAL_LINE, AREA, VERTICAL_AREA]);
				var categoryIx;

				range.min = isNumber(categoryAxis.options.min) ? math.floor(range.min) : 0;
				range.max = isNumber(categoryAxis.options.max) ? (justified ? math.floor(range.max) + 1 : math.ceil(range.max)) : currentSeries.data.length;

				currentSeries = deepExtend({}, currentSeries);

				if (outOfRangePoints) {
					var minCategory = range.min - 1;
					var srcCategories = categoryAxis.options.srcCategories || [];
					if (minCategory >= 0 && minCategory < currentSeries.data.length) {
						categoryIx = minCategory;
						currentSeries._outOfRangeMinPoint = {
							item: currentSeries.data[categoryIx],
							category: srcCategories[categoryIx],
							categoryIx: -1
						};
					}

					if (range.max < currentSeries.data.length) {
						categoryIx = range.max;
						currentSeries._outOfRangeMaxPoint = {
							item: currentSeries.data[categoryIx],
							category: srcCategories[categoryIx],
							categoryIx: range.max - range.min
						};
					}
				}

				categoryAxis._seriesMax = math.max(categoryAxis._seriesMax || 0, currentSeries.data.length);

				currentSeries.data = (currentSeries.data || []).slice(range.min, range.max);

				return currentSeries;
			}
		</script>
Completed
Last Updated: 26 Sep 2016 12:36 by ADMIN
               <script>
			function chartLoad() {
				$find("RadHtmlChart2").get_kendoWidget().setOptions({
					legend: {
						position: "top",
						width: 162,
						height: 88,
						orientation: "vertical"
					}
				})
			}
		</script>
		<telerik:RadHtmlChart ID="RadHtmlChart2" runat="server" Width="350" Height="350">
			<ClientEvents OnLoad="chartLoad" />
			...
		</telerik:RadHtmlChart>
Completed
Last Updated: 09 Dec 2016 11:31 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 0
Category: HtmlChart
Type: Bug Report
1
Code that reproduces the issue:

<telerik:RadHtmlChart runat="server" ID="RadHtmlChartColumnGender" Transitions="true" Width="150" Height="300">
			<PlotArea>
				<Series>
					<telerik:ColumnSeries Name="Male" Stacked="true" StackType="Stack100">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="69" />
						</SeriesItems>
					</telerik:ColumnSeries>
					<telerik:ColumnSeries Name="Female" Stacked="true" StackType="Stack100">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="3" />
						</SeriesItems>
					</telerik:ColumnSeries>
				</Series>
				<YAxis NarrowRange="false"></YAxis>
			</PlotArea>

		</telerik:RadHtmlChart>

Workaround:

		<script>
			function pageLoad() {
				var kendoChart = $find("RadHtmlChartColumnGender").get_kendoWidget();
				var valueAxis = kendoChart.options.valueAxis;
				valueAxis.narrowRange = false;
				$find("RadHtmlChartColumnGender").setOptions({valueAxis: valueAxis});
			}
		</script>
Completed
Last Updated: 04 Jul 2014 12:27 by ADMIN
Created by: Paul
Comments: 2
Category: HtmlChart
Type: Bug Report
1
When a pie chart is rendered with large labels they may be clipped because the pie chart is not sized correctly.  When the legend is enabled the pie chart sizes correctly to handle long labels.
Completed
Last Updated: 27 Jan 2016 11:25 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 0
Category: HtmlChart
Type: Bug Report
0

			
Completed
Last Updated: 28 Oct 2015 06:39 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 0
Category: HtmlChart
Type: Bug Report
0

			
Completed
Last Updated: 19 Jan 2016 14:20 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 0
Category: HtmlChart
Type: Bug Report
0
For the time being the reversed properties can be set through the kendo widget:
		<script>
			function pageLoad(sender, args) {

				var radarChart = $find('<%=RadarLineChart.ClientID%>').get_kendoWidget();
				var polarChart = $find('<%=PolarAreaChart.ClientID%>').get_kendoWidget();


				radarChart.options.valueAxis.reverse = true;
				polarChart.options.yAxis.reverse = true;


				radarChart.options.categoryAxis.reverse = true;
				polarChart.options.xAxis.reverse = true;

				radarChart.redraw();
				polarChart.redraw();
			}
		</script>

		<telerik:RadHtmlChart runat="server" ID="RadarLineChart" Width="345" Height="345">
			<PlotArea>
				<XAxis Reversed="true">
					<Items>
						<telerik:AxisItem LabelText="January"></telerik:AxisItem>
						<telerik:AxisItem LabelText="February"></telerik:AxisItem>
						<telerik:AxisItem LabelText="March"></telerik:AxisItem>
						<telerik:AxisItem LabelText="April"></telerik:AxisItem>
						<telerik:AxisItem LabelText="May"></telerik:AxisItem>
					</Items>
				</XAxis>
				<YAxis Reversed="true">
				</YAxis>
				<Series>
					<telerik:RadarLineSeries Name="Avg Low" MissingValues="Gap">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="1000"></telerik:CategorySeriesItem>
							<telerik:CategorySeriesItem Y="8000"></telerik:CategorySeriesItem>
							<telerik:CategorySeriesItem Y="11000"></telerik:CategorySeriesItem>
							<telerik:CategorySeriesItem Y="13000"></telerik:CategorySeriesItem>
							<telerik:CategorySeriesItem Y="12000"></telerik:CategorySeriesItem>
						</SeriesItems>
					</telerik:RadarLineSeries>
				</Series>
			</PlotArea>
		</telerik:RadHtmlChart>

		<telerik:RadHtmlChart runat="server" ID="PolarAreaChart" Width="345" Height="345">
			<PlotArea>
				<XAxis Reversed="true">
				</XAxis>
				<YAxis Reversed="true">
				</YAxis>
				<Series>
					<telerik:PolarAreaSeries Name=">12.3 knots">
						<SeriesItems>
							<telerik:PolarSeriesItem Angle="125" Radius="2.4"></telerik:PolarSeriesItem>
							<telerik:PolarSeriesItem Angle="138" Radius="7.5"></telerik:PolarSeriesItem>
							<telerik:PolarSeriesItem Angle="152" Radius="8.3"></telerik:PolarSeriesItem>
							<telerik:PolarSeriesItem Angle="166" Radius="4.3"></telerik:PolarSeriesItem>
						</SeriesItems>
					</telerik:PolarAreaSeries>
				</Series>
			</PlotArea>
		</telerik:RadHtmlChart>
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: 20 Jul 2016 12:58 by ADMIN
Created by: Imported User
Comments: 1
Category: HtmlChart
Type: Bug Report
0
Hover over first legend item highlights all chart sections for donut chat type.
Hover over the rest of the legend items doesn't highlight the corresponding section of the donut chart.
Completed
Last Updated: 13 Nov 2015 12:20 by ADMIN
When data-bound categorical series has zeros in the x-axis labels they are parsed and the zeros disappear. For example:
ASPX:

            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
            <telerik:RadHtmlChart runat="server" ID="Radhtmlchart1">
                <PlotArea>
                    <Series>
                        <telerik:ColumnSeries DataFieldY="Score1"></telerik:ColumnSeries>
                   </Series>

                   <XAxis DataLabelsField="Student">
                    </XAxis>
                </PlotArea>
            </telerik:RadHtmlChart>

C#:

    protected void Page_Load(object sender, EventArgs e)
    {
        Radhtmlchart1.DataSource = GetData();
        Radhtmlchart1.DataBind();
    }
    protected DataTable GetData()
    {
        DataTable table = new DataTable();

        table.Columns.Add("Student", typeof(string));
        table.Columns.Add("Score1", typeof(int));

        table.Rows.Add(new object[] { "0806014562", 40 });
        table.Rows.Add(new object[] { "0806014562", 50 });
        table.Rows.Add(new object[] { "0806014562", 70 });
        return table;
    }
Workarounds:
1) Use format string to add the desired missing zeros when parsed.

<LabelsAppearance DataFormatString="0{0}"></LabelsAppearance>

2) Add items programmatically

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

        DataTable currDT = GetData();
        for (int i = 0; i < currDT.Rows.Count; i++)
        {
            AxisItem currItem = new AxisItem(currDT.Rows[i]["Student"].ToString());
            Radhtmlchart1.PlotArea.XAxis.Items.Add(currItem);
        }
    }
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: 06 Oct 2015 14:48 by ADMIN
Completed
Last Updated: 09 Nov 2015 12:43 by ADMIN
Series tooltips are not visible in a Stock chart when the same series is added programmatically in the plotarea and the navigator simultaneously.

The workaround is to:
1) Create different series for the plot area and the navigator.
2) Explicitly set the tooltips' visibility with JS like this:
        <script type="text/javascript">
            function pageLoad() {
                var chart = $find("Chart");
                var series = chart._chartObject.options.series[0];
                series.tooltip.visible = true;
                //repaint the chart to apply the changes
                chart.repaint();
            }
        </script>