I am attempting to create my first HTML Chart. This will be a simple pie chart based on a SQL query.
The query returns five rows with two columns of data: (1) language (English/French/etc) and (2) a count of each.
The intention is to display a pie chart showing the relative distribution of the top five languages used in my application.
I have copied an example and also looked at the data binding documentation but have not been able to connect my data with the pie slices.
I presume I need to add some type of template that is unique to a pie chart. All the examples I found refer to other chart types.
When I add this markup to my page I get no results unless I add a few series items directly. I see that Intellisense includes an item "db" (markup snippet for data-bind attribute). I don't know what to do from there, it appears to be non-functional or expecting me to do something unknown to me.
<
telerik:RadHtmlChart
runat
=
"server"
ID
=
"RadHtmlChart1"
DataSourceID
=
"Language_Chart_Data"
>
<
PlotArea
>
<
Series
>
<
telerik:PieSeries
StartAngle
=
"90"
DataFieldY
=
"count"
NameField
=
"language"
>
<
SeriesItems
>
<
telerik:PieSeriesItem
BackgroundColor
=
"#666666"
Exploded
=
"false"
Name
=
"Safari"
Y
=
"4.5"
></
telerik:PieSeriesItem
>
<
telerik:PieSeriesItem
BackgroundColor
=
"#333333"
Exploded
=
"false"
Name
=
"Opera"
Y
=
"2.3"
></
telerik:PieSeriesItem
>
</
SeriesItems
>
<
LabelsAppearance
Position
=
"OutsideEnd"
DataFormatString
=
"{0} %"
/>
<
TooltipsAppearance
DataFormatString
=
"{0} %"
/>
</
telerik:PieSeries
>
</
Series
>
</
PlotArea
>
<
ChartTitle
Text
=
"Top Five Languages"
>
</
ChartTitle
>
</
telerik:RadHtmlChart
>
A user reported (and we confirmed) that, using Firefox on Mac, if you select some text in the editor and press Command-C, the text is deleted rather than copied to the clipboard. No problem in Safari, and no problem in any browser on Windows.
Sounds like a browser problem, but I though I would pass it along just in case there is something you need to look at.
Using Mac 10.9.4 and Firefox 41
Hi, I want to change style of values on the chart - value should be in frame in same series color.
I added ClientTemplate to LabelsAppearance and it works until i add DIV on it.
<telerik:LineSeries DataFieldY="SHO_ProductivityGrowth" Name="Miesięczny">
I'm having trouble exporting larger PNG files of my diagram using Internet Explorer 11. The width of the file's dimensions seems to be limited to 4096 pixels. After that point, the image just cuts off. Not sure if there are any height limitations as the diagrams I'm producing are generally much wider than they are tall. I'm basically using the same client-side code that was provided in one of the demos:
function exportImage() {
var diagram = $find("<%=TreeDiagram.ClientID %>").get_kendoWidget();
diagram.exportImage().done(function (data) {
kendo.saveAs({
dataURI: data,
fileName: "diagram.png"
});
});
}
I've tried the same exports using Chrome with no issues. Unfortunately... I'm required to get the export feature working in IE 11, so I would appreciate any help in being pointed in the right direction.
Hi,
I have a wizard contained in a splitter + pane, the splitter and all it's parents have heights set to 100% and all is good. Now the problem comes with RadWizardStep because I cannot see how to set the height to 100% for the step, this means that any controls contained by the step cannot have 100% height because the parent (RadWizardStep) does not have a height set.
eg. if one of my steps has a radgrid then I need to set a specific px height for the grid and this is bad for me.
So I seem to have run into an interesting issue with drag-and-drop in a RadGrid within a RadTreeList.
My scenario is this: I have a RadTreeList where each item in the list contains a RadGrid in the DetailTemplate. The RadTreeList uses drag-and-drop to nest the items in its list. Each RadGrid in the DetailTemplate (there is 1 grid per template) also used drag-and-drop for re-ordering the items in that grid.
I am still building this, but right now I can drag the RadTreeList items without any issues. However, when I go to drag any of the items in the RadGrids, I see 2 rows as if I was dragging multiple items. If I start to drag a RadTreeListItem first and then immediately stop, and then go to drag a RadGrid item, I see the RadGrid row behind the RadTreeListItem row. Very strange. Also, both controls are designed to use a TreeListDragDropColumn/GridDragDropColumn for dragging. If I remove the DragDropColumn from EITHER one of them, I do not see the duplicate row when dragging a RadGrid item. If I remove the DragDropColumn from BOTH of them, it will still display the duplicate.
I would like to have the drag columns visible for both, but for right now it doesn't seem like I can do that.
I've attached screenshots to help explain what I am talking about. In order they are: 1. The RadTreeList with ​RadGrids before any dragging, 2. Dragging from the RadGrid, 3. Dragging from the RadTreeList, 4. Dragging from the RadGrid after dragging from the RadTreeList
Essentially, here's my markup:
<telerik:RadTreeList ID="TreeList" runat="server" Skin="Silk" AutoGenerateColumns="false" AllowSorting="true" GridLines="None" ShowTreeLines="false"
ParentDataKeyNames="ParentId" DataKeyNames="Id" AllowPaging="false" EditMode="InPlace" ValidationSettings-ValidationGroup="Edit"
OnItemDrop="TreeList_ItemDrop"
OnNeedDataSource="TreeList_NeedDataSource" OnItemCommand="TreeList_ItemCreated" OnItemCreated="TreeList_ItemCreated" OnItemDataBound="TreeList_ItemDataBound">
<ClientSettings AllowItemsDragDrop="true">
<Selecting AllowItemSelection="True"></Selecting>
</ClientSettings>
<Columns>
<telerik:TreeListEditCommandColumn ButtonType="ImageButton" ItemStyle-Width="25px" ItemStyle-VerticalAlign="Middle" ShowAddButton="false" UniqueName="EditCommandColumn"></telerik:TreeListEditCommandColumn>
<telerik:TreeListTemplateColumn DataField="Name" UniqueName="Name" HeaderText="Name" ItemStyle-Wrap="false" ItemStyle-Width="720px">
<ItemTemplate>
<asp:Label ID="Name" runat="server" Text='<%# Eval("Name") %>'></asp:Label><telerik:RadToolTip ID="ToolTip" runat="server" AutoCloseDelay="0" TargetControlID="Name" RelativeTo="Element" Animation="Slide" AnimationDuration="100" Position="BottomCenter" RenderInPageRoot="true" Width="460"></telerik:RadToolTip>
<br /><asp:Label ID="Description" runat="server" Text='<%# Eval("Description") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="NameEdit" runat="server" MaxLength="50" Text='<%# Eval("Name") %>' ValidationGroup="Edit" Width="100%"></asp:TextBox>
<asp:RequiredFieldValidator ID="NameEditRFV" runat="server" CssClass="alert" ControlToValidate="NameEdit" ErrorMessage="Please enter a Folder Name" ValidationGroup="Edit"></asp:RequiredFieldValidator>
<br /><asp:TextBox ID="DescriptionEdit" runat="server" MaxLength="100" style="width: 100%;" Text='<%# Eval("Description") %>' ValidationGroup="Edit"></asp:TextBox>
</EditItemTemplate>
</telerik:TreeListTemplateColumn>
</Columns>
<DetailTemplate>
<telerik:RadGrid ID="DetailGrid" runat="server" Skin="Silk" Width="100%" AutoGenerateColumns="False" GridLines="None" AllowPaging="false" AllowSorting="false" ShowHeader="false"
OnNeedDataSource="DetailGrid_NeedDataSource" OnItemCommand="DetailGrid_ItemCommand" OnItemDataBound="DetailGrid_ItemDataBound" OnRowDrop="DetailGrid_RowDrop">
<ClientSettings AllowRowsDragDrop="true">
<ClientEvents OnPopUpShowing="popUpShowing" OnRowDropping="rowDropping" />
<Selecting AllowRowSelect="true" />
</ClientSettings>
<MasterTableView DataKeyNames="DetailId" Name="Details" EditMode="PopUp">
<Columns>
<telerik:GridDragDropColumn HeaderStyle-Width="18px"></telerik:GridDragDropColumn>
<telerik:GridEditCommandColumn ButtonType="ImageButton" ItemStyle-Width="25px" ItemStyle-VerticalAlign="Middle" UniqueName="EditCommandColumn"></telerik:GridEditCommandColumn>
<telerik:GridBoundColumn DataField="Name" HeaderText="Name" UniqueName="Name" />
</Columns>
<NoRecordsTemplate>
There are no details.
</NoRecordsTemplate>
</MasterTableView>
</telerik:RadGrid>
</DetailTemplate>
</telerik:RadTreeList>​