Completed
Last Updated: 29 Jan 2016 08:13 by Michael
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: 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 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 09:52 by ADMIN
Currently when RadHtmlChart is placed inside  RadSplitter with RadSlidingZone a JavaScript error is thrown when the following conditions are met:

1.RadHtmlChart doesn't have its width property set

2.The position of the RadHtmlChart's legend is changed in the codebehind

The workaround is to set the width property of the chart.

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: 19 Jan 2016 12:03 by ADMIN
The property indicates whether the series name will be visible in the legend. For the time being the following workaround can be used:

JavaScript:

    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script>
            function pageLoad() {
                var chart = $find("<%=RadHtmlChart1.ClientID%>");
                chart.get_kendoWidget().options.series[0].visibleInLegend = false;
                chart.get_kendoWidget().options.series[1].visibleInLegend = true;
                chart.repaint();
            }
        </script>
    </telerik:RadCodeBlock>

ASPX:

        <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="400">
            <PlotArea>
                <Series>
                    <telerik:ColumnSeries Name="Series 1">
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="1" />
                            <telerik:CategorySeriesItem Y="2" />
                        </SeriesItems>
                    </telerik:ColumnSeries>
                    <telerik:ColumnSeries Name="Series 2">
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="3" />
                            <telerik:CategorySeriesItem Y="4" />
                        </SeriesItems>
                    </telerik:ColumnSeries>
                </Series>
            </PlotArea>
        </telerik:RadHtmlChart>
Completed
Last Updated: 13 Jan 2016 12:43 by ADMIN
The current behavior of the RadHtmlChart preserves only the bound datasource, however it doesn't store programmatically added series items after a postback.

The workaround is instead of creating and adding series items programmatically, create a datatable and pass it as a datasource to the chart. For example:
ASPX:
<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="600px" Height="400px">
</telerik:RadHtmlChart>
C#:
protected void Page_Load(object sender, EventArgs e)
{
    DataTable dt = new DataTable();
    dt.Columns.Add("id");
    dt.Columns.Add("xValues");
    dt.Columns.Add("yValues");
    for (int i = 0; i < 5; i++)
    {
        dt.Rows.Add(i, (10 + i).ToString() + " Apr", 20 + i);
    } 
    ScatterLineSeries sls1 = new ScatterLineSeries();
    sls1.LabelsAppearance.DataFormatString = "{0:d}";
    sls1.DataFieldX = "xValues";
    sls1.DataFieldY = "yValues";
  
    RadHtmlChart1.PlotArea.Series.Add(sls1);
    RadHtmlChart1.DataSource = dt;
    RadHtmlChart1.DataBind();
}
Completed
Last Updated: 06 Jan 2016 12:07 by ADMIN
Completed
Last Updated: 22 Dec 2015 17:20 by Ali
This can be done by exposing a spacing property for the particular Series. 

For the time being mentioned properties can be set on the client through the chartObject of the RadHtmlChart:
JavaScript:
	<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
		<script type="text/javascript">
			function ChangeSpace() {
				var chart = $find("<%=ColumnChart.ClientID%>");
				chart._chartObject.options.series[0].spacing = 0.9;
				chart.repaint();
			}

			function ChangeGap() {
				var chart = $find("<%=ColumnChart.ClientID%>");
				chart._chartObject.options.series[0].gap = 10;
				chart.repaint();
			}
		</script>
	</telerik:RadCodeBlock>
ASPX:
		<telerik:RadButton ID="RadButton1" runat="server" AutoPostBack="false" Text="Change Space" OnClientClicked="ChangeSpace" />
		<telerik:RadButton ID="RadButton2" runat="server" AutoPostBack="false" Text="Change Gap" OnClientClicked="ChangeGap" />
		<telerik:RadHtmlChart runat="server" ID="ColumnChart" Transitions="true">
....
		</telerik:RadHtmlChart>
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: 09 Nov 2015 12:52 by Capital
When Series are created programmatically, Axes settings are not preserved after postback. The workaround is to create an empty series in the markup. For example:

        <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server">
