Completed
Last Updated: 22 Feb 2019 15:14 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 6
Category: HtmlChart
Type: Feature Request
22
As of R1 2017 you can use the stackTotal property of the labels:
https://docs.telerik.com/kendo-ui/controls/charts/how-to/various/show-stack-total

---
old information

For the time being this can be achieved by creating an additional bar/column series with the following settings:

-series items are set with insignificantly small values (e.g. 0.001)

-the name property of the series is not specified, so that it is not visible in the legend

-the color of the series matches the color of the plot area, so that the series items and the legend of the series are not visible

-clienttemplates for the labels of this series is used in order to sum up the grand total and display it

An example on the described scenario can be found in the http://www.telerik.com/support/kb/aspnet-ajax/chart-%28html5%29/details/displaying-grand-total-in-stacked-series-labels-and-pie-series-legend KB article
Completed
Last Updated: 16 Dec 2018 17:18 by ADMIN
So cool RadHtmlChart navigator should be able to be attached to non-stock layout charts, support multiple databound series and y-axis items other than financial data
Completed
Last Updated: 15 Dec 2018 13:47 by ADMIN
There are two workarounds you can use in the meantime

- Use string representations of the dates instead of actual dates. In this manner you can bind the chart to strings and use a "regular" categorical axis and then the plot bands will work based on the index of the item. In such a case you will need to aggregate the data yourself before passing it to the chart.
- Using the Kendo Chart widget directly, and here is an example of using date objects and adding plot bands dynamically: https://docs.telerik.com/kendo-ui/controls/charts/how-to/appearance/dynamic-plot-bands

Here is also a basic example of fetching the Kendo Chart scripts through a hidden RadHtmlChart so that you can easily use the Kendo Chart widget

<script>
    var myData = [{
        "day": new Date("2014/01/01")
    }, {
        "day": new Date("2014/01/02")
    }, {
        "day": new Date("2014/01/31")
    }];
 
 
    function addPlotBand() {
        $ = $telerik.$;
 
        var start = new Date(2014, 0, 1 + Math.floor(Math.random() * 30));
        var end = new Date(start.getTime() + 1000 * 3600 * 24); // 24 hours after start
 
        var options = {};
 
        options["categoryAxis"] = {
            plotBands: [{
                from: start,
                to: end,
                color: "green"
            }]
        };
 
        $("#chart2").data("kendoChart").setOptions(options);
    }
 
    function pageLoad() {
        $ = $telerik.$;
        $("#chart2").kendoChart({
            dataSource: {
                data: myData
            },
            categoryAxis: {
                type: "date",
                field: "day"
            }
        });
    }
</script>
<telerik:RadButton ID="RadButton1" runat="server" AutoPostBack="false" OnClientClicked="addPlotBand" Text="add plotband" />
<div id="chart2"></div>
<telerik:RadHtmlChart runat="server" ID="chart" Style="visibility: hidden;">
    <PlotArea>
        <XAxis DataLabelsField="day">
        </XAxis>
    </PlotArea>
</telerik:RadHtmlChart>
Completed
Last Updated: 14 Nov 2018 15:28 by Priyanka
Currently there is some space between the PlotArea and the starting/ending points of the LineSeries in RadHtmlChart.
To changethat behavior, so that it is similar to the one in AreaSeries  the justified property (https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/categoryaxis.justified) can be set through the underlying Kendo Chart widget:

        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <script>
                function onLoad(sender) {
                    var chart = sender.get_kendoWidget();
                    var opts = chart.options;
                    opts.categoryAxis.justified = true;
                    chart.setOptions(opts);
                    chart.redraw();
                }
            </script>
        </telerik:RadCodeBlock>
        <telerik:RadHtmlChart runat="server" ID="LineChart" Width="800" Height="500" Transitions="true">
            <ClientEvents OnLoad="onLoad" />
            <PlotArea>
                <Series>
                    <telerik:LineSeries Name="Week 15" MissingValues="Interpolate">
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="15" />
                            <telerik:CategorySeriesItem Y="23" />
                            <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>
