I have pieseries items as item1,item2,item3,item4 and item5.I had attached an image of the below code.How can i display my pieseries item name inside chart?
CODE:
<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server">
<PlotArea>
<Series>
<telerik:PieSeries Name="PieSeries1" StartAngle="90">
<SeriesItems>
<telerik:PieSeriesItem Y="1" Name="item1" />
<telerik:PieSeriesItem Y="2" Name="item2" />
<telerik:PieSeriesItem Y="3" Name="item3" />
<telerik:PieSeriesItem Y="4" Name="item4" />
<telerik:PieSeriesItem Y="5" Name="item5" />
</SeriesItems>
<LabelsAppearance Visible="False" />
</telerik:PieSeries>
</Series>
</PlotArea>
</telerik:RadHtmlChart>
Snapshot:
You need to set your LabelsAppearance to Visible, and Position: Center
<telerik:PieSeries Name="PieSeries1" StartAngle="90">
<SeriesItems>
...
</SeriesItems>
<LabelsAppearance Visible="True">
<Position="Center"/>
</LabelsAppearance>
</telerik:PieSeries>
https://demos.telerik.com/aspnet-ajax/htmlchart/examples/charttypes/piechart/defaultcs.aspx
Related
I am trying to add the highlighting row functionality to a table, the values of which I am getting from backend OData service.
I am referring this:
For the views, I am using an xmlview
<mvc:View
xmlns:mvc="sap.ui.core.mvc"
controllerName="generated.app.controller.14768629992738663_S0"
xmlns:m="sap.m"
xmlns:html="http://www.w3.org/1999/xhtml"
>
<m:Page id="sap_Responsive_Page_0"
showHeader="true"
title="Manage Tenants"
showFooter="true"
showNavButton="true"
>
<m:SearchField id="sap_Responsive_Page_0-content-sap_m_SearchField-1476864205399"
placeholder="Search"
showSearchButton="true"
visible="true"
width="268.140625px"
liveChange="onFilter"
/>
<m:Toolbar id="sap_Responsive_Page_0-content-sap_m_Toolbar3-1476863171475"
width="auto"
design="Transparent"
height="46px"
visible="true"
enabled="true"
>
<m:Text id="sap_Responsive_Page_0-content-sap_m_Toolbar3-1476863171475-content-sap_m_Text-1"
text="Items"
width="auto"
maxLines="1"
wrapping="false"
textAlign="Begin"
textDirection="Inherit"
/>
<m:ToolbarSpacer id="sap_Responsive_Page_0-content-sap_m_Toolbar3-1476863171475-content-sap_m_ToolbarSpacer-2" width=""/>
<m:Button id="sap_Responsive_Page_0-content-sap_m_Toolbar3-1476863171475-content-sap_m_Button-1476863865529"
iconDensityAware="false"
text=""
type="Default"
icon="sap-icon://add"
iconFirst="true"
width="auto"
enabled="true"
visible="true"
press="_onButtonPress2"
/>
<m:Button id="sap_Responsive_Page_0-content-sap_m_Toolbar3-1476863171475-content-sap_m_Button-4"
iconDensityAware="false"
text=""
type="Transparent"
icon="sap-icon://drop-down-list"
iconFirst="true"
width="auto"
enabled="true"
visible="true"
press="onGroup"
/>
</m:Toolbar>
<m:Table id="sap_Responsive_Page_0-content-build_simple_Table-1476863214613"
width="100%"
noDataText="No data"
selectionMode="MultiToggle"
growing="false"
growingThreshold="20"
growingScrollToLoad="false"
items="{/BYD}"
itemPress="_onTableItemPress"
ariaLabelledBy="title"
>
<m:columns>
<m:Column id="sap_Responsive_Page_0-content-build_simple_Table-1476863214613-columns-build_simple_Column-1"
width="auto"
hAlign="Left"
vAlign="Top"
minScreenWidth="Tablet"
demandPopin="true"
popinDisplay="Inline"
mergeDuplicates="false"
>
<m:Text id="sap_Responsive_Page_0-content-build_simple_Table-1476863214613-columns-build_simple_Column-1-header-sap_m_Text-1"
text="Tenant"
width="auto"
maxLines="1"
wrapping="false"
textAlign="Begin"
textDirection="Inherit"
/>
</m:Column>
<m:Column id="sap_Responsive_Page_0-content-build_simple_Table-1476863214613-columns-build_simple_Column-2"
width="auto"
hAlign="Left"
vAlign="Top"
minScreenWidth="Tablet"
demandPopin="true"
popinDisplay="Block"
mergeDuplicates="false"
>
<m:Text id="sap_Responsive_Page_0-content-build_simple_Table-1476863214613-columns-build_simple_Column-2-header-sap_m_Text-1"
text="Division"
width="auto"
maxLines="1"
wrapping="false"
textAlign="Begin"
textDirection="Inherit"
/>
</m:Column>
<m:Column id="sap_Responsive_Page_0-content-build_simple_Table-1476863214613-columns-build_simple_Column-3"
width="auto"
hAlign="Left"
vAlign="Top"
minScreenWidth="Tablet"
demandPopin="true"
popinDisplay="Block"
mergeDuplicates="false"
>
<m:Text id="sap_Responsive_Page_0-content-build_simple_Table-1476863214613-columns-build_simple_Column-3-header-sap_m_Text-1"
text="Type"
width="auto"
maxLines="1"
wrapping="false"
textAlign="Begin"
textDirection="Inherit"
/>
</m:Column>
<m:Column id="sap_Responsive_Page_0-content-build_simple_Table-1476863214613-columns-build_simple_Column-1476863521840"
width="auto"
hAlign="Left"
vAlign="Top"
minScreenWidth="Tablet"
demandPopin="true"
popinDisplay="Inline"
mergeDuplicates="false"
>
<m:Text id="sap_Responsive_Page_0-content-build_simple_Table-1476863214613-columns-build_simple_Column-1476863521840-header-sap_m_Text-1"
text="Status"
width="auto"
maxLines="1"
wrapping="false"
textAlign="Begin"
textDirection="Inherit"
/>
</m:Column>
</m:columns>
<m:ColumnListItem id="sap_Responsive_Page_0-content-build_simple_Table-1476863214613-items-build_simple_Row-1"
type="Navigation"
press="onPress"
>
<m:ObjectIdentifier id="sap_Responsive_Page_0-content-build_simple_Table-1476863214613-items-build_simple_Row-1-cells-sap_m_ObjectIdentifier-1"
title="{TENANTNAME}"
text="{ID}"
titleActive="false"
visible="true"
/>
<m:Text id="sap_Responsive_Page_0-content-build_simple_Table-1476863214613-items-build_simple_Row-1-cells-sap_m_Text-2"
text="{DIVISION}"
width="auto"
maxLines="1"
wrapping="false"
textAlign="Begin"
textDirection="Inherit"
/>
<m:Text id="sap_Responsive_Page_0-content-build_simple_Table-1476863214613-items-build_simple_Row-1-cells-build_simple_TableCell-1476863445271-content-sap_m_Text-1476863453798"
text="{TYPES}"
width="auto"
maxLines="1"
wrapping="false"
textAlign="Begin"
textDirection="Inherit"
/>
<m:ObjectStatus id="sap_Responsive_Page_0-content-build_simple_Table-1476863214613-items-build_simple_Row-1-cells-build_simple_TableCell-1476863521843-content-sap_m_ObjectStatus-1476863547560"
title=""
text="{STATUS}"
state="{STATUSFLAG}"
/>
</m:ColumnListItem>
</m:Table>
<m:footer>
<m:Bar id="sap_Responsive_Page_0-footer-sap_m_Bar-1" design="Auto"/>
</m:footer>
</m:Page>
</mvc:View>
As mentioned in the above link, I created a CSS file, where in I am mentioning the ID of the table to add the highlighting functionality to it.
#sap_Responsive_Page_0-content-build_simple_Table-1476863214613 tbody tr:nth-child(even) {
background: rgb(24, 245, 25);
}
I have added the CSS in resources in manifest.json
"sap.ui5": {
"resources": {
"css": [{
"uri": "css/style.css"
}]
}
}
But this has not worked as it is expected to work.
Is there something more or different I need to do here?!
You should NOT rely on ids for your css in SAPUI5 : ids are generated at runtime and you have no garanty that it will stay consistent over time (+ the ID you specify in the XML is NOT the actual ID of the DOM element).
Change your CSS selector to use the built-in CSS classes (which SAPUI5 supports over time) or add your own classes.
.xml
<Table class="myHighlightClass" ....
.css
.myHighlightClass { ...
Look this code
<Model>
<ext:Model ID="Model1" runat="server" IDProperty="DownTimeSequenceNo">
<Fields>
<ext:ModelField Name="RowNumber" />
<ext:ModelField Name="DownTimeSequenceNo" />
<ext:ModelField Name="Status" Type="String" />
<ext:ModelField Name="Keterangan" />
<ext:ModelField Name="DownTimeDate" Type="Date" />
<ext:ModelField Name="WSID" Type="String" />
</Fields>
</ext:Model>
</Model>
<Sorters>
<ext:DataSorter Property="DownTimeSequenceNo" Direction="ASC" />
</Sorters>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ID="Column1" runat="server" Text="No" DataIndex="RowNumber" Sortable="False"
Width="50" Filterable="false" />
<ext:Column ID="Column2" runat="server" Text="DownTimeSequenceNo" DataIndex="DownTimeSequenceNo"
Visible="false" />
<ext:Column ID="Column3" runat="server" Text="Status" DataIndex="Status" Width="50" />
<ext:Column ID="Column4" runat="server" Text="Keterangan" DataIndex="Keterangan"
Width="100" Filterable="false" Sortable="False" />
<ext:DateColumn ID="Column5" runat="server" Text="Tanggal" DataIndex="DownTimeDate"
Width="80" Format="dd/MMM/Y HH:mm" Filterable="true" />
<ext:Column ID="Column6" runat="server" Text="WSID" DataIndex="WSID" Width="50" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:CheckboxSelectionModel ID="CheckboxSelectionModel1" runat="server" Mode="Multi" />
</SelectionModel>
<Plugins>
<ext:FilterHeader ID="FilterHeader1" runat="server" Remote="true" />
</Plugins>
</ext:GridPanel>
</asp:Panel>
This code works filtering if the filter data type is string, but it doesn't work when it is date. What should i do ?
I have tried to google and ext-net examples doesn't provide any help.
take alook at this offical example
here
u need to declare feature and specify date here
<Features>
<ext:GridFilters ID="GridFilters1" runat="server">
<Filters>
<ext:NumericFilter DataIndex="Id" />
<ext:StringFilter DataIndex="Company" />
<ext:NumericFilter DataIndex="Price" />
<ext:DateFilter DataIndex="Date">
<DatePickerOptions runat="server" TodayText="Now" />
</ext:DateFilter>
<ext:ListFilter DataIndex="Size" Options="extra small,small,medium,large,extra large" />
<ext:BooleanFilter DataIndex="Visible" />
</Filters>
</ext:GridFilters>
</Features>
I have a column chart, so I would like to chart the values last columns show stacked values.
I am using the RadHtmlChart Telerik, but setting parameter tacked="true" in the last columns, but the result its wrong the chart is not stacked, if i set this attribute in the first line serie, the chart is stacked. This my code:
<telerik:RadHtmlChart ID="Chart" runat="server" Width="680" Height="500">
<PlotArea>
<XAxis>
<LabelsAppearance>
<TextStyle Color="white" FontFamily="Arial" FontSize="13" />
</LabelsAppearance>
</XAxis>
<YAxis Step="5000000" MinValue="0" >
<LabelsAppearance DataFormatString="${0:0,0}">
<TextStyle Color="white" FontFamily="Arial" FontSize="12" />
</LabelsAppearance>
</YAxis>
<Series>
<telerik:ColumnSeries Name="GarantÃas Vigentes">
<LabelsAppearance Position="Center" DataFormatString="${0:0,0}" >
<TextStyle Color="Black" FontFamily="Arial" Bold="True" FontSize="18" />
</LabelsAppearance>
<Appearance>
<FillStyle BackgroundColor="#87cb50"></FillStyle>
</Appearance>
<SeriesItems>
</SeriesItems>
</telerik:ColumnSeries>
<telerik:ColumnSeries Name="Saldo Vigente" Stacked="true">
<LabelsAppearance Position="Center" DataFormatString="${0:0,0}">
<TextStyle Color="Black" FontFamily="Arial" Bold="True" FontSize="18" />
</LabelsAppearance>
<Appearance>
<FillStyle BackgroundColor="#8DB4E2"></FillStyle>
</Appearance>
<SeriesItems>
</SeriesItems>
</telerik:ColumnSeries>
<telerik:ColumnSeries Name="" Stacked="true">
<LabelsAppearance Position="Center" DataFormatString="${0:0,0}">
<TextStyle Color="Black" FontFamily="Arial" Bold="True" FontSize="18" />
</LabelsAppearance>
<Appearance>
<FillStyle BackgroundColor="#8DB4E2"></FillStyle>
</Appearance>
<SeriesItems>
</SeriesItems>
</telerik:ColumnSeries>
</Series>
</PlotArea>
<Legend>
<Appearance Position="Bottom"><TextStyle Color="white" FontFamily="Arial" FontSize="20" Bold="True"/></Appearance>
</Legend>
</telerik:RadHtmlChart>
thanks for yours comments
Read this to see how to use the feature: http://www.telerik.com/help/aspnet-ajax/htmlchart-stacked-series.html.
Read this to see how to get a total in the last series: http://www.telerik.com/forums/need-to-display-grand-total-on-top-of-the-htmlchart-stacked-bars.
Finally I set the property stacked= true in the last column, my code:
<telerik:RadHtmlChart ID="Chart" runat="server" Width="680" Height="500">
<PlotArea>
<XAxis>
<LabelsAppearance>
<TextStyle Color="white" FontFamily="Arial" FontSize="13" />
</LabelsAppearance>
</XAxis>
<YAxis MinValue="0" >
<LabelsAppearance DataFormatString="${0:0,0}">
<TextStyle Color="white" FontFamily="Arial" FontSize="12" />
</LabelsAppearance>
</YAxis>
<Series>
<telerik:ColumnSeries Name="GarantÃas Vigentes" Stacked="true">
<LabelsAppearance Position="Center" DataFormatString="${0:0,0}">
<TextStyle Color="Black" FontFamily="Arial" Bold="True" FontSize="18" />
</LabelsAppearance>
<Appearance>
<FillStyle BackgroundColor="#87cb50"></FillStyle>
</Appearance>
<SeriesItems>
</SeriesItems>
</telerik:ColumnSeries>
</Series>
<Series>
<telerik:ColumnSeries Name="Saldo Vigente" Stacked="true">
<LabelsAppearance Position="Center" DataFormatString="${0:0,0}">
<TextStyle Color="Black" FontFamily="Arial" Bold="True" FontSize="18" />
</LabelsAppearance>
<Appearance>
<FillStyle BackgroundColor="#8DB4E2"></FillStyle>
</Appearance>
<SeriesItems>
<telerik:CategorySeriesItem Y="0"></telerik:CategorySeriesItem>
</SeriesItems>
</telerik:ColumnSeries>
<telerik:ColumnSeries Name="" >
<LabelsAppearance Position="Center" DataFormatString="${0:0,0}">
<TextStyle Color="Black" FontFamily="Arial" Bold="True" FontSize="0" />
</LabelsAppearance>
<Appearance>
<FillStyle BackgroundColor="#1B1A1A"></FillStyle>
</Appearance>
<SeriesItems>
<telerik:CategorySeriesItem Y="0"></telerik:CategorySeriesItem>
</SeriesItems>
</telerik:ColumnSeries>
</Series>
</PlotArea>
<Legend>
<Appearance Position="Bottom"><TextStyle Color="white" FontFamily="Arial" FontSize="20" Bold="True"/></Appearance>
</Legend>
</telerik:RadHtmlChart>
the part of code-behind:
Public Sub LoadChart()
Dim salesAuto As Double
Dim lessVig As Double
lessVig = LtlSaldoVigente.Text.ToDouble
salesAuto = CDbl(LtlLine.Text.ToDouble - lessVig * 1000000)
Chart.PlotArea.YAxis.MinorGridLines.Visible = False
Chart.PlotArea.XAxis.MinorGridLines.Visible = False
Dim ColumnSeries1 As ColumnSeries = TryCast(Chart.PlotArea.Series(0), ColumnSeries)
ColumnSeries1.SeriesItems.Add(y:=CDec(LtlValue.Text.ToDouble))
ColumnSeries1.SeriesItems.Add(y:=CDec(0))
Dim ColumnSeries2 As ColumnSeries = TryCast(Chart.PlotArea.Series(1), ColumnSeries)
ColumnSeries2.Stacked = True
ColumnSeries2.SeriesItems.Add(y:=CDec(LtlSaVig.Text.ToDouble * 1000000))
Dim ColumnSeries3 As ColumnSeries = TryCast(Chart.PlotArea.Series(2), ColumnSeries)
ColumnSeries3.SeriesItems.Add(y:=CDec(lessVig))
End Sub
the result:
I know how to change the width of the bars using PointWidth which will relatively increase the space between the bars, but I want to keep the same width of the bar while increasing the space between the bars.
<asp:Chart ID="chart" runat="server" Height="300px" Width="850px"
BorderDashStyle="Solid" BorderWidth="2" BackColor="#f0f0f0" Visible="false" EnableViewState="true">
<Legends>
<asp:Legend TitleFont="Microsoft Sans Serif, 8pt, style=Bold" BackColor="Transparent"
Font="Trebuchet MS, 8.25pt, style=Bold" IsTextAutoFit="False" Enabled="False"
Name="Default">
</asp:Legend>
</Legends>
<Series>
<asp:Series Name="s1" Color="#4f81bd" CustomProperties="PointWidth=.6" ChartType="StackedColumn100">
</asp:Series>
<asp:Series Name="s2" Color="#c0504d" CustomProperties="PointWidth=.6" ChartType="StackedColumn100">
</asp:Series>
<asp:Series Name="s3" Color="#9bbb59" CustomProperties="PointWidth=.6" ChartType="StackedColumn100">
</asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1" BorderDashStyle="Solid">
<AxisX>
<LabelStyle Enabled="false" />
<MajorTickMark Enabled="false" />
</AxisX>
<AxisY>
<MajorGrid Interval="10" IntervalOffset="10" />
<MajorTickMark Enabled="true" Interval="10" IntervalOffset="10" />
<LabelStyle Format="{#}%" Interval="10" IntervalOffset="10" />
</AxisY>
<Position Y="0" Height="100" Width="100" X="5"></Position>
</asp:ChartArea>
</ChartAreas>
</asp:Chart>
Looks like the space between bars is dynamic and not editable. Changing the width of the chart increases the space between the bars.
I'm using VS10. I'm edit the code on the aspx-page there is no any unexpected events but if I do anything on the tab Constructor then DevExpress creates many of code. I'm in despair. How is it turned off?
Tab Source code
<dx:ASPxButton ID="btnFindServer" runat="server" Text="Find" Width="100%" />
I do something on the Constructor Tab
<dx:ASPxButton ID="btnFindServer" runat="server" Text="Find">
<Image Align="NotSet">
</Image>
<CheckedStyle>
<BackgroundImage Repeat="Repeat" />
<Border BorderStyle="NotSet" />
<BorderLeft BorderStyle="NotSet" />
<BorderTop BorderStyle="NotSet" />
<BorderRight BorderStyle="NotSet" />
<BorderBottom BorderStyle="NotSet" />
</CheckedStyle>
<PressedStyle>
<BackgroundImage Repeat="Repeat" />
<Border BorderStyle="NotSet" />
<BorderLeft BorderStyle="NotSet" />
<BorderTop BorderStyle="NotSet" />
<BorderRight BorderStyle="NotSet" />
<BorderBottom BorderStyle="NotSet" />
</PressedStyle>
<HoverStyle>
<BackgroundImage Repeat="Repeat" />
<Border BorderStyle="NotSet" />
<BorderLeft BorderStyle="NotSet" />
<BorderTop BorderStyle="NotSet" />
<BorderRight BorderStyle="NotSet" />
<BorderBottom BorderStyle="NotSet" />
</HoverStyle>
<FocusRectBorder BorderStyle="NotSet" />
<BackgroundImage Repeat="Repeat" />
<Border BorderStyle="NotSet" />
<BorderLeft BorderStyle="NotSet" />
<BorderTop BorderStyle="NotSet" />
<BorderRight BorderStyle="NotSet" />
<BorderBottom BorderStyle="NotSet" />
<DisabledStyle>
<BackgroundImage Repeat="Repeat" />
<Border BorderStyle="NotSet" />
<BorderLeft BorderStyle="NotSet" />
<BorderTop BorderStyle="NotSet" />
<BorderRight BorderStyle="NotSet" />
<BorderBottom BorderStyle="NotSet" />
</DisabledStyle>
If you did these modifications in the Design View, so it is not HTML.
It is how the designer modifications are serialized to the Source View:
Web Forms Designer