For the time being the function can be set through the kendoWidget: ASPX: <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager> <script> function pageLoad() { var chart = $find("<%=RadHtmlChart1.ClientID%>"); chart._chartObject.options.series[0].markers.type = function (point) { if (point.value > 2) { return "triangle"; } else { return "circle"; } }; chart.repaint(); } </script> <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="600px" Height="400px"> <PlotArea> <Series> <telerik:LineSeries Name="Product 1"> <SeriesItems> <telerik:CategorySeriesItem Y="1" /> <telerik:CategorySeriesItem Y="2" /> <telerik:CategorySeriesItem Y="3" /> </SeriesItems> </telerik:LineSeries> </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>
For the time being you can set the types through the kendoWidget: <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"> <script> function pageLoad() { var chart = $find('<%=RadHtmlChart1.ClientID%>'); chart._chartObject.options.series[0].type = "verticalLine"; chart.repaint(); } </script> </telerik:RadCodeBlock> <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="600px" Height="400px"> <PlotArea> <Series> <telerik:LineSeries Name="Product 1"> <SeriesItems> <telerik:CategorySeriesItem Y="15000" /> <telerik:CategorySeriesItem Y="23000" /> <telerik:CategorySeriesItem Y="10000" /> </SeriesItems> </telerik:LineSeries> </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>
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>
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>
For the time being the property can be set through the chartObject. For example: <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> </telerik:RadScriptManager> <script> function pageLoad() { var chart = $find("<%=RadHtmlChart1.ClientID%>"); //DashType: dash, dashDot, dot, longDash, longDashDot, longDashDotDot, solid chart._chartObject.options.categoryAxis.majorGridLines.dashType = "dot"; chart._chartObject.options.categoryAxis.minorGridLines.dashType = "dot"; chart._chartObject.options.valueAxis.majorGridLines.dashType = "dot"; chart._chartObject.options.valueAxis.minorGridLines.dashType = "dot"; chart.repaint(); } </script> <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600px" Height="400px"> <PlotArea> <Series> <telerik:LineSeries Name="Series 1"> <SeriesItems> <telerik:CategorySeriesItem Y="30" /> <telerik:CategorySeriesItem Y="10" /> <telerik:CategorySeriesItem Y="20" /> </SeriesItems> </telerik:LineSeries> </Series> <XAxis> <Items> <telerik:AxisItem LabelText="item 1" /> <telerik:AxisItem LabelText="item 2" /> <telerik:AxisItem LabelText="item 3" /> </Items> </XAxis> </PlotArea> </telerik:RadHtmlChart>
The property will be like similar to http://docs.telerik.com/kendo-ui/api/dataviz/chart#configuration-categoryAxis.autoBaseUnitSteps. For the time being the property can be set through the kendo widget: ASPX: <script type="text/javascript"> function pageLoad() { var kendoWidget = $find("<%=RadHtmlChart1.ClientID%>").get_kendoWidget(); kendoWidget.options.categoryAxis.baseUnitStep = "auto"; kendoWidget.options.categoryAxis.autoBaseUnitSteps = { months: [4] }; kendoWidget.redraw(); } </script> <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="400"> <PlotArea> <Series> <telerik:ColumnSeries DataFieldY="SellQuantity"> </telerik:ColumnSeries> </Series> <XAxis DataLabelsField="SellDate" > <LabelsAppearance DataFormatString="MM/yyyy" RotationAngle="45"></LabelsAppearance> </XAxis> </PlotArea> </telerik:RadHtmlChart> C#: protected void Page_Load(object sender, EventArgs e) { RadHtmlChart1.DataSource = GetData(); RadHtmlChart1.DataBind(); } protected DataTable GetData() { DataTable dt = new DataTable(); dt.Columns.Add("ID", typeof(int)); dt.Columns.Add("SellQuantity", typeof(int)); dt.Columns.Add("SellDate", typeof(DateTime)); dt.Rows.Add(1, 2, new DateTime(2011, 01, 01)); dt.Rows.Add(1, 2, new DateTime(2011, 06, 01)); dt.Rows.Add(2, 5, new DateTime(2011, 12, 01)); dt.Rows.Add(3, 6, new DateTime(2012, 06, 01)); dt.Rows.Add(4, 4, new DateTime(2012, 09, 01)); dt.Rows.Add(5, 7, new DateTime(2013, 03, 01)); return dt; }
For the time being you can do that manually with an initially hidden panel that stores the text/image and display it only when there is no data in the chart. This can be done on the server-side as well as on the client-side. For example: Server-side code: ASPX: <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager> <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Skin="Black" Width="400px" Height="200px"> </telerik:RadHtmlChart> <asp:Panel runat="server" Visible="false" ID="panelImage" Width="200" Height="200"> <asp:Label ID="Label1" Text="There is not data in the chart" runat="server" /> <asp:Image ID="image1" runat="server" ImageUrl="telerik_new-logo.png" Width="200" /> </asp:Panel> C#: protected void Page_Load(object sender, EventArgs e) { BarSeries bar = new BarSeries(); //CategorySeriesItem csi = new CategorySeriesItem() { Y = 10 }; //bar.SeriesItems.Add(csi); RadHtmlChart1.PlotArea.Series.Add(bar); //If there isn't any items in the first series hide the chart and display the panel if ((RadHtmlChart1.PlotArea.Series[0] as BarSeries).SeriesItems.Count == 0) { RadHtmlChart1.Visible = false; panelImage.Visible = true; } } Client-side code: ASPX: <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager> <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Skin="Black" Width="400px" Height="200px"> </telerik:RadHtmlChart> <asp:Panel runat="server" ID="panelImage" Width="200" Height="200" Style="display: none;"> <asp:Label ID="Label1" Text="There is not data in the chart" runat="server" /> <asp:Image ID="image1" runat="server" ImageUrl="telerik_new-logo.png" Width="200" /> </asp:Panel> <script type="text/javascript"> function pageLoad() { var chart = $find("<%=RadHtmlChart1.ClientID%>"); //Hide the chart and display the panel when there is no data in the first series if (chart._chartObject.options.series[0].data.length == 0) { chart.get_element().style.display = "none"; $get("<%=panelImage.ClientID%>").style.display = "block"; } } </script> C#: protected void Page_Load(object sender, EventArgs e) { BarSeries bar = new BarSeries(); //CategorySeriesItem csi = new CategorySeriesItem() { Y = 10 }; //bar.SeriesItems.Add(csi); RadHtmlChart1.PlotArea.Series.Add(bar); }
For the time being the property can be set through the underlying Kendo Chart widget. For example: <script> function OnLoad(chart) { var widget = chart.get_kendoWidget(); //also applies for the minor grid lines - replace majorGridLines with minorGridLines //Numeric series widget.options.xAxis.majorGridLines.step = 5; widget.options.yAxis.majorGridLines.step = 5; //Category series //widget.options.categoryAxis.majorGridLines.step = 5; //widget.options.valueAxis.majorGridLines.step = 5; widget.redraw(); } </script> <telerik:RadHtmlChart runat="server" ID="BubbleChart" Width="500" Height="400"> <ClientEvents OnLoad="OnLoad" /> <ChartTitle Text="Market Share Study"> </ChartTitle> <PlotArea> <Appearance> <FillStyle BackgroundColor="White"></FillStyle> </Appearance> <XAxis MinValue="0" MaxValue="100" Step="10"> <MinorGridLines Visible="false" /> </XAxis> <YAxis MinValue="0" MaxValue="100" Step="10"> <MinorGridLines Visible="false" /> </YAxis> <Series> <telerik:BubbleSeries> <Appearance FillStyle-BackgroundColor="#6ab2c9"> </Appearance> <TooltipsAppearance DataFormatString="Percentage of Market Share: {2}%<br /> Number of products: {0}<br /> Sales: ${1}" /> <SeriesItems> <telerik:BubbleSeriesItem Size="3" X="5" Y="55" /> <telerik:BubbleSeriesItem Size="12" X="14" Y="80" /> <telerik:BubbleSeriesItem Size="33" X="20" Y="60" /> <telerik:BubbleSeriesItem Size="10" X="18" Y="24" /> <telerik:BubbleSeriesItem Size="42" X="22" Y="32" /> </SeriesItems> </telerik:BubbleSeries> </Series> </PlotArea> <Legend> <Appearance Position="Right"></Appearance> </Legend> </telerik:RadHtmlChart>
Width and height properties for the legend that will provide firm dimensions in pixels, so regardless of the series names' length, it will always have constant size. You can set width and height through the kendo widget: <script> function pageLoad() { var chart = $find("<%=DonutChart.ClientID%>").get_kendoWidget(); chart.options.legend.height = 80; chart.redraw(); } </script> <telerik:RadHtmlChart runat="server" ID="DonutChart" Width="500" Height="500" Transitions="true"> <Appearance> <FillStyle BackgroundColor="White"></FillStyle> </Appearance> <ChartTitle Text="OS Usage Statistics for December 2012"> <Appearance Align="Center" Position="Top"></Appearance> </ChartTitle> <PlotArea> <Series> <telerik:DonutSeries> <LabelsAppearance Visible="false"> </LabelsAppearance> <TooltipsAppearance DataFormatString="{0}%" BackgroundColor="White"></TooltipsAppearance> <SeriesItems> <telerik:PieSeriesItem BackgroundColor="#00adcc" Name="Win7" Y="55.6"></telerik:PieSeriesItem> <telerik:PieSeriesItem BackgroundColor="#cccccc" Name="Win8" Y="2.5"></telerik:PieSeriesItem> <telerik:PieSeriesItem BackgroundColor="#999999" Name="Vista" Y="2.8"></telerik:PieSeriesItem> <telerik:PieSeriesItem BackgroundColor="#888888" Name="NT" Y="1.8"></telerik:PieSeriesItem> <telerik:PieSeriesItem BackgroundColor="#777777" Name="WinXP" Y="21.1"></telerik:PieSeriesItem> <telerik:PieSeriesItem BackgroundColor="#666666" Name="Linux" Y="4.7"></telerik:PieSeriesItem> <telerik:PieSeriesItem BackgroundColor="#555555" Name="Mac" Y="8.7"></telerik:PieSeriesItem> <telerik:PieSeriesItem BackgroundColor="#444444" Name="Mobile" Y="2.2"></telerik:PieSeriesItem> </SeriesItems> </telerik:DonutSeries> </Series> </PlotArea> </telerik:RadHtmlChart>
Axes themselves do not have tooltips, only series do. Thus, tooltips cannot be added to the y-axis. Add
The functionality is similar to the one in Kendo UI Chart (http://demos.telerik.com/kendo-ui/dataviz/line-charts/notes.html) : http://dojo.telerik.com/OZuNU For the time being you can try to utilize the kendo.drawing API in order to place the text on a particular position. This forum may be helpful on the matter - http://www.telerik.com/forums/custom-drawing#sOkmYWbfrUW404Rr13eLDQ
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.
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>
inkspace not suitable for radhtmlchart exporting. Because inkspace does not work in windows server 2008 R2. So please provide direct exporting feature for radhtmlcharts.
Please provide RadHtmlChart Export features
For the time being the property (http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-legend.border) can be set through the chartObject. For example: JavaScript: <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"> <script> function pageLoad() { var chart = $find("<%=PieChart1.ClientID%>"); chart._chartObject.options.legend.border = { width: 2, color: "green", dashType: "longDashDotDot" } chart.repaint(); } </script> </telerik:RadCodeBlock> ASPX: <telerik:RadHtmlChart runat="server" ID="PieChart1" Transitions="true"> <PlotArea> <Series> <telerik:PieSeries StartAngle="90"> <LabelsAppearance Position="OutsideEnd" DataFormatString="{0} %" /> <TooltipsAppearance DataFormatString="{0} %" /> <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="Browser Usage for April 2012"> </ChartTitle> </telerik:RadHtmlChart>
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
The functionality is currently exposed only by the x-axis of the sparkliens. It would be a good idea to be exposed by the other series types as well. For the time being you can configure the cross hair through the kendo widget: <script> function pageLoad() { $find('RadHtmlChart1').get_kendoWidget().setOptions({categoryAxis:{crosshair:{ color: "green", width: 2, visible: true}}}); } </script> <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="400"> <PlotArea> <Series> <telerik:ColumnSeries Name="Series 1"> <SeriesItems> <telerik:CategorySeriesItem Y="30" /> <telerik:CategorySeriesItem Y="10" /> <telerik:CategorySeriesItem Y="20" /> </SeriesItems> </telerik:ColumnSeries> <telerik:LineSeries Name="Series 2"> <SeriesItems> <telerik:CategorySeriesItem Y="39" /> <telerik:CategorySeriesItem Y="19" /> <telerik:CategorySeriesItem Y="29" /> </SeriesItems> </telerik:LineSeries> </Series> <XAxis> <LabelsAppearance RotationAngle="33"></LabelsAppearance> <Items> <telerik:AxisItem LabelText="Item 1" /> <telerik:AxisItem LabelText="Item 2" /> <telerik:AxisItem LabelText="Item 3" /> </Items> </XAxis> </PlotArea> </telerik:RadHtmlChart>