Completed
Last Updated: 24 Jul 2017 20:23 by E J
ADMIN
Created by: Iana Tsolova
Comments: 10
Category: HtmlChart
Type: Feature Request
20
provide htmlchart in 2D/3D
Completed
Last Updated: 21 Jun 2017 10:30 by ADMIN
ADMIN
Created by: Stamo Gochev
Comments: 1
Category: HtmlChart
Type: Bug Report
0
The workaround is to set <MarkersAppearance Visible="false"  />.
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>
Unplanned
Last Updated: 13 Oct 2016 15:42 by Michael
ADMIN
Created by: Danail Vasilev
Comments: 2
Category: HtmlChart
Type: Feature Request
4
A functionality similar to KendoUI's error bars - http://demos.telerik.com/kendo-ui/dataviz/line-charts/error-bars.html
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: 31 Aug 2016 14:27 by Imported User
ADMIN
Created by: Stamo Gochev
Comments: 2
Category: HtmlChart
Type: Feature Request
3
For the time being you can utilize the Kendo UI charting scripts (http://demos.telerik.com/kendo-ui/bullet-charts/index) and API that RadHtmlChart use, in order to render a bullet chart:
	<form id="form1" runat="server">
		<telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
		<script>
			function createChart() {
				$telerik.$("#chart").kendoChart({
					legend: {
						visible: false
					},
					series: [{
						type: "bullet",
						data: [[750, 762.5]]
					}],
					chartArea: {
						margin: {
							left: 0
						}
					},
					categoryAxis: {
						majorGridLines: {
							visible: false
						},
						majorTicks: {
							visible: false
						}
					},
					valueAxis: [{
						plotBands: [{
							from: 715, to: 752, color: "#ccc", opacity: .6
						}, {
							from: 752, to: 772, color: "#ccc", opacity: .3
						}],
						majorGridLines: {
							visible: false
						},
						min: 715,
						max: 795,
						minorTicks: {
							visible: true
						}
					}],
					tooltip: {
						visible: true,
						template: "Maximum: #= value.target # <br /> Average: #= value.current #"
					}
				});
			}
			function pageLoad() {
				createChart();
			}
		</script>
		<div id="chart"></div>
		<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" style="display:none;"></telerik:RadHtmlChart>
	</form>
Completed
Last Updated: 31 Aug 2016 13:03 by Joel
ADMIN
Created by: Vessy
Comments: 1
Category: HtmlChart
Type: Feature Request
2

			
Completed
Last Updated: 24 Aug 2016 12:46 by ADMIN
For the time being you can choose either approach:

1) Set the min and max dates on the kendo widget:
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;
	}

2) Set the JavaScript equivalent of min and max dates in the code behind like follows:
C#:
	protected void Page_Load(object sender, EventArgs e)
	{
		//Set min and max date for a datetime x-axis type
		RadHtmlChart1.PlotArea.XAxis.MinValue = ConvertToJavaScriptDateTime(new DateTime(2014, 02, 19));
		RadHtmlChart1.PlotArea.XAxis.MaxValue = ConvertToJavaScriptDateTime(new DateTime(2014, 04, 05));

		//Instantiate ScatterSeriesItem objects
		ScatterSeriesItem ssi1 = new ScatterSeriesItem();
		ScatterSeriesItem ssi2 = new ScatterSeriesItem();
		ScatterSeriesItem ssi3 = new ScatterSeriesItem();
		ScatterSeriesItem ssi4 = new ScatterSeriesItem();
		//Instantiate DateTime objects
		DateTime date1 = (new DateTime(2014, 03, 03, 0, 0, 0));
		DateTime date2 = (new DateTime(2014, 03, 10, 0, 0, 0));
		DateTime date3 = (new DateTime(2014, 03, 17, 0, 0, 0));
		DateTime date4 = (new DateTime(2014, 03, 24, 0, 0, 0));
		//Set the converted x values to the ScatterSeriesItem objects
		ssi1.X = ConvertToJavaScriptDateTime(date1);
		ssi2.X = ConvertToJavaScriptDateTime(date2);
		ssi3.X = ConvertToJavaScriptDateTime(date3);
		ssi4.X = ConvertToJavaScriptDateTime(date4);
		//Set the y values to the ScatterSeriesItem objects
		ssi1.Y = 3;
		ssi2.Y = 6;
		ssi3.Y = 5;
		ssi4.Y = 9;
		//Add the ScatterSeriesItem objects to the ScatterLineSeries
		(RadHtmlChart1.PlotArea.Series[0] as ScatterLineSeries).SeriesItems.Add(ssi1);
		(RadHtmlChart1.PlotArea.Series[0] as ScatterLineSeries).SeriesItems.Add(ssi2);
		(RadHtmlChart1.PlotArea.Series[0] as ScatterLineSeries).SeriesItems.Add(ssi3);
		(RadHtmlChart1.PlotArea.Series[0] as ScatterLineSeries).SeriesItems.Add(ssi4);
	}

	//A method that converts the .NET DateTime object to its JavaScript Date object representation
	protected decimal ConvertToJavaScriptDateTime(DateTime fromDate)
	{
		return (decimal)fromDate.Subtract(new DateTime(1970, 1, 1)).TotalMilliseconds;
	}
ASPX:
		<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="640px" Height="480px">
			<PlotArea>
				<Series>
					<telerik:ScatterLineSeries Name="Stock A">
						<LabelsAppearance>
							<ClientTemplate>
                        #= kendo.format(\'{0:d/MM/yyyy}\', new Date(value.x)) #,  #=kendo.format(\'{0:C0}\',value.y)#
							</ClientTemplate>
						</LabelsAppearance>
						<TooltipsAppearance Color="White">
							<ClientTemplate>
                        #= kendo.format(\'{0:d/MM/yyyy}\', new Date(value.x)) #,  #=kendo.format(\'{0:C0}\',value.y)#
							</ClientTemplate>
						</TooltipsAppearance>
					</telerik:ScatterLineSeries>
				</Series>
				<YAxis>
					<LabelsAppearance DataFormatString="C0"></LabelsAppearance>
					<TitleAppearance Text="Price"></TitleAppearance>
				</YAxis>
				<XAxis Type="Date" BaseUnit="Days">
					<TitleAppearance Text="Closing Date">
					</TitleAppearance>
					<LabelsAppearance DataFormatString="d">
					</LabelsAppearance>
				</XAxis>
			</PlotArea>
			<ChartTitle Text="Closing Stock Prices">
			</ChartTitle>
		</telerik:RadHtmlChart>
Completed
Last Updated: 10 Aug 2016 10:17 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 0
Category: HtmlChart
Type: Feature Request
0
For the time being you can manually fetch the data and pass it to the chart:
		<script>
			function pageLoad() {
				var dataSource = $find('<%= RadClientDataSource1.ClientID %>');
				dataSource.fetch(function (args) {
					var data = args.get_data(),
						chart = $find('<%=RadHtmlChart1.ClientID%>');
					//workaround
					chart.set_dataSource(data);
					chart.repaint();
				});
			}
		</script>
		<telerik:RadClientDataSource ID="RadClientDataSource1" runat="server">
			<DataSource>
				<WebServiceDataSourceSettings>
					<Select Url="spain-electricity.json" DataType="JSON" />
				</WebServiceDataSourceSettings>
			</DataSource>
			<Schema>
				<Model>
					<telerik:ClientDataSourceModelField FieldName="year" DataType="String" />
					<telerik:ClientDataSourceModelField FieldName="solar" DataType="Number" />
				</Model>
			</Schema>
		</telerik:RadClientDataSource>

		<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" ClientDataSourceID="RadClientDataSource1">
			<PlotArea>
				<Series>
					<telerik:LineSeries DataFieldY="year" Name="year">
					</telerik:LineSeries>
				</Series>
				<XAxis DataLabelsField="year"></XAxis>
			</PlotArea>
		</telerik:RadHtmlChart>
Completed
Last Updated: 05 Aug 2016 13:29 by ADMIN
Created by: Lee
Comments: 1
Category: HtmlChart
Type: Feature Request
1
Would be nice to be able to supply an image for the series background on bar and column charts, this would enable infographic style option to charts, i.e. displaying data for countries the bar series can be repeating national flags.

Declined
Last Updated: 05 Aug 2016 12:23 by ADMIN
Created by: Federico
Comments: 1
Category: HtmlChart
Type: Feature Request
0
If our X-axis is filled by numeric values, we don't want to navigate by date or by category or by logaritmic. We may want those values, the same shown in X-axis, determinating our chart.
For instance: latitude (X-axis) and longitude (Y-axis). We want to navigate by latitude and select view from lat. = 44 to lat. = 45. Date or datetime would be meaningless.
Will it be possible?
Declined
Last Updated: 05 Aug 2016 12:18 by ADMIN
export of the chart to image (or pdf) will show an html code of non-breaking space in chart title and chart legend, but not in a label added to HtmlChartHolder
Completed
Last Updated: 03 Aug 2016 14:36 by ADMIN
ADMIN
Created by: Telerik Admin
Comments: 1
Category: HtmlChart
Type: Feature Request
0
allow for the chart plot area to be fixed width not counting the axis text. the issue I have is the legend on right side of chart changes the widths of chart when the text is long.
Unplanned
Last Updated: 03 Aug 2016 12:15 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 0
Category: HtmlChart
Type: Feature Request
2

			
Declined
Last Updated: 02 Aug 2016 14:12 by ADMIN
Created by: Deepa Haridas
Comments: 1
Category: HtmlChart
Type: Feature Request
0
I have a column series chart.
I have set colorfield for each series.
Series background change correctly, but label color does not change as per series color.
I can not set label color dynamically.
Completed
Last Updated: 01 Aug 2016 10:24 by ADMIN
ADMIN
Created by: Telerik Admin
Comments: 2
Category: HtmlChart
Type: Feature Request
1
We are trying to convert a websites 11 year old controls from a different vendor to telerik.  All of the controls have been replaced except for the RadHtmlChart, which has limited customization of the legend.  Specifically we have the following issues:

1) The legend color squares are too small.  You can see the difference in the attachment "competitor" vs "telerik".  REQUEST: Set the size of the color squares.
2) The legend spacing between items is not customizable and is too compressed for our liking.  See "competitor" vs "telerik" to see the difference.  REQUEST: Allow padding or margin between legend items.
3) The legend size cannot be set to a fixed width.  For a left aligned legend, this results in multiple charts having inconsistent alignment.  Setting a different margin for each chart individually does not fix the problem.  Depending on the data fed to the charts, their position changes.  See the "multiple-charts" attachment for an example. REQUEST: Allow a fixed legend size so multiple charts can be aligned.
4) For left-aligned charts, the legend cannot be set to the top.  REQUEST: Allow TopLeft, TopRight options for legend alignment.

Thank you,
David A.
Declined
Last Updated: 29 Jul 2016 12:18 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 1
Category: HtmlChart
Type: Feature Request
1

			
Declined
Last Updated: 29 Jul 2016 11:40 by ADMIN
When the data passed to the RadHtmlChart with "stock" layout presents the highest and lowest base units, you must scroll the mouse wheel in order to navigate to the smallest base units. This issue can be handled for example by exposing a scroller in the navigator that let you select smaller date ranges.
Declined
Last Updated: 29 Jul 2016 11:39 by ADMIN
Will be useful for pie/donut charts in responsive web page scenarios.
Declined
Last Updated: 29 Jul 2016 11:23 by ADMIN
Created by: x
Comments: 1
Category: HtmlChart
Type: Feature Request
1
In the Radchart there is a property called  activeregion where the user can add a reference to html link. When the user clicks on the chart title, he can navigate to a new web page.
This feature is not available in the new HtmlRadChart . We think that is suitable to have this function in the new HtmlRadchart. It can be even extended to axis labels of HtmlRadchart.
Thank you for your help
Best Regards
AE