When user moved/resized RangeSelector it could be OnClientNavigationRangeChangedEvent fired, with new RangeSelector.From and RangeSelector.To values.
1.Today: When vertical axis are out of navigator range from to they are seen. 2.Suggtion: Give option to programmer to choose if to show or hide. 3.The same idea for plot bands,
Set tooltips of points between series points - http://screencast.com/t/Q7FYJxkouLA
Tooltips of points between series points See: http://screencast.com/t/Q7FYJxkouLA
Axes themselves do not have tooltips, only series do. Thus, tooltips cannot be added to the y-axis. Add
The lines can be similar to the ones in the box plot chart type - http://www.telerik.com/help/aspnet-ajax/htmlchart-types-box-plot-chart.html . For the time being you can use transparent box plot series in order to simulate this. For example: ASPX: <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager> <script> function pageLoad() { //Attach the legendItemClick event on pageLoad: var chart = $find("<%=RadHtmlChart1.ClientID%>")._chartObject.bind("legendItemClick", OnLegendClicked); } function OnLegendClicked(e) { if (e.seriesIndex >= 3) { var meanSeriesVisible = e.sender.options.series[3].visible; var medianSeriesVisible = e.sender.options.series[4].visible; if (meanSeriesVisible == medianSeriesVisible) { if (e.series.visible == false) { e.sender.options.series[5].visible = false; } } else { if (e.series.visible == false) { e.preventDefault(); e.sender.options.series[3].visible = false; e.sender.options.series[4].visible = false; e.sender.options.series[5].visible = true; e.sender.options.transitions = false; e.sender.redraw(); } } } } </script> <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="1000" Height="500"> <PlotArea> <Series> <telerik:ColumnSeries Name="Germany Gold" GroupName="Germany" Gap="1"> <Appearance> <FillStyle BackgroundColor="#DDD9C3" /> </Appearance> <SeriesItems> <telerik:CategorySeriesItem Y="13" /> <telerik:CategorySeriesItem Y="12" /> <telerik:CategorySeriesItem Y="16" /> </SeriesItems> <TooltipsAppearance ClientTemplate="#= series.name# medals: #= dataItem.value#" /> <LabelsAppearance Visible="false"></LabelsAppearance> </telerik:ColumnSeries> <telerik:ColumnSeries Name="Germany Silver" GroupName="Germany"> <Appearance> <FillStyle BackgroundColor="#C4BD97" /> </Appearance> <SeriesItems> <telerik:CategorySeriesItem Y="17" /> <telerik:CategorySeriesItem Y="16" /> <telerik:CategorySeriesItem Y="10" /> </SeriesItems> <TooltipsAppearance ClientTemplate="#= series.name# medals: #= dataItem.value#" /> <LabelsAppearance Visible="false"></LabelsAppearance> </telerik:ColumnSeries> <telerik:ColumnSeries Name="Germany Bronze" GroupName="Germany"> <Appearance> <FillStyle BackgroundColor="#948A54" /> </Appearance> <SeriesItems> <telerik:CategorySeriesItem Y="26" /> <telerik:CategorySeriesItem Y="20" /> <telerik:CategorySeriesItem Y="15" /> </SeriesItems> <TooltipsAppearance ClientTemplate="#= series.name# medals: #= dataItem.value#" Color="White" /> <LabelsAppearance Visible="false"></LabelsAppearance> </telerik:ColumnSeries> <telerik:BoxPlotSeries Name="Mean" Visible="true"> <Appearance> <FillStyle BackgroundColor="Transparent" /> </Appearance> <SeriesItems> <telerik:BoxPlotSeriesItem Mean="11" Median="0" Lower="0" Upper="0" Q1="0" Q3="0"></telerik:BoxPlotSeriesItem> <telerik:BoxPlotSeriesItem Mean="15" Median="0" Lower="0" Upper="0" Q1="0" Q3="0"></telerik:BoxPlotSeriesItem> <telerik:BoxPlotSeriesItem Mean="14" Median="0" Lower="0" Upper="0" Q1="0" Q3="0"></telerik:BoxPlotSeriesItem> </SeriesItems> </telerik:BoxPlotSeries> <telerik:BoxPlotSeries Name="Median" Visible="false"> <Appearance> <FillStyle BackgroundColor="Transparent" /> </Appearance> <SeriesItems> <telerik:BoxPlotSeriesItem Mean="0" Median="12" Lower="0" Upper="0" Q1="0" Q3="0"></telerik:BoxPlotSeriesItem> <telerik:BoxPlotSeriesItem Mean="0" Median="10" Lower="0" Upper="0" Q1="0" Q3="0"></telerik:BoxPlotSeriesItem> <telerik:BoxPlotSeriesItem Mean="0" Median="13" Lower="0" Upper="0" Q1="0" Q3="0"></telerik:BoxPlotSeriesItem> </SeriesItems> </telerik:BoxPlotSeries> <telerik:BoxPlotSeries Name="Mean and Median" Visible="false"> <Appearance> <FillStyle BackgroundColor="Transparent" /> </Appearance> <SeriesItems> <telerik:BoxPlotSeriesItem Mean="11" Median="12" Lower="0" Upper="0" Q1="0" Q3="0"></telerik:BoxPlotSeriesItem> <telerik:BoxPlotSeriesItem Mean="15" Median="10" Lower="0" Upper="0" Q1="0" Q3="0"></telerik:BoxPlotSeriesItem> <telerik:BoxPlotSeriesItem Mean="14" Median="13" Lower="0" Upper="0" Q1="0" Q3="0"></telerik:BoxPlotSeriesItem> </SeriesItems> </telerik:BoxPlotSeries> </Series> <YAxis> <TitleAppearance Text="Number of Medals" /> </YAxis> <XAxis> <LabelsAppearance DataFormatString="Year {0}" /> <Items> <telerik:AxisItem LabelText="2000" /> <telerik:AxisItem LabelText="2004" /> <telerik:AxisItem LabelText="2008" /> </Items> </XAxis> </PlotArea> <ChartTitle Text="Olympic Medals Per Country Over the Years"> </ChartTitle> <Legend> <Appearance Position="Right" /> </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); }
The CSS styles of the selection hint of the navigator in HtmlChart are not applied correctly in a data navigation scenario. The workaround is to override the styles that you need like this: .k-navigator-hint .k-tooltip { border: 2px solid red !important; color: #000 !important; }
increase line width when mouse hovers
A nice improvement in RadHtmlChart will be the ability to control the speed of chart's transitions.
I would like the ability to set a gradient for the plot area of the RadHtmlChart control, instead of just being able to set a solid color. Thanks!
Hover over first legend item highlights all chart sections for donut chat type. Hover over the rest of the legend items doesn't highlight the corresponding section of the donut chart.
Currently the default pivot point for rotating the labels on the XAxis is the center of the label itself. Add the ability to change the pivot point to be the first symbol of the label. For the time being the property can be set via the kendo object (http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-categoryAxis.labels.rotation.align): <script> function load(chart) { var align = "end"; //"center" chart.get_kendoWidget().setOptions({ categoryAxis: { labels: { rotation: { angle:45, align: align } } } }); } </script> <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="400"> <ClientEvents OnLoad="load" /> <PlotArea> <Series> <telerik:ColumnSeries Name="Series 1"> <Appearance></Appearance> <SeriesItems> <telerik:CategorySeriesItem Y="30" /> <telerik:CategorySeriesItem Y="10" /> <telerik:CategorySeriesItem Y="20" /> </SeriesItems> </telerik:ColumnSeries> </Series> <XAxis> <LabelsAppearance></LabelsAppearance> <Items> <telerik:AxisItem LabelText="Item 1" /> <telerik:AxisItem LabelText="Item 2" /> <telerik:AxisItem LabelText="Item 3" /> </Items> </XAxis> </PlotArea> </telerik:RadHtmlChart>
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.
JavaScript workaround: <telerik:RadHtmlChart runat="server" ID="LineChart" Width="800" Height="500" Transitions="true"> <PlotArea> <Series> <telerik:LineSeries Name="Week 15" ZIndex="0"> <SeriesItems> <telerik:CategorySeriesItem Y="15" /> <telerik:CategorySeriesItem /> <telerik:CategorySeriesItem Y="71" /> <telerik:CategorySeriesItem Y="93" /> <telerik:CategorySeriesItem Y="43" /> <telerik:CategorySeriesItem Y="23" /> </SeriesItems> </telerik:LineSeries> </Series> </PlotArea> </telerik:RadHtmlChart> <script> kendo.dataviz.LineChart.fn.animationPoints = function () { var series = this.seriesOptions; var points = []; var seriesPoints; var pointsIdx, idx; for (idx = 0; idx < series.length; idx++) { if (series[idx].markers.visible) { seriesPoints = this.seriesPoints[idx]; for (pointsIdx = 0; pointsIdx < seriesPoints.length; pointsIdx++) { if (seriesPoints[pointsIdx] != null) { points.push(seriesPoints[pointsIdx].marker); } } } } return points.concat(this._segments); } </script>
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.
I need to bind RadhtmlChart from code behind using sql store procedure. e.g I'm having one table in which first column is containing Month Year data and others column are auto generated as per store data for specific type. I want to bind RadhtmlChart with this datasource. with specific color for series. P.S table screen shot... column number can be increases of decreases as per data...
It would be helpful to have a way to set the major tick step value via the RadHtmlChart control. This can be set on the client side, but it seems like a missing feature since I can change the major tick size and label step values via the control axis attributes. Here's an example with my suggested attribute shown in comments on the xAxis below. <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" DataSourceID="RequestDays"> <ClientEvents OnLoad="OnLoad" /> <PlotArea> <Series> <telerik:AreaSeries Name="Last Year" DataFieldY="Last"></telerik:AreaSeries> <telerik:AreaSeries Name="Current Year" DataFieldY="Current"></telerik:AreaSeries> </Series> <XAxis Name="Days" DataLabelsField="Days" MajorTickSize="5"> <%--MajorTickStep="7"--%> <LabelsAppearance Step="14" /> </XAxis> </PlotArea> </telerik:RadHtmlChart> <script type="text/javascript"> function OnLoad(chart) { var widget = chart.get_kendoWidget(); widget.options.categoryAxis.majorTicks = { step: 7 }; widget.redraw(); } </script>