Similar to the SplineArea in RadChart: http://www.telerik.com/help/aspnet-ajax/chart-types-spline-area.html
Your html charts are coming along beautifully - Just want more! Particularly a Spline chart - ideally to add as option for combination charts. This could also work as a Pareto chart.
Currently LineSeries, ScatterSeries and ScatterLineSeries expose MarkersType property that gets only three values - Circle, Square and Triangle. Add the ability to set custom images as markers as well.
For the time being the series can be stacked through the chartObject. For example: <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"> <script> function pageLoad() { var chart = $find("<%=LineChart.ClientID%>"); chart._chartObject.options.seriesDefaults.stack = true; chart.repaint(); } </script> </telerik:RadCodeBlock> <telerik:RadHtmlChart runat="server" ID="LineChart" Width="800" Height="500" Transitions="true"> <PlotArea> <Series> <telerik:LineSeries Name="Sales" MissingValues="Gap"> <SeriesItems> <telerik:CategorySeriesItem Y="400" /> <telerik:CategorySeriesItem Y="500" /> <telerik:CategorySeriesItem Y="720" /> <telerik:CategorySeriesItem Y="1300" /> <telerik:CategorySeriesItem Y="450" /> <telerik:CategorySeriesItem Y="800" /> <telerik:CategorySeriesItem Y="900" /> </SeriesItems> </telerik:LineSeries> <telerik:LineSeries Name="Expenses" MissingValues="Gap"> <SeriesItems> <telerik:CategorySeriesItem Y="700" /> <telerik:CategorySeriesItem Y="900" /> <telerik:CategorySeriesItem Y="420" /> <telerik:CategorySeriesItem Y="1100" /> <telerik:CategorySeriesItem Y="650" /> <telerik:CategorySeriesItem Y="600" /> <telerik:CategorySeriesItem Y="700" /> </SeriesItems> </telerik:LineSeries> </Series> </PlotArea> </telerik:RadHtmlChart>
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>
provide htmlchart in 2D/3D