Expose a Visible property for the Series in RadHtmlChart. For example when a Series is clicked it can be hidden. For the time being the following workaround can be used: JavaScript: <script> function pageLoad() { var chart = $find("<%=RadHtmlChart1.ClientID%>"); chart._chartObject.options.series[0].visible = false; chart.repaint(); } </script> ASPX: <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:ColumnSeries Name="Series 2"> <SeriesItems> <telerik:CategorySeriesItem Y="5" /> <telerik:CategorySeriesItem Y="12" /> <telerik:CategorySeriesItem Y="8" /> </SeriesItems> </telerik:ColumnSeries> </Series> </PlotArea> </telerik:RadHtmlChart>
When making business web applications, it is really useful with Funnel charts. This type is used a lot when making sales funnels!
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>
Hovering or clicking on the series name in the legend will highlight or toggle the visibility of the series.
Currently PieChart exposes the labels of its items outside the Pie, while the DonutChart exposes the labels inside the Donut. Add the ability to choose the location of the item's label (e.g. center, insideEnd, outsideEnd) in PieSeries and DonutSeries. This can be done either by exposing additional property or by expanding the values range of the current position property.
I would like to be able to supply DateTime values for the x axis of an HTMLChart scatter line series to represent a timeline. Would it be possible to make this easier by having the control plot points plotted based upon the tick count of the value and add support for appropriate label format strings?
The axis is numerical, but it could have a DataLabelsField property like the x-axis so text for each label is taken from the datasource (a label per datasource row). Then the numerical values (YValue) of each item can be rounded to the nearest integer and if that matches an axis item's index the series item will correspond to this axis item.
Currently BarSeries and ColumnSeries can be stacked in only one stack. Add the ability to group the stacked bars/columns Series through additional property (e. g StackName) for each Series in different stacks.
The event should be similar to OnClientSeriesClicked event. It should expose information about the clicked series.
For the time being you can stack 100% series through the chartObject. For example: ASPX: <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager> <script> function pageLoad() { var chart = $find("<%=ColumnChart1.ClientID%>"); chart._chartObject.options.series[0].stack = { type: "100%" }; chart.repaint(); } </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> <telerik:ColumnSeries Name="Product 2"> <SeriesItems> <telerik:CategorySeriesItem Y="35000" /> <telerik:CategorySeriesItem Y="13000" /> <telerik:CategorySeriesItem Y="20000" /> </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>
Rejected with the following reason: The purpose of the RadHtmlChart is to visualize data and not to manipulate it. You can manually group a data source, so that its structure is suitable for a chat data-binding. Such an example is illustrated in this CL - http://www.telerik.com/support/code-library/group-radhtmlchart-data-source
provide htmlchart in 2D/3D