Completed
Last Updated: 13 Sep 2018 12:40 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 12
Category: HtmlChart
Type: Feature Request
15
LineBreak is not supported by SVG (more on that - http://www.w3.org/TR/SVG11/text.html#Introduction) and RadHtmlChart uses SVG to render in modern browsers. Add the ability to handle long label text in SVG as well. Currently long strings are getting clipped. 

For the time being the labels can be manually split in separate text elements. For example:
		<script>
			function pageLoad() {
				wrapLabels();
			}
			function wrapLabels() {
				//Find all text elements on the page
				var textElements = document.getElementsByTagName("text");
				//Iterate through the text elements
				for (var i = 0; i < textElements.length; i++) {
					var currTextEl = textElements[i];
					//Set the desired string/symbol that represents the line break
					var lineBreakSymbol = "@LineBreak@";
					if (currTextEl.textContent.indexOf(lineBreakSymbol) != -1) {
						var lines = currTextEl.textContent.split(lineBreakSymbol);
						//Adjust the x and y coordinates for the new text element from the old one
						var textAlignCoefficient = 7;
						var x = currTextEl.attributes.x.textContent * 1 + lines[1].length * textAlignCoefficient;
						var y = currTextEl.attributes.y.textContent * 1 + 20;
						//Obtain the same style for the new text element from the old one
						var style = currTextEl.attributes.style.textContent;
						//Add the new SVG text element
						addSVGTextElement(currTextEl, x, y, style, lines[1]);
						//Adjust the text and the position for the old text element
						currTextEl.textContent = lines[0];
						currTextEl.attributes.x.textContent = currTextEl.attributes.x.textContent * 1 + lines[1].length * textAlignCoefficient;
					}
				}
			}
			function addSVGTextElement(placeHolder, x, y, style, text) {
				var newText = document.createElementNS("http://www.w3.org/2000/svg", "text");

				newText.setAttributeNS(null, "x", x);
				newText.setAttributeNS(null, "y", y);
				newText.setAttributeNS(null, "style", style);

				var textNode = document.createTextNode(text);
				newText.appendChild(textNode);
				placeHolder.parentNode.insertBefore(newText, placeHolder);
			}
		</script>
		<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600px" Height="400px">
			<ChartTitle Text="Chart title @LineBreak@ more text in title">
			</ChartTitle>
			<PlotArea>
				<Series>
					<telerik:ColumnSeries Name="Series 1">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="30" />
							<telerik:CategorySeriesItem Y="10" />
							<telerik:CategorySeriesItem Y="20" />
						</SeriesItems>
						<LabelsAppearance>
							<ClientTemplate>
Category is #=category#@LineBreak@Value is: #=value#
							</ClientTemplate>
						</LabelsAppearance>
					</telerik:ColumnSeries>
				</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 Sep 2018 11:17 by ADMIN
ADMIN
Created by: Danail Vasilev
Comments: 16
Category: HtmlChart
Type: Feature Request
30
In scenarios where the Series are Column/Bar and Positive and Negative values are present, the XAxis labels are overlapped by the Series themselves. Expose an additional Position property for the axis labels that controls their position to Top/Bottom. 

For the time being you can choose either approach:

1) Use a second x-axis that stores only the labels:

a) Category Axis example:
		<script>
			function BottomXAxisLabels() {
				var chart = $find("<%=RadHtmlChart1.ClientID%>").get_kendoWidget();
				var axis = $telerik.$.extend(true, {}, chart.options.categoryAxis);
				axis.line.visible = false;
				chart.setOptions({ categoryAxis: [{}, axis] });
				chart.options.valueAxis.axisCrossingValues = [0, -99999999999];
				chart.redraw();
			}
		</script>
		<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="600px" Height="400px">
			<ClientEvents OnLoad="BottomXAxisLabels" />
			<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>
					<Items>
						<telerik:AxisItem LabelText="1" />
						<telerik:AxisItem LabelText="2" />
						<telerik:AxisItem LabelText="3" />
					</Items>
				</XAxis>
			</PlotArea>
			<ChartTitle Text="Product sales for 2011">
			</ChartTitle>
			<Legend>
				<Appearance Position="Bottom" />
			</Legend>
		</telerik:RadHtmlChart>

