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: 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: 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: 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>
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>
1 2 3 4 5 6