When an item's value is equal to zero in a Bar or Column series,, its labels is not shown.
I know that does not support RADHTMLCHART Marked Zone. But somehow I need to make a mark, for example in the SeriesLine that Saturdays and Sundays this line with another color. I leave a picture so you can understand. I need the part or series values Y Vier and Sab will be anothe color. for examples both series at orange color. I thank you for the attention. regards
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 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>
Allow the HTMLChart to be resized when the parent window is resized. Currently the resize of the chart only occurs on page load or refresh only. So i will resize the window and reload and the chart will fit into the space. then if i enlarge the window the chart stays the current size. This is particular important for us as our support of mobile devices (and responsive design) the whole of our site is responsive apart from our charts :-(
http://demos.telerik.com/aspnet-ajax/htmlchart/examples/charttypes/columnchart/defaultcs.aspx Try it with Stacked mode checked and minvalue set to 5000 on Y settings!
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
A good improvement in RadHtmlChart would be the introduction of Waterfall series.
The property will specify the client-side event handler that is executed when the RadHtmlChart is initialized on the client and will be called after chart's transitions' animation.
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; }
For the time being the property can be set through the kendoWidget: $find('chartID').get_kendoWidget().options.panes[1].height = 60; $find('chartID').get_kendoWidget().redraw();
Add the ability to click the legend's items in a similar way like the series 'items. For the time being the following workaround can be used: JavaScript: <script> function pageLoad() { //Attach the legendItemClick event on pageLoad: var chart = $find("<%=RadHtmlChart1.ClientID%>")._chartObject.bind("legendItemClick", OnLegendClicked); } //The following function toggles the visibility of the clicked series from the legend function OnLegendClicked(e) { //Get a reference to the chart and the target axis var chart = e.sender; var targetAxisName = e.series.axis; var numValueAxes = chart.options.valueAxis.length; //Iterate through the y-axes and toggle the visibility of the axis that corresponds to the clicked series from the legend for (var i = 0; i < numValueAxes; i++) { var currValueAxisName = chart.options.valueAxis[i].name; if (currValueAxisName == targetAxisName) { chart.options.valueAxis[i].visible = !chart.options.valueAxis[i].visible; } } } </script> ASPX: <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600px" Height="400px"> <PlotArea> <Series> <telerik:LineSeries AxisName="axis1" Name="Series1"> <SeriesItems> <telerik:CategorySeriesItem Y="30" /> <telerik:CategorySeriesItem Y="10" /> <telerik:CategorySeriesItem Y="20" /> </SeriesItems> </telerik:LineSeries> <telerik:LineSeries AxisName="axis2" Name="Series2"> <SeriesItems> <telerik:CategorySeriesItem Y="3000" /> <telerik:CategorySeriesItem Y="1000" /> <telerik:CategorySeriesItem Y="2000" /> </SeriesItems> </telerik:LineSeries> <telerik:LineSeries AxisName="axis2" Name="Series3"> <SeriesItems> <telerik:CategorySeriesItem Y="3500" /> <telerik:CategorySeriesItem Y="1500" /> <telerik:CategorySeriesItem Y="2500" /> </SeriesItems> </telerik:LineSeries> </Series> <YAxis Name="axis1" MinValue="0" MaxValue="30"> </YAxis> <AdditionalYAxes> <telerik:AxisY Name="axis2" MinValue="900" MaxValue="3600"></telerik:AxisY> </AdditionalYAxes> </PlotArea> </telerik:RadHtmlChart>
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>
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>
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 property will control the distance between the corresponding series items.
For the time being the property can be set through the kendoWidget: ASPX: <script> function pageLoad() { $ = $telerik.$; var kendoWidget = $find("<%=PieChart1.ClientID%>")._chartObject; kendoWidget.options.series[0].labels.visible = function (point) { if (point.value < 5) { return false; } else { return true; }; } kendoWidget.redraw(); } </script> <telerik:RadHtmlChart runat="server" ID="PieChart1" Transitions="true" Width="450px" Height="450px"> <PlotArea> <Series> <telerik:DonutSeries 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:DonutSeries> </Series> </PlotArea> <ChartTitle Text="Browser Usage for April 2012"> </ChartTitle> </telerik:RadHtmlChart>