Unplanned
Last Updated: 10 Mar 2016 09:32 by ADMIN
Unplanned
Last Updated: 11 Apr 2016 07:26 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 0
Category: HtmlChart
Type: Bug Report
1
 Workaround use padding instead of margin:
		<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server"  Width="600px" Height="400px">
			<PlotArea>
				<Series>
					<telerik:ColumnSeries Name="Product 1">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="15000" />
							<telerik:CategorySeriesItem Y="-4000" />
							<telerik:CategorySeriesItem Y="10000" />
						</SeriesItems>
					</telerik:ColumnSeries>
				</Series>
				<XAxis>
					<LabelsAppearance RotationAngle="45">
						<TextStyle Padding="135 0 0 0" />
					</LabelsAppearance>
					<Items>
						<telerik:AxisItem LabelText="item1" />
						<telerik:AxisItem LabelText="item2" />
						<telerik:AxisItem LabelText="item3" />
					</Items>
				</XAxis>
			</PlotArea>
		</telerik:RadHtmlChart>
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: 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: 14 Feb 2014 07:32 by ADMIN
If the type of the XAxis is category the field from the data source used for the XAxis must not be tried to be parsed to DateTime format.

For the time being the issue can be workaround as follows:

-Either set an appropriate DataFormatString for the XAxis labels. For example:

        <telerik:RadHtmlChart ID="ColumnChart" runat="server" Width="600" Height="400">
            <PlotArea>
                <Series>
                    <telerik:ColumnSeries DataFieldY="yValues">
                    </telerik:ColumnSeries>
                </Series>
                <XAxis DataLabelsField="xLabels" Type="category">
                    <LabelsAppearance DataFormatString="d - MM"></LabelsAppearance>
                </XAxis>
            </PlotArea>
        </telerik:RadHtmlChart>

- OR add the XAxis items manually from the data source:

ASPX:

        <telerik:RadHtmlChart ID="ColumnChart" runat="server" Width="600" Height="400">
            <PlotArea>
                <Series>
                    <telerik:ColumnSeries DataFieldY="yValues">
                    </telerik:ColumnSeries>
                </Series>
                <XAxis DataLabelsField="xLabels" Type="category">
                    <LabelsAppearance></LabelsAppearance>
                </XAxis>
            </PlotArea>
        </telerik:RadHtmlChart>
C#:

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

        DataTable currDT = GetData();
        for (int i = 0; i < currDT.Rows.Count; i++)
        {
            AxisItem currItem = new AxisItem(currDT.Rows[i]["xLabels"].ToString());
            ColumnChart.PlotArea.XAxis.Items.Add(currItem);
        }
    }

    protected DataTable GetData()
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("yValues");
        dt.Columns.Add("xLabels");

        dt.Rows.Add(10, "1 - 10");
        dt.Rows.Add(30, "2 - 11");
        dt.Rows.Add(20, "3 - 12");

        return dt;
    }

Completed
Last Updated: 03 Sep 2015 05:23 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 0
Category: HtmlChart
Type: Bug Report
1

			
Completed
Last Updated: 27 Feb 2015 06:51 by ADMIN
Completed
Last Updated: 30 Sep 2018 19:30 by Karen
For the time being the following workaround can be used:

JavaScript:

    <script>
        function pageLoad() {
            var chart = $find("<%=RadHtmlChart1.ClientID%>");
            chart._chartObject.options.series[0].missingValues = "Gap";
            chart.repaint();
        }
    </script>
ASPX:

        <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server">
            <PlotArea>
                <Series>
                    <telerik:LineSeries MissingValues="Gap">
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="30" />
                            <telerik:CategorySeriesItem Y="10" />
                            <telerik:CategorySeriesItem />
                            <telerik:CategorySeriesItem Y="30" />
                        </SeriesItems>
                    </telerik:LineSeries>
                </Series>
            </PlotArea>
        </telerik:RadHtmlChart>
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: 20 Feb 2015 17:22 by ADMIN
For the time being the properties can be set through the chartObject. For example:

ASPX:

        <script>
            function pageLoad() {
                var chart = $find("<%=RadHtmlChart1.ClientID%>");
                chart._chartObject.options.valueAxis.max = 100;
                chart._chartObject.options.valueAxis.min = 10;
                chart.repaint();
            }
        </script>
        <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server">
            <PlotArea>
                <Series>
                    <telerik:RadarColumnSeries DataFieldY="yValues">
                    </telerik:RadarColumnSeries>
                </Series>
                <XAxis DataLabelsField="xValues"></XAxis>
                <YAxis MinValue="10" MaxValue="100"></YAxis>
            </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("yValues", typeof(int));
        dt.Columns.Add("xValues", typeof(string));

        dt.Rows.Add(1, 12, 20);
        dt.Rows.Add(2, 15, 40);
        dt.Rows.Add(3, 16, 60);
        dt.Rows.Add(4, 14, 80);
        dt.Rows.Add(5, 17, 100);

        return dt;
    }
Completed
Last Updated: 27 Feb 2015 10:14 by ADMIN
Completed
Last Updated: 29 Jan 2016 08:13 by Michael
Declined
Last Updated: 20 Jun 2014 13:48 by ADMIN
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: 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: 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".