I have an htmlchart using a scatter series and a radgrid, on the grid row hover event I call the below javascript function to show the relevant tooltip for the plotted point matching the id of the grid row.
function showToolTip(eventArgs, chart, plotXvalue, plotYvalue) {
This all works well, however I would like to also highlight the plotted point that the tooltip relates to, the same effect as the mouse over on the point within the chart.
For the time being you can use the following workaround: <script> function OnLoad(sender, args) { var kendoWidget = $find('<%=RadHtmlChart1.ClientID%>').get_kendoWidget(); kendoWidget.options.legend.reverse = true; kendoWidget.redraw(); } </script> <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="400"> <ClientEvents OnLoad="OnLoad" /> <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="2" /> <telerik:CategorySeriesItem Y="5" /> <telerik:CategorySeriesItem Y="7" /> </SeriesItems> </telerik:ColumnSeries> <telerik:ColumnSeries Name="Series 3"> <SeriesItems> <telerik:CategorySeriesItem Y="9" /> <telerik:CategorySeriesItem Y="11" /> <telerik:CategorySeriesItem Y="13" /> </SeriesItems> </telerik:ColumnSeries> </Series> <XAxis> <LabelsAppearance RotationAngle="33"></LabelsAppearance> <Items> <telerik:AxisItem LabelText="Item 1" /> <telerik:AxisItem LabelText="Item 2" /> <telerik:AxisItem LabelText="Item 3" /> </Items> </XAxis> </PlotArea> </telerik:RadHtmlChart>
For the time being the property can be set through the chartObject. For example: <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> </telerik:RadScriptManager> <script> function pageLoad() { var chart = $find("<%=RadHtmlChart1.ClientID%>"); //DashType: dash, dashDot, dot, longDash, longDashDot, longDashDotDot, solid chart._chartObject.options.categoryAxis.majorGridLines.dashType = "dot"; chart._chartObject.options.categoryAxis.minorGridLines.dashType = "dot"; chart._chartObject.options.valueAxis.majorGridLines.dashType = "dot"; chart._chartObject.options.valueAxis.minorGridLines.dashType = "dot"; chart.repaint(); } </script> <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600px" Height="400px"> <PlotArea> <Series> <telerik:LineSeries Name="Series 1"> <SeriesItems> <telerik:CategorySeriesItem Y="30" /> <telerik:CategorySeriesItem Y="10" /> <telerik:CategorySeriesItem Y="20" /> </SeriesItems> </telerik:LineSeries> </Series> <XAxis> <Items> <telerik:AxisItem LabelText="item 1" /> <telerik:AxisItem LabelText="item 2" /> <telerik:AxisItem LabelText="item 3" /> </Items> </XAxis> </PlotArea> </telerik:RadHtmlChart>
Currenlty Series like Bubble, Bar, Column, Donut, Pie and Candlestick do not expose any appearance properties for the Series border. Expose appearance border properties like width, dashtype, color and opacity. Temporary workaround for managing the border appearance: Javascript: <script language="javascript"> function pageLoad() { var chart = $find("RadHtmlChart1"); chart._chartObject.options.series[0].border = { width: 2, color: "black", dashType: "dash", opacity: 0.2 } chart.repaint(); } </script> ASPX: <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="400"> <PlotArea> <Series> <telerik:ColumnSeries> <SeriesItems> <telerik:CategorySeriesItem Y="30" /> <telerik:CategorySeriesItem Y="10" /> <telerik:CategorySeriesItem Y="20" /> </SeriesItems> </telerik:ColumnSeries> </Series> </PlotArea> </telerik:RadHtmlChart>
The functionality is currently exposed only by the x-axis of the sparkliens. It would be a good idea to be exposed by the other series types as well. For the time being you can configure the cross hair through the kendo widget: <script> function pageLoad() { $find('RadHtmlChart1').get_kendoWidget().setOptions({categoryAxis:{crosshair:{ color: "green", width: 2, visible: true}}}); } </script> <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:LineSeries Name="Series 2"> <SeriesItems> <telerik:CategorySeriesItem Y="39" /> <telerik:CategorySeriesItem Y="19" /> <telerik:CategorySeriesItem Y="29" /> </SeriesItems> </telerik:LineSeries> </Series> <XAxis> <LabelsAppearance RotationAngle="33"></LabelsAppearance> <Items> <telerik:AxisItem LabelText="Item 1" /> <telerik:AxisItem LabelText="Item 2" /> <telerik:AxisItem LabelText="Item 3" /> </Items> </XAxis> </PlotArea> </telerik:RadHtmlChart>
Currently the available appearance options of the line in Area, Line and ScatterLine Series are width and background color. Expose additional option for changing the dash type(e.g. dash, dashDot, Dot, etc). For the time being the following workaround can be used: <script> function pageLoad() { var chart = $find("<%=RadHtmlChart1.ClientID%>"); //DashType: dash, dashDot, dot, longDash, longDashDot, longDashDotDot, solid chart._chartObject.options.series[0].dashType = "dot"; chart.repaint(); } </script> <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600px" Height="400px"> <PlotArea> <Series> <telerik:LineSeries Name="Series 1"> <SeriesItems> <telerik:CategorySeriesItem Y="30" /> <telerik:CategorySeriesItem Y="10" /> <telerik:CategorySeriesItem Y="20" /> </SeriesItems> </telerik:LineSeries> </Series> <XAxis> <Items> <telerik:AxisItem LabelText="item 1" /> <telerik:AxisItem LabelText="item 2" /> <telerik:AxisItem LabelText="item 3" /> </Items> </XAxis> </PlotArea> </telerik:RadHtmlChart>
Please refer to the ticket for more details.
Right now we do not have a way to show some tooltips over Axis Labels This is useful when we have big names for Axis Labels, we can put some short cut names be default and then show full name over tool tip. We can use Series tooltip, but it looks ugly for stacked series when you have 4 to 5 series
Hello,
I would like to highlight a GridLine based on a Labelled item when I have implemented skip in the HTML Chart.
Essentially, I have a series of days and would like to step the labels on a weekly basis. At each step I would like to highlight the GridLine associated with the label.
Similar to the Scale Breaks functionality in RadChart - http://docs.telerik.com/devtools/aspnet-ajax/controls/chart/features/scale-breaks
For the time being you can use a JavaScript function inside the template to cut the labels - http://docs.telerik.com/kendo-ui/dataviz/chart/how-to/shorten-chart-labels
We want the Kendo chart widget (RadHtmlChart actually) to blend in with the webpage we use it in. In this page, we use font-weight 300. Since there is no way to specify the font-weight in the chart, we have had to use a hack to specify it:
function chartLoad(chart, args) {
chart.get_kendoWidget().setOptions({ title: { font: "20px sans-serif; font-weight: 300" }});
}
This is not only a clumpsy hack, but it also make use of a custom skin impossible (for setting the font).
In RadHtmlChart there is no property to specify Width for Bar/Column series. It automatically calculates series width based on chart width, number of series, number of items within series, gap and spacing, etc., If there is more than one bar/column chart in single page, there is no way to show Bar/Column series of exact width in all chart to make page consistent.
A good improvement in the RadHtmlChart would be to add an Opacity property for the series, which would allow the control of its transparency. The property can be set through the chartObject: JavaScript: <script> function pageLoad() { var chart = $find("<%=BubbleChart.ClientID%>"); chart._chartObject.options.series[0].opacity = 0.3; chart.repaint(); } </script> ASPX: <telerik:RadHtmlChart runat="server" ID="BubbleChart" Width="500" Height="400"> <PlotArea> <Series> <telerik:BubbleSeries> <Appearance FillStyle-BackgroundColor="#6ab2c9"> </Appearance> <SeriesItems> <telerik:BubbleSeriesItem Size="3" X="5" Y="5500" /> <telerik:BubbleSeriesItem Size="12" X="14" Y="12200" /> <telerik:BubbleSeriesItem Size="33" X="20" Y="39000" /> <telerik:BubbleSeriesItem Size="10" X="18" Y="24400" /> <telerik:BubbleSeriesItem Size="42" X="20" Y="32000" /> </SeriesItems> </telerik:BubbleSeries> </Series> </PlotArea> </telerik:RadHtmlChart>
Adding a control from the JDash suite to the page breaks RadHtmlChart.