Will be useful for pie/donut charts in responsive web page scenarios.
In the Radchart there is a property called activeregion where the user can add a reference to html link. When the user clicks on the chart title, he can navigate to a new web page. This feature is not available in the new HtmlRadChart . We think that is suitable to have this function in the new HtmlRadchart. It can be even extended to axis labels of HtmlRadchart. Thank you for your help Best Regards AE
For the time being you can set the types through the kendoWidget: <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"> <script> function pageLoad() { var chart = $find('<%=RadHtmlChart1.ClientID%>'); chart._chartObject.options.series[0].type = "verticalLine"; chart.repaint(); } </script> </telerik:RadCodeBlock> <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="600px" Height="400px"> <PlotArea> <Series> <telerik:LineSeries Name="Product 1"> <SeriesItems> <telerik:CategorySeriesItem Y="15000" /> <telerik:CategorySeriesItem Y="23000" /> <telerik:CategorySeriesItem Y="10000" /> </SeriesItems> </telerik:LineSeries> </Series> <XAxis> <Items> <telerik:AxisItem LabelText="1" /> <telerik:AxisItem LabelText="2" /> <telerik:AxisItem LabelText="3" /> </Items> </XAxis> </PlotArea> <ChartTitle Text="Product sales for 2011"> </ChartTitle> <Legend> <Appearance Position="Bottom" /> </Legend> </telerik:RadHtmlChart>
Issue is reproducible with the following code: <telerik:RadHtmlChart runat="server" ID="ColumnChart1" Width="600px" Height="400px"> <PlotArea> <Series> <telerik:ColumnSeries Name="Product 1"> <SeriesItems> <telerik:CategorySeriesItem Y="10" /> <telerik:CategorySeriesItem Y="8" /> </SeriesItems> <LabelsAppearance Position="Center"></LabelsAppearance> </telerik:ColumnSeries> </Series> </PlotArea> </telerik:RadHtmlChart> For the time being you can change the labels position from "Center" to "OutsideEnd".
For the time being you can workaround this behavior as follows: 1)Place all of the items within a common series. 2)Use different colors for items in order to distinguish them from their original series. 3)Create a custom legend if needed one.
The property will control the distance between the corresponding series items.
Would be nice to be able to supply an image for the series background on bar and column charts, this would enable infographic style option to charts, i.e. displaying data for countries the bar series can be repeating national flags.
For the time being the property can be set through the kendo widget: <script type="text/javascript"> function pageLoad() { var kendoWidget = $find("<%=RadHtmlChart1.ClientID%>").get_kendoWidget(); kendoWidget.options.series[0].color = function (e) { if (e.value > 20) { return "red"; } else { return "green"; } } kendoWidget.redraw(); } </script> <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>
I would like to suggest ability to display data series in doughnut and pie charts, see attached example from Excel. And thanks for a great Telerik experience, you make my development work very easy.
The selection (http://demos.telerik.com/kendo-ui/chart-api/selection) can be configured through the kendo widget: <script> function pageLoad(args) { var kendoWidget = $find("<%=RadHtmlChart1.ClientID%>").get_kendoWidget(); kendoWidget.options.categoryAxis.select = { from: 1, to: 2 }; kendoWidget.bind("selectStart", onSelectStart); kendoWidget.bind("select", onSelect); kendoWidget.bind("selectEnd", onSelectEnd); kendoWidget.redraw(); } function formatRange(e) { var categories = e.axis.categories; return kendo.format("{0} - {1} ({2} - {3})", e.from, e.to, categories[e.from], // The last category included in the selection is at (to - 1) categories[e.to - 1] ); } function onSelectStart(e) { console.log(kendo.format("Select start :: {0}", formatRange(e))); } function onSelect(e) { console.log(kendo.format("Select :: {0}", formatRange(e))); } function onSelectEnd(e) { console.log(kendo.format("Select end :: {0}", formatRange(e))); } </script> <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="600px" Height="400px"> <PlotArea> <Series> <telerik:ColumnSeries Name="Product 1"> <SeriesItems> <telerik:CategorySeriesItem Y="1" /> <telerik:CategorySeriesItem Y="2" /> <telerik:CategorySeriesItem Y="3" /> <telerik:CategorySeriesItem Y="4" /> <telerik:CategorySeriesItem Y="2" /> </SeriesItems> </telerik:ColumnSeries> </Series> <XAxis> <Items> <telerik:AxisItem LabelText="1" /> <telerik:AxisItem LabelText="2" /> <telerik:AxisItem LabelText="3" /> <telerik:AxisItem LabelText="4" /> <telerik:AxisItem LabelText="5" /> </Items> </XAxis> </PlotArea> </telerik:RadHtmlChart>
A visual example - http://i.stack.imgur.com/zRwlo.jpg The feature will be useful for projects that need 508 compliance. A boolean properties will also be useful: "EnabledTexturedFill", "EnableColorAndTexturedFill"
The chart's labels also look misaligned in rtl direction, so you can change only chart's direction to ltr with CSS: <style> .RadHtmlChart { direction: ltr; } </style> <div dir="rtl"> some text <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> </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> </div>
A possible workaround: <form id="form1" runat="server"> <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager> <script> var ExplodeLevel = 0.15; </script> <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="true" 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> <script> var math = Math, dataviz = kendo.dataviz, Box2D = dataviz.Box2D, Point2D = dataviz.Point2D, OUTSIDE_END = "outsideEnd", RIGHT = "right", util = kendo.util, valueOrDefault = util.valueOrDefault; kendo.dataviz.PieChart.fn.reflow = function (targetBox) { var chart = this, options = chart.options, box = targetBox.clone(), space = 5, minWidth = math.min(box.width(), box.height()), halfMinWidth = minWidth / 2, defaultPadding = minWidth - minWidth * 0.85, padding = valueOrDefault(options.padding, defaultPadding), newBox = Box2D(box.x1, box.y1, box.x1 + minWidth, box.y1 + minWidth), newBoxCenter = newBox.center(), seriesConfigs = chart.seriesConfigs || [], boxCenter = box.center(), points = chart.points, count = points.length, seriesCount = options.series.length, leftSideLabels = [], rightSideLabels = [], seriesConfig, seriesIndex, label, segment, sector, r, i, c; padding = padding > halfMinWidth - space ? halfMinWidth - space : padding; newBox.translate(boxCenter.x - newBoxCenter.x, boxCenter.y - newBoxCenter.y); r = halfMinWidth - padding; c = Point2D( r + newBox.x1 + padding, r + newBox.y1 + padding ); for (i = 0; i < count; i++) { segment = points[i]; sector = segment.sector; sector.r = r; sector.c = c; seriesIndex = segment.seriesIx; if (seriesConfigs.length) { seriesConfig = seriesConfigs[seriesIndex]; sector.ir = seriesConfig.ir; sector.r = seriesConfig.r; } if (seriesIndex == seriesCount - 1 && segment.explode) { sector.c = sector.clone().radius(sector.r * ExplodeLevel).point(sector.middle()); } segment.reflow(newBox); label = segment.label; if (label) { if (label.options.position === OUTSIDE_END) { if (seriesIndex == seriesCount - 1) { if (label.orientation === RIGHT) { rightSideLabels.push(label); } else { leftSideLabels.push(label); } } } } } if (leftSideLabels.length > 0) { leftSideLabels.sort(chart.labelComparator(true)); chart.leftLabelsReflow(leftSideLabels); } if (rightSideLabels.length > 0) { rightSideLabels.sort(chart.labelComparator(false)); chart.rightLabelsReflow(rightSideLabels); } chart.box = newBox; }; </script> </form>
The workaround is to convert the color names to HEX, for example through the following HexConverter() method: ASPX: <telerik:RadClientExportManager runat="server" ID="RadClientExportManager1"> </telerik:RadClientExportManager> <telerik:RadButton ID="RadButton1" runat="server" OnClientClicked="exportRadHtmlChart" Text="Export RadHtmlChart to PDF" AutoPostBack="false" UseSubmitBehavior="false"></telerik:RadButton> <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="400"> <PlotArea> <Series> <telerik:ColumnSeries Name="Series 1" DataFieldY="myValues" ColorField="Color"> </telerik:ColumnSeries> </Series> </PlotArea> </telerik:RadHtmlChart> <script> var $ = $telerik.$; function exportRadHtmlChart() { $find('<%=RadClientExportManager1.ClientID%>').exportPDF($(".RadHtmlChart")); } </script> C#: protected void Page_Load(object sender, EventArgs e) { DataTable dt = GetData(); for (int i = 0; i < dt.Rows.Count; i++) { //Not all Color Names can be exported // dt.Rows[i]["Color"] = ColorTranslator.ToHtml(GetColor(i)); //Convert colors to HEX works properly dt.Rows[i]["Color"] = HexConverter(GetColor(i)); } RadHtmlChart1.DataSource = dt; RadHtmlChart1.DataBind(); } public static DataTable GetData() { DataTable dt = new DataTable("ChargeData"); dt.Columns.Add("myValues", typeof(int)); dt.Columns.Add("Color", typeof(string)); dt.Rows.Add(11, ""); dt.Rows.Add(12, ""); dt.Rows.Add(13, ""); dt.Rows.Add(14, ""); dt.Rows.Add(15, ""); dt.Rows.Add(16, ""); dt.Rows.Add(17, ""); dt.Rows.Add(18, ""); dt.Rows.Add(19, ""); dt.Rows.Add(20, ""); return dt; } public static String HexConverter(System.Drawing.Color c) { return "#" + c.R.ToString("X2") + c.G.ToString("X2") + c.B.ToString("X2"); } public static Color GetColor(int index) { return colors[index % colors.Length]; } public static readonly Color[] colors = { Color.Orange, Color.Violet, Color.MediumSeaGreen, Color.HotPink, Color.Black, Color.DarkGoldenrod, Color.DarkMagenta, Color.Chocolate, Color.DarkOliveGreen, Color.DarkTurquoise };
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>
When using the RadHtmlChart RadarSeries the axis are default drawn like a spiders web. (see screenshot) A common request is that axis lines for this type of graph are drawn as circles (represending more a Radar type look). This can currently be achieved by accessing the Kendo widget like so: $find('RadarAreaChart').get_kendoWidget().options.valueAxis.majorGridLines.type="arc"; $find('RadarAreaChart').get_kendoWidget().options.valueAxis.minorGridLines.type="arc"; $find('RadarAreaChart').get_kendoWidget().redraw(); But it would be VERY convenient (and probably very easy to implement for you guys :-) if it was a setting on the RadarSeries itself (or perhaps on the axis of the RadarSeries. E.g. property on RadarSeries called AxisType with values (Spider or Radar). Best Regards Thomas