b) Numeric axis example:
<script>
			function BottomXAxisLabels() {
				var chart = $find("<%=RadHtmlChart1.ClientID%>").get_kendoWidget();
			    var axis = $telerik.$.extend(true, {}, chart.options.xAxis);
				axis.line.visible = false;
				chart.setOptions({ xAxis: [{ labels: { visible: false }}, axis] });
				chart.options.yAxis.axisCrossingValues = [0, -99999999999];
				chart.redraw();
			}
		</script>
		<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="600px" Height="400px">
			<ClientEvents OnLoad="BottomXAxisLabels" />
			<PlotArea>
				<Series>
					<telerik:ScatterLineSeries Name="Product 1">
						<SeriesItems>
							<telerik:ScatterSeriesItem Y="15000" X="5" />
							<telerik:ScatterSeriesItem Y="-4000" X="6" />
							<telerik:ScatterSeriesItem Y="10000" X="7"/>
						</SeriesItems>
					</telerik:ScatterLineSeries>
				</Series>
			</PlotArea>
			<ChartTitle Text="Product sales for 2011">
			</ChartTitle>
			<Legend>
				<Appearance Position="Bottom" />
			</Legend>
		</telerik:RadHtmlChart>

2) Use the TextStyle property of the RadHtmlChart , in order to set higher margin for the XAxis labels. For example:

		<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>
						<TextStyle Margin="135 0 0 0" />
					</LabelsAppearance>
					<Items>
						<telerik:AxisItem LabelText="item1" />
						<telerik:AxisItem LabelText="item2" />
						<telerik:AxisItem LabelText="item3" />
					</Items>
				</XAxis>
			</PlotArea>
		</telerik:RadHtmlChart>

Note: Labels margin and chart's PlotArea height are inversely proportional - the higher the margin is the lower the chart's PlotArea height will be. This resizing is needed, in order for the chart's main dimensions to be kept.
Completed
Last Updated: 18 Feb 2018 07:18 by Kasim
ADMIN
Created by: Danail Vasilev
Comments: 3
Category: HtmlChart
Type: Feature Request
7
Currently ClientTemplates are exposed only for the Series labels and tooltips. Improving this functionality will let you feed data for the legend from more than one column of the datasource as well as to format numbers and dates in the legend. The benefit will be essential for Pie and Donut series.

For the time being the following workaround can be used:
JavaScript:

    <script>
        function pageLoad() {
            var chart = $find("<%=RadHtmlChart1.ClientID%>");
            chart._chartObject.options.legend.labels.template = "#=kendo.format(\'{0:d}\',dataItem.SellDate)#";
            chart.repaint();
        }
    </script>

ASPX:

        <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="640px" Height="480px">
            <PlotArea>
                <Series>
                    <telerik:PieSeries DataFieldY="SellQuantity" NameField="SellDate">
                    </telerik:PieSeries>
                </Series>
            </PlotArea>
        </telerik:RadHtmlChart>
Completed
Last Updated: 31 Jan 2018 15:18 by Dane
For example by exposing an additional width property.
Completed
Last Updated: 09 Nov 2017 08:52 by Hessel
ADMIN
Created by: Danail Vasilev
Comments: 5
Category: HtmlChart
Type: Feature Request
4
For the time being the following events can be handled through the chartObject.
-drag event is fired when the plot area of the main chart is dragged.
-zoom event is fired when the mouse wheel is used in the plot area of the main chart.
-select event is fired when the range of the selector from the navigator pane is changed.

JavaScript:

    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script>
            function OnLoad(sender) {
                var chart = sender;
                chart._chartObject.bind("dragEnd", OnDragEnd);
                chart._chartObject.bind("selectEnd", OnSelectEnd);
                chart._chartObject.bind("zoom", OnZoom);
            }
            function OnDragEnd(e) {
                alert("OnDragEnd triggered: \nMin: " + e.axisRanges['mainAxis'].min + "\n Max: " + e.axisRanges['mainAxis'].max);
            }
            function OnSelectEnd(e) {
                alert("OnSelectEnd triggered: \nFrom: " + e.from + "\n To: " + e.to);
            }
            function OnZoom(e) {
            
                alert("OnZoom triggered: \nMin: " + e.axisRanges['mainAxis'].min + "\n Max: " + e.axisRanges['mainAxis'].max);
            }
        </script>
    </telerik:RadCodeBlock>
