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
For the time being the properties can be set through the chartObject. For example: ASPX: <script> function pageLoad() { var chart = $find("<%=RadHtmlChart1.ClientID%>"); chart._chartObject.options.valueAxis.max = 100; chart._chartObject.options.valueAxis.min = 10; chart.repaint(); } </script> <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server"> <PlotArea> <Series> <telerik:RadarColumnSeries DataFieldY="yValues"> </telerik:RadarColumnSeries> </Series> <XAxis DataLabelsField="xValues"></XAxis> <YAxis MinValue="10" MaxValue="100"></YAxis> </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("yValues", typeof(int)); dt.Columns.Add("xValues", typeof(string)); dt.Rows.Add(1, 12, 20); dt.Rows.Add(2, 15, 40); dt.Rows.Add(3, 16, 60); dt.Rows.Add(4, 14, 80); dt.Rows.Add(5, 17, 100); return dt; }
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>
For the time begin the event logic can be executed with a small time out: JavaScript <script type="text/javascript"> var isFirstClick = "1"; function OnClientSeriesClicked(sender, args) { setTimeout(function () { alert(isFirstClick); }, 0); } </script> ASPX: <telerik:RadHtmlChart runat="server" Width="900px" Height="700px" ID="RadHtmlChart2" OnClientSeriesClicked="OnClientSeriesClicked"> <PlotArea> <Series> <telerik:BarSeries> <SeriesItems> <telerik:CategorySeriesItem Y="10" /> </SeriesItems> </telerik:BarSeries> </Series> </PlotArea> </telerik:RadHtmlChart>
String data source fields in the RadHtmlChart that contain only numeric characters should not be parsed to decimal. Also when such a string starts with the 0 character, it is omitted. For example the "0" item in the legend is not displayed with the example below: ASPX: <telerik:RadHtmlChart runat="server" ID="PieChart1" Width="800" Height="500" Transitions="true"> <Appearance> <FillStyle BackgroundColor="White"></FillStyle> </Appearance> <ChartTitle Text="Browser Usage for April 2012"> <Appearance Align="Center" BackgroundColor="White" Position="Top"> </Appearance> </ChartTitle> <Legend> <Appearance BackgroundColor="White" Position="Right" Visible="true"> </Appearance> </Legend> <PlotArea> <Appearance> <FillStyle BackgroundColor="White"></FillStyle> </Appearance> <Series> <telerik:PieSeries StartAngle="90" DataFieldY="code_count" NameField="items_names"> <LabelsAppearance Position="OutsideEnd" DataFormatString="{0} %"> </LabelsAppearance> <TooltipsAppearance Color="White" DataFormatString="{0} %"></TooltipsAppearance> </telerik:PieSeries> </Series> </PlotArea> </telerik:RadHtmlChart> C#: using System.Data; protected void Page_Load(object sender, EventArgs e) { PieChart1.DataSource = GetData(); PieChart1.DataBind(); } protected DataTable GetData() { DataTable dt = new DataTable(); dt.Columns.Add("ID", typeof(int)); dt.Columns.Add("code_count", typeof(int)); dt.Columns.Add("items_names", typeof(string)); dt.Rows.Add(1, 771, "0"); dt.Rows.Add(2, 187, "1"); dt.Rows.Add(3, 178, "2"); dt.Rows.Add(4, 60, "3"); return dt; }
For the time being the CommonTooltipsAppearance.Shared property must be set to false. For example: <telerik:RadHtmlChart ID="RadHtmlChart2" runat="server" Layout="Sparkline" Width="100" Height="150"> <PlotArea> <CommonTooltipsAppearance Shared="false"></CommonTooltipsAppearance> <Series> <telerik:LineSeries> <TooltipsAppearance> <ClientTemplate> Value: #=value# <br /> Category #=category# </ClientTemplate> </TooltipsAppearance> <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>
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>