For the time being series can be stacked through the chartObject. For example: JavaScript: <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"> <script> function pageLoad() { var chart = $find("<%=AreaChart.ClientID%>"); chart._chartObject.options.seriesDefaults.stack = true; chart.repaint(); } </script> </telerik:RadCodeBlock> ASPX: <telerik:RadHtmlChart runat="server" ID="AreaChart" Width="800" Height="500" Transitions="true"> <PlotArea> <Series> <telerik:AreaSeries 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:AreaSeries> <telerik:AreaSeries 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:AreaSeries> </Series> </PlotArea> </telerik:RadHtmlChart>
Currently when LineSeries Item's YValue is smaller than the BarSeries/ColumnSeries Item's value and both Series Items share the same category, the BarSeries/ColumnSeries Item is the one that receives the mouseover event, so only the bar/column item tooltip is shown. It is not possible to hover over the marker for the LineSeries and trigger client-side event handlers or show its tooltip. The LineSeries can be hovered/clicked only outside of the area of the Bar/Column Item.
For the time being the following workaround can be used: JavaScript: <script> function pageLoad() { var chart = $find("<%=RadHtmlChart1.ClientID%>"); chart._chartObject.options.series[0].missingValues = "Gap"; chart.repaint(); } </script> ASPX: <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server"> <PlotArea> <Series> <telerik:LineSeries MissingValues="Gap"> <SeriesItems> <telerik:CategorySeriesItem Y="30" /> <telerik:CategorySeriesItem Y="10" /> <telerik:CategorySeriesItem /> <telerik:CategorySeriesItem Y="30" /> </SeriesItems> </telerik:LineSeries> </Series> </PlotArea> </telerik:RadHtmlChart>
For example by exposing an additional width property.
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); }
Similar to the SplineArea in RadChart: http://www.telerik.com/help/aspnet-ajax/chart-types-spline-area.html
Currently labels for SeriesItems having Y of 0 are not displayed in PieSeries and DonutSeries due to visual considerations. Improve the handling of such labels.
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 labels of SeriesItems with values greater or equal to the YAxis MaxValue are being cut: When chart title is not set. AND the labels position is set to Above for AreaSeries, LineSeries, ScatterSeries and ScatterLineSeries. OR the labels position is set to outsideEnd for ColumnSeries. In FireFox, Opera and WebKit browsers. For the time being the chart title can be set with space character.
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.
Currently a long legend in RadHtmlChart overflows the PlotArea under IE, while in the rest browsers it is cut. The workaround is to hide the legend and create a custom one in a styled div (e.g. KendoUI demonstrates such an example here - http://demos.kendoui.com/dataviz/bubble-charts/index.html)
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!
Currently the datasource columns which have space in their name cannot be passed to a databound RadHtmlChart. Add the ability to handle the spaces in the names of these columns.
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>
When a pie chart is rendered with large labels they may be clipped because the pie chart is not sized correctly. When the legend is enabled the pie chart sizes correctly to handle long labels.
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?