For the time being the property (http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-legend.border) can be set through the chartObject. For example: JavaScript: <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"> <script> function pageLoad() { var chart = $find("<%=PieChart1.ClientID%>"); chart._chartObject.options.legend.border = { width: 2, color: "green", dashType: "longDashDotDot" } chart.repaint(); } </script> </telerik:RadCodeBlock> ASPX: <telerik:RadHtmlChart runat="server" ID="PieChart1" Transitions="true"> <PlotArea> <Series> <telerik:PieSeries 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:PieSeries> </Series> </PlotArea> <ChartTitle Text="Browser Usage for April 2012"> </ChartTitle> </telerik:RadHtmlChart>
When using custom shapes (circles, triangles, etc) in a RadHtmlChart, the custom shape should be displayed in the legend instead of always a square. This is because when printing with a black & white printer, the colored squares won't help the reader read the chart, however the shapes would.
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.
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
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).
For the time being the DateTime object can be set to the AxisCrossingPoint on the client. For example: ASPX: <script> function OnLoadHandler(sender, args) { var kendoChart = sender.get_kendoWidget(); var opts = kendoChart.options; opts.categoryAxis.axisCrossingValues = [0, new Date("2014, 11, 05, 19:15:00")]; kendoChart.setOptions(opts); } </script> <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="600px" Height="400px"> <ClientEvents OnLoad="OnLoadHandler" /> <PlotArea> <Series> <telerik:LineSeries Name="Product 1" DataFieldY="SellQuantity"> </telerik:LineSeries> </Series> <XAxis DataLabelsField="SellDate" BaseUnit="Minutes"> <LabelsAppearance Step="15"></LabelsAppearance> <MinorGridLines Visible="false" /> <AxisCrossingPoints> <telerik:AxisCrossingPoint Value="10" /> </AxisCrossingPoints> </XAxis> <AdditionalYAxes> <telerik:AxisY></telerik:AxisY> </AdditionalYAxes> </PlotArea> <ChartTitle Text="LineSeries"></ChartTitle> </telerik:RadHtmlChart> C#: protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { RadHtmlChart1.DataSource = GetData(); RadHtmlChart1.DataBind(); } } protected DataTable GetData() { DataTable dt = new DataTable(); dt.Columns.Add("ID", typeof(int)); dt.Columns.Add("SellQuantity", typeof(int)); dt.Columns.Add("SellDate", typeof(DateTime)); dt.Rows.Add(1, 2, new DateTime(2014, 11, 05, 18, 22, 22)); dt.Rows.Add(2, 5, new DateTime(2014, 11, 05, 18, 56, 22)); dt.Rows.Add(3, 6, new DateTime(2014, 11, 05, 19, 14, 22)); dt.Rows.Add(4, 4, new DateTime(2014, 11, 05, 19, 48, 22)); dt.Rows.Add(5, 7, new DateTime(2014, 11, 05, 20, 12, 22)); return dt; }
The feature will be similar to Plot Bands (see http://demos.telerik.com/aspnet-ajax/htmlchart/examples/functionality/plot-bands/defaultcs.aspx demo), however, the width of lines will not be dependent on the y-axis scale.
For the time being the property can be set through the underlying Kendo Chart widget. For example: <script> function OnLoad(chart) { var widget = chart.get_kendoWidget(); //also applies for the minor grid lines - replace majorGridLines with minorGridLines //Numeric series widget.options.xAxis.majorGridLines.step = 5; widget.options.yAxis.majorGridLines.step = 5; //Category series //widget.options.categoryAxis.majorGridLines.step = 5; //widget.options.valueAxis.majorGridLines.step = 5; widget.redraw(); } </script> <telerik:RadHtmlChart runat="server" ID="BubbleChart" Width="500" Height="400"> <ClientEvents OnLoad="OnLoad" /> <ChartTitle Text="Market Share Study"> </ChartTitle> <PlotArea> <Appearance> <FillStyle BackgroundColor="White"></FillStyle> </Appearance> <XAxis MinValue="0" MaxValue="100" Step="10"> <MinorGridLines Visible="false" /> </XAxis> <YAxis MinValue="0" MaxValue="100" Step="10"> <MinorGridLines Visible="false" /> </YAxis> <Series> <telerik:BubbleSeries> <Appearance FillStyle-BackgroundColor="#6ab2c9"> </Appearance> <TooltipsAppearance DataFormatString="Percentage of Market Share: {2}%<br /> Number of products: {0}<br /> Sales: ${1}" /> <SeriesItems> <telerik:BubbleSeriesItem Size="3" X="5" Y="55" /> <telerik:BubbleSeriesItem Size="12" X="14" Y="80" /> <telerik:BubbleSeriesItem Size="33" X="20" Y="60" /> <telerik:BubbleSeriesItem Size="10" X="18" Y="24" /> <telerik:BubbleSeriesItem Size="42" X="22" Y="32" /> </SeriesItems> </telerik:BubbleSeries> </Series> </PlotArea> <Legend> <Appearance Position="Right"></Appearance> </Legend> </telerik:RadHtmlChart>
The feature should be like the one in KendoUI' https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-series.aggregate For the time being it can be set through the chartObject: ASPX: <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager> <script type="text/ecmascript"> function pageLoad() { var chart = $find("<%=RadHtmlChart1.ClientID%>"); chart._chartObject.options.series[0].aggregate = "sum"; chart.repaint(); } </script> <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="640px" Height="480px"> <PlotArea> <Series> <telerik:LineSeries DataFieldY="SellQuantity"> </telerik:LineSeries> </Series> <XAxis BaseUnit="months" DataLabelsField="SellDate"> <LabelsAppearance DataFormatString="d"> </LabelsAppearance> </XAxis> </PlotArea> </telerik:RadHtmlChart> C#: using System.Data; 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("SellQuantity", typeof(int)); dt.Columns.Add("SellDate", typeof(DateTime)); dt.Rows.Add(1, 2, new DateTime(2012, 06, 12)); dt.Rows.Add(2, 5, new DateTime(2012, 06, 13)); dt.Rows.Add(3, 6, new DateTime(2012, 06, 17)); dt.Rows.Add(4, 4, new DateTime(2012, 07, 18)); dt.Rows.Add(5, 7, new DateTime(2012, 07, 20)); return dt; }
The functionality is similar to the one in Kendo UI Chart (http://demos.telerik.com/kendo-ui/dataviz/line-charts/notes.html) : http://dojo.telerik.com/OZuNU For the time being you can try to utilize the kendo.drawing API in order to place the text on a particular position. This forum may be helpful on the matter - http://www.telerik.com/forums/custom-drawing#sOkmYWbfrUW404Rr13eLDQ
A functionality similar to KendoUI's error bars - http://demos.telerik.com/kendo-ui/dataviz/line-charts/error-bars.html
For the time being the following workaround can be used: JavaScript: <script> function pageLoad() { var chart = $find("<%=RadHtmlChart1.ClientID%>"); chart._chartObject.options.series[0].labels.background = "yellow"; chart._chartObject.options.series[0].labels.border = { width: 2, dashType: "dashDot", color: "green" }; chart.repaint(); } </script> ASPX: <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="400"> <PlotArea> <Series> <telerik:ColumnSeries> <SeriesItems> <telerik:CategorySeriesItem Y="10" /> <telerik:CategorySeriesItem Y="30" /> <telerik:CategorySeriesItem Y="20" /> <telerik:CategorySeriesItem Y="25" /> </SeriesItems> </telerik:ColumnSeries> </Series> </PlotArea> </telerik:RadHtmlChart>
A nice improvement in RadHtmlChart will be the ability to control the speed of chart's transitions.
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>