...
            <PlotArea>
                <YAxis>...</YAxis>
                <XAxis>...</XAxis>
                <Series>
                    <telerik:ScatterLineSeries Name=" ">
                        <Appearance FillStyle-BackgroundColor="Transparent"></Appearance>
                    </telerik:ScatterLineSeries>
                </Series>
            </PlotArea>
        </telerik:RadHtmlChart>
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>

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: 16 Oct 2015 10:55 by Shan
ADMIN
Created by: Slav
Comments: 3
Category: HtmlChart
Type: Feature Request
15

			
Completed
Last Updated: 06 Oct 2015 14:48 by ADMIN
Completed
Last Updated: 29 Sep 2015 10:50 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 0
Category: HtmlChart
Type: Feature Request
0
The property (http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-categoryAxis.maxDateGroups) can be set through the kendoWidget:
JavaScript:

        <script>
            function OnLoad(args) {
                var kendoWidget = args.get_kendoWidget();
                kendoWidget.options.categoryAxis.maxDateGroups = 8;
                kendoWidget.options.categoryAxis.baseUnit = 'fit';
                kendoWidget.redraw();
            }
        </script>

ASPX:

        <telerik:RadHtmlChart runat="server" ID="RadHtmlChart2" Width="640px" Height="480px">
            <ClientEvents OnLoad="OnLoad" />
            <PlotArea>
                <Series>
                    <telerik:LineSeries DataFieldY="SellQuantity">
                        <LabelsAppearance DataFormatString="{1} cars sold on {0:m}">
                        </LabelsAppearance>
                        <TooltipsAppearance Color="White" DataFormatString="{1} cars sold on<br/>{0:D}" />
                    </telerik:LineSeries>
                </Series>
                <XAxis DataLabelsField="SellDate">
                    <TitleAppearance Text="Sell Date">
                    </TitleAppearance>
                    <LabelsAppearance DataFormatString="d">
                    </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)
    {
        RadHtmlChart2.DataSource = GetData();
        RadHtmlChart2.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, 06, 12));
        dt.Rows.Add(2, 5, new DateTime(2011, 12, 12));
        dt.Rows.Add(3, 6, new DateTime(2012, 06, 17));
        dt.Rows.Add(4, 4, new DateTime(2012, 09, 18));
        dt.Rows.Add(5, 7, new DateTime(2013, 03, 18));

        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: 01 Sep 2015 11:14 by Eirik H
ADMIN
Created by: Danail Vasilev
Comments: 2
Category: HtmlChart
Type: Feature Request
15
Currently BarSeries/ColumnSeries are rendered like a "glass" gradient and PieSeries/DonutSeries like a "roundedBevel" gradient. Expose an OverlayGradient property that lets you control the gradient (e.g. "glass", "roundedBevel", "sharpBevel", "none"). For the time being the properties can be set through the chartObject:
JavaScript:
	<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
		<script>
			function pageLoad() {
				var chart1 = $find("<%=ColumnChart1.ClientID%>");
				//Set glass gradient to first series
				chart1._chartObject.options.series[0].overlay = { gradient: "glass" };
				//Remove gradient from second series
				chart1._chartObject.options.series[1].overlay = { gradient: "none" };
				chart1.repaint();

				var chart2 = $find("<%=PieChart1.ClientID%>");
				//Set sharpBevel gradient to pie series
				chart2._chartObject.options.series[0].overlay = { gradient: "sharpBevel" };
				chart2.repaint();
			}
		</script>
	</telerik:RadCodeBlock>
ASPX:
		<telerik:RadHtmlChart runat="server" ID="ColumnChart1" Transitions="true">
			<PlotArea>
				<Series>
					<telerik:ColumnSeries Name="Series with Gradient">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="15000" />
							<telerik:CategorySeriesItem Y="23000" />
							<telerik:CategorySeriesItem Y="10000" />
							<telerik:CategorySeriesItem Y="16000" />
						</SeriesItems>
					</telerik:ColumnSeries>
					<telerik:ColumnSeries Name="Series with no Gradient">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="35000" />
							<telerik:CategorySeriesItem Y="10000" />
							<telerik:CategorySeriesItem Y="20000" />
							<telerik:CategorySeriesItem Y="17000" />
						</SeriesItems>
					</telerik:ColumnSeries>
				</Series>
			</PlotArea>
		</telerik:RadHtmlChart>
		<telerik:RadHtmlChart runat="server" ID="PieChart1" Transitions="true" Width="450px" Height="450px">
			<PlotArea>
				<Series>
					<telerik:PieSeries StartAngle="90">
						<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="false" Name="Safari" Y="4.5" />
							<telerik:PieSeriesItem BackgroundColor="Red" Exploded="false" Name="Opera" Y="2.3" />
						</SeriesItems>
					</telerik:PieSeries>
				</Series>
			</PlotArea>
			<ChartTitle Text="Pie with Gradient">
			</ChartTitle>
		</telerik:RadHtmlChart>