ASPX:

        <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Layout="Stock" Width="800" Height="400"
            Transitions="true">
            <ClientEvents OnLoad="OnLoad" />
            <PlotArea>
                <XAxis Name="mainAxis" DataLabelsField="SellDate" Type="Date">
                </XAxis>
                <Series>
                    <telerik:ColumnSeries DataFieldY="SellQuantity">
                    </telerik:ColumnSeries>
                </Series>
            </PlotArea>
            <Navigator Visible="true">
                <XAxis Name="navAxis"></XAxis>
                <SelectionHint Visible="true" />
                <Series>
                    <telerik:AreaSeries DataFieldY="SellQuantity">
                    </telerik:AreaSeries>
                </Series>
            </Navigator>
        </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, 06, 12));
        dt.Rows.Add(1, 5, new DateTime(2011, 12, 12));
        dt.Rows.Add(2, 6, new DateTime(2012, 06, 17));
        dt.Rows.Add(3, 4, new DateTime(2012, 09, 18));
        dt.Rows.Add(4, 7, new DateTime(2013, 03, 18));

        return dt;
    }
Completed
Last Updated: 24 Jul 2017 20:23 by E J
ADMIN
Created by: Iana Tsolova
Comments: 10
Category: HtmlChart
Type: Feature Request
18
provide htmlchart in 2D/3D
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.

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.
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.
Completed
Last Updated: 28 Jul 2016 12:51 by ADMIN
Created by: Michael
Comments: 1
Category: HtmlChart
Type: Feature Request
2
Axes themselves do not have tooltips, only series do. Thus, tooltips cannot be added to the y-axis.
Add
Completed
Last Updated: 28 Jul 2016 11:18 by ADMIN
The lines can be similar to the ones in the box plot chart type - http://www.telerik.com/help/aspnet-ajax/htmlchart-types-box-plot-chart.html .

For the time being you can use transparent box plot series in order to simulate this. For example:

