This can be done by exposing a spacing property for the particular Series. For the time being mentioned properties can be set on the client through the chartObject of the RadHtmlChart: JavaScript: <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"> <script type="text/javascript"> function ChangeSpace() { var chart = $find("<%=ColumnChart.ClientID%>"); chart._chartObject.options.series[0].spacing = 0.9; chart.repaint(); } function ChangeGap() { var chart = $find("<%=ColumnChart.ClientID%>"); chart._chartObject.options.series[0].gap = 10; chart.repaint(); } </script> </telerik:RadCodeBlock> ASPX: <telerik:RadButton ID="RadButton1" runat="server" AutoPostBack="false" Text="Change Space" OnClientClicked="ChangeSpace" /> <telerik:RadButton ID="RadButton2" runat="server" AutoPostBack="false" Text="Change Gap" OnClientClicked="ChangeGap" /> <telerik:RadHtmlChart runat="server" ID="ColumnChart" Transitions="true"> .... </telerik:RadHtmlChart>
Currently margin and padding can be set in the RadHtmlChart through the TextStyle property exposed by the Axis Label, Axis Titles, Chart Legend, Chart Title and Series Labels. Add the ability to control the margin and padding for the PlotArea as well. For the time being the following workaround can be used: JavaScript: <script> function pageLoad() { var chart = $find("<%=RadHtmlChart1.ClientID%>"); chart._chartObject.options.plotArea.margin = { top: 100, right: 100, bottom: 50, left: 100 }; chart.repaint(); } </script> ASPX: <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="400" Height="400"> <PlotArea> <Series> <telerik:PieSeries> <SeriesItems> <telerik:PieSeriesItem Name="Item 1" Y="30"></telerik:PieSeriesItem> <telerik:PieSeriesItem Name="Item 2" Y="10"></telerik:PieSeriesItem> <telerik:PieSeriesItem Name="Item 3" Y="20"></telerik:PieSeriesItem> </SeriesItems> </telerik:PieSeries> </Series> </PlotArea> </telerik:RadHtmlChart>
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>
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; }
Adding a control from the JDash suite to the page breaks RadHtmlChart.
Please refer to the ticket for more details.
Currently there are only three properties exposed by the MarkersAppearance - MarkersType, BackgroundColor and Visible in AreaSeries, LineSeries, ScatterSeries and ScatterLineSeries. Expose more properties like Size, BorderColor and BorderWidth for the markers in the mentioned Series. For the time being the following workaround can be used: function pageLoad() { var circle = document.getElementsByTagName("circle"); for (var i = 0; i < circle.length; i++) { //Modify the size of the marker circle[i].r.baseVal.value = 15; } //Modify the width of the marker border $telerik.$('circle').attr('stroke-width', 13); }
Stacking of bar and column series should allow grouping. This could be done by making the Stacked property not a boolean, but a string to denote the group name.
Currently it is not possible to add null-able series items in RadHtmlChart in the markup or programmatically. If a null-able item is added it is omitted and is replaced by the next series item from the current Series. The workaround is to either data bound the chart to a data source or convert the null-able values to zeros: C#: decimal? nullValue = null; if (nullValue == null) { nullValue = 0; } ColumnSeries colSeries2 = RadHtmlChart1.PlotArea.Series[1] as ColumnSeries; colSeries2.SeriesItems.Add(39); colSeries2.SeriesItems.Add(nullValue); colSeries2.SeriesItems.Add(3);
It would be great to be able to specify more layout properties via the data bound data. For example, if we could bind a property in the data to a series type we could generate different series on the fly. This is important to me as I want to make the page as responsive as possible, so all charts load on demand - but as the data is generated in an asynchronous fashion, I'm not able to predetermine how many series I can create.
The options for positioning a legend in a RadHtmlChart are somewhat limited. Useful extensions: 1. Support Left/Center/Right options for legends positioned at top and bottom; support Top/Middle/Bottom options for legends positioned at left and right. 2. Support positioning legends within the plot area. For the time being the following workaround can be used: <script> function pageLoad() { var kendoWidget1 = $find("<%=PieChart1.ClientID%>").get_kendoWidget(); kendoWidget1.options.legend.position = "custom"; kendoWidget1.options.legend.offsetX = 300; kendoWidget1.options.legend.offsetY = 80; kendoWidget1.redraw(); } </script> <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 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; }
inkspace not suitable for radhtmlchart exporting. Because inkspace does not work in windows server 2008 R2. So please provide direct exporting feature for radhtmlcharts.
A functionality similar to KendoUI's error bars - http://demos.telerik.com/kendo-ui/dataviz/line-charts/error-bars.html
There is no axis click event. If we expose such event we can give custom info to the client about this axis. For the time being the event can the attached through the chartObject: <script> function pageLoad() { var chart = $find("<%=ColumnChart1.ClientID%>"); chart._chartObject.bind("axisLabelClick", chart_axisLabelClick); } function chart_axisLabelClick(e) { alert(e.value); } </script> <telerik:RadHtmlChart runat="server" ID="ColumnChart1" Width="600px" Height="400px"> <PlotArea> <Series> <telerik:ColumnSeries Name="Product 1"> <SeriesItems> <telerik:CategorySeriesItem Y="15000" /> <telerik:CategorySeriesItem Y="23000" /> <telerik:CategorySeriesItem Y="10000" /> </SeriesItems> </telerik:ColumnSeries> </Series> <XAxis> <Items> <telerik:AxisItem LabelText="Item 1" /> <telerik:AxisItem LabelText="Item 2" /> <telerik:AxisItem LabelText="Item 3" /> </Items> </XAxis> </PlotArea> <ChartTitle Text="Product sales for 2011"> </ChartTitle> <Legend> <Appearance Position="Bottom" /> </Legend> </telerik:RadHtmlChart>
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); }
Reproduction steps - Run the code below and click Show Chart - chart is not displayed. ASPX: <div id="div1" style="visibility: hidden;"> <telerik:RadHtmlChart runat="server" ID="ColumnChart1" Width="600px" Height="400px"> <PlotArea> <Series> <telerik:ColumnSeries Name="Product 1"> <SeriesItems> <telerik:CategorySeriesItem Y="1" /> <telerik:CategorySeriesItem Y="2" /> <telerik:CategorySeriesItem Y="3" /> </SeriesItems> </telerik:ColumnSeries> </Series> </PlotArea> </telerik:RadHtmlChart> </div> <div id="chart" style="visibility: hidden;">HtmlChart wrapper</div> <input type="button" onclick="showChart(); return false;" value="Show Chart" /> <script> $ = $telerik.$; function showChart() { $("#div1").attr("style", "visibility:visible"); } </script> Solution 1: Use the workaround below: <telerik:RadRotator ID="RadRotator1" runat="server" Height="500px" ItemHeight="300px" ItemWidth="300px" Skin="Default" Width="1000px" RotatorType="AutomaticAdvance"> <Items> <telerik:RadRotatorItem> <ItemTemplate> <telerik:RadHtmlChart ID="RadHtmlChart2" runat="server" Height="300px" Skin="Silk" Width="300px" Transitions="False" Visible="true"> <PlotArea> <Series> <telerik:PieSeries> <SeriesItems> <telerik:PieSeriesItem Name="a" Y="12" /> <telerik:PieSeriesItem Name="b" Y="5" /> </SeriesItems> </telerik:PieSeries> </Series> </PlotArea> </telerik:RadHtmlChart> </ItemTemplate> </telerik:RadRotatorItem> </Items> <ItemTemplate> </ItemTemplate> </telerik:RadRotator> <script> $ = $telerik.$; Telerik.Web.UI.RadHtmlChart.prototype.repaint = function () { var that = this; if (that._chartObject) { if (that._isDataSourceChanged()) { that._loadData(); } else { that._resetVisibilityOption(); that._chartObject.redraw(); } } }; Telerik.Web.UI.RadHtmlChart.prototype._resetVisibilityOption = function () { var that = this; that._chartObject.options.visible = that._options.visible = that.get_visible(); }; Telerik.Web.UI.RadHtmlChart.prototype._getMainConfig = function () { var that = this; //when visible is false - nothing is sent from the server to save transferred data //e.g - there are properties set but visible is false - we do not need to send those properties amyway //that is why - set visible: false when nothing is sent from the server that._options = $telerik._getPropertiesParameter(that, that.constructor); that._cleanUpConfigProperties(); that._options["theme"] = that.get_skin(); that._options["visible"] = $(that.get_element()).is(':visible'); that._options["title"] = that._chartTitle ? that._parseObject(that._chartTitle) : { visible: false }; that._options["legend"] = that._legend ? that._parseObject(that._legend) : { visible: false }; if (that._chartArea) { that._options["chartArea"] = that._parseObject(that._chartArea); } if (that._isSparklineChart()) { that._setMinimumSparklineWidth(); } if (that._plotArea) { that._configurePlotArea(); } if (that._series) { /*jshint evil: true */ that._options["series"] = eval(that._series); /*jshint evil: false */ } if (that._isStockChart()) { that._configureStockChart(); } }; </script> Solution 2: Hide the chart on load event: <div id="div1"> <telerik:RadHtmlChart runat="server" ID="ColumnChart1" Width="600px" Height="400px"> <ClientEvents OnLoad="OnLoad" /> <PlotArea> <Series> <telerik:ColumnSeries Name="Product 1"> <SeriesItems> <telerik:CategorySeriesItem Y="1" /> <telerik:CategorySeriesItem Y="2" /> <telerik:CategorySeriesItem Y="3" /> </SeriesItems> </telerik:ColumnSeries> </Series> </PlotArea> </telerik:RadHtmlChart> </div> <div id="chart" style="visibility: hidden;">HtmlChart wrapper</div> <input type="button" onclick="showChart(); return false;" value="Show Chart" /> <script> $ = $telerik.$; function showChart() { $("#div1").attr("style", "visibility:visible"); } function OnLoad() { $("#div1").attr("style", "visibility:hidden"); } </script>
Right now we do not have a way to show some tooltips over Axis Labels This is useful when we have big names for Axis Labels, we can put some short cut names be default and then show full name over tool tip. We can use Series tooltip, but it looks ugly for stacked series when you have 4 to 5 series