ASPX:

        <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
		<script>
			function pageLoad() {
				//Attach the legendItemClick event on pageLoad:
				var chart = $find("<%=RadHtmlChart1.ClientID%>")._chartObject.bind("legendItemClick", OnLegendClicked);
			}
			function OnLegendClicked(e) {
				if (e.seriesIndex >= 3) {
					var meanSeriesVisible = e.sender.options.series[3].visible;
					var medianSeriesVisible = e.sender.options.series[4].visible;

					if (meanSeriesVisible == medianSeriesVisible) {
						if (e.series.visible == false) {
							e.sender.options.series[5].visible = false;
						}
					}
					else {
						if (e.series.visible == false) {
							e.preventDefault();
							e.sender.options.series[3].visible = false;
							e.sender.options.series[4].visible = false;
							e.sender.options.series[5].visible = true;
							e.sender.options.transitions = false;
							e.sender.redraw();
						}
					}
				}
			}
		</script>
        <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="1000" Height="500">
            <PlotArea>
                <Series>
                    <telerik:ColumnSeries Name="Germany Gold" GroupName="Germany" Gap="1">
                        <Appearance>
                            <FillStyle BackgroundColor="#DDD9C3" />
                        </Appearance>
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="13" />
                            <telerik:CategorySeriesItem Y="12" />
                            <telerik:CategorySeriesItem Y="16" />
                        </SeriesItems>
                        <TooltipsAppearance ClientTemplate="#= series.name# medals: #= dataItem.value#" />
                        <LabelsAppearance Visible="false"></LabelsAppearance>
                    </telerik:ColumnSeries>
                    <telerik:ColumnSeries Name="Germany Silver" GroupName="Germany">
                        <Appearance>
                            <FillStyle BackgroundColor="#C4BD97" />
                        </Appearance>
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="17" />
                            <telerik:CategorySeriesItem Y="16" />
                            <telerik:CategorySeriesItem Y="10" />
                        </SeriesItems>
                        <TooltipsAppearance ClientTemplate="#= series.name# medals: #= dataItem.value#" />
                        <LabelsAppearance Visible="false"></LabelsAppearance>
                    </telerik:ColumnSeries>
                    <telerik:ColumnSeries Name="Germany Bronze" GroupName="Germany">
                        <Appearance>
                            <FillStyle BackgroundColor="#948A54" />
                        </Appearance>
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="26" />
                            <telerik:CategorySeriesItem Y="20" />
                            <telerik:CategorySeriesItem Y="15" />
                        </SeriesItems>
                        <TooltipsAppearance ClientTemplate="#= series.name# medals: #= dataItem.value#" Color="White" />
                        <LabelsAppearance Visible="false"></LabelsAppearance>
                    </telerik:ColumnSeries>
                    <telerik:BoxPlotSeries Name="Mean" Visible="true">
                        <Appearance>
                            <FillStyle BackgroundColor="Transparent" />
                        </Appearance>
                        <SeriesItems>
                            <telerik:BoxPlotSeriesItem Mean="11" Median="0" Lower="0" Upper="0" Q1="0" Q3="0"></telerik:BoxPlotSeriesItem>
                            <telerik:BoxPlotSeriesItem Mean="15" Median="0" Lower="0" Upper="0" Q1="0" Q3="0"></telerik:BoxPlotSeriesItem>
                            <telerik:BoxPlotSeriesItem Mean="14" Median="0" Lower="0" Upper="0" Q1="0" Q3="0"></telerik:BoxPlotSeriesItem>
                        </SeriesItems>
                    </telerik:BoxPlotSeries>
                    <telerik:BoxPlotSeries Name="Median" Visible="false">
                        <Appearance>
                            <FillStyle BackgroundColor="Transparent" />
                        </Appearance>
                        <SeriesItems>
                            <telerik:BoxPlotSeriesItem Mean="0" Median="12" Lower="0" Upper="0" Q1="0" Q3="0"></telerik:BoxPlotSeriesItem>
                            <telerik:BoxPlotSeriesItem Mean="0" Median="10" Lower="0" Upper="0" Q1="0" Q3="0"></telerik:BoxPlotSeriesItem>
                            <telerik:BoxPlotSeriesItem Mean="0" Median="13" Lower="0" Upper="0" Q1="0" Q3="0"></telerik:BoxPlotSeriesItem>
                        </SeriesItems>
                    </telerik:BoxPlotSeries>
                    <telerik:BoxPlotSeries Name="Mean and Median" Visible="false">
                        <Appearance>
                            <FillStyle BackgroundColor="Transparent" />
                        </Appearance>
                        <SeriesItems>
                            <telerik:BoxPlotSeriesItem Mean="11" Median="12" Lower="0" Upper="0" Q1="0" Q3="0"></telerik:BoxPlotSeriesItem>
                            <telerik:BoxPlotSeriesItem Mean="15" Median="10" Lower="0" Upper="0" Q1="0" Q3="0"></telerik:BoxPlotSeriesItem>
                            <telerik:BoxPlotSeriesItem Mean="14" Median="13" Lower="0" Upper="0" Q1="0" Q3="0"></telerik:BoxPlotSeriesItem>
                        </SeriesItems>
                    </telerik:BoxPlotSeries>
                </Series>
                <YAxis>
                    <TitleAppearance Text="Number of Medals" />
                </YAxis>
                <XAxis>
                    <LabelsAppearance DataFormatString="Year {0}" />
                    <Items>
                        <telerik:AxisItem LabelText="2000" />
                        <telerik:AxisItem LabelText="2004" />
                        <telerik:AxisItem LabelText="2008" />
                    </Items>
                </XAxis>
            </PlotArea>
            <ChartTitle Text="Olympic Medals Per Country Over the Years">
            </ChartTitle>
            <Legend>
                <Appearance Position="Right" />
            </Legend>
        </telerik:RadHtmlChart>
1 2 3 4