this is my code:-
<telerik:RadChart OnClick="radChart1_Click" PlotArea-Appearance-FillStyle-MainColor="Transparent"
PlotArea-Appearance-FillStyle-SecondColor="Transparent" ID="RadChart1"
runat="server" IntelligentLabelsEnabled="True" PlotArea-Visible="True"
Skin="Office2007" style="margin-left: 0px" AutoLayout="true" Height="400px" Width="680px" >
<Appearance>
<Border Color="134, 134, 134" />
</Appearance>
<Series>
<telerik:ChartSeries Name="Series 1">
<Appearance>
<FillStyle FillType="Solid" MainColor="69, 115, 167">
</FillStyle>
<TextAppearance TextProperties-Color="Black">
</TextAppearance>
<Border Color="69, 115, 167" />
</Appearance>
</telerik:ChartSeries>
<telerik:ChartSeries Name="Series 2">
<Appearance>
<FillStyle FillType="Solid" MainColor="107, 70, 68">
</FillStyle>
<TextAppearance TextProperties-Color="Black">
</TextAppearance>
<Border Color="107, 70, 68" />
</Appearance>
</telerik:ChartSeries>
</Series>
<Legend>
<Appearance Dimensions-Margins="15%, 2%, 1px, 1px"
Dimensions-Paddings="2px, 8px, 6px, 3px">
<ItemTextAppearance TextProperties-Color="Black">
</ItemTextAppearance>
<ItemMarkerAppearance Figure="Square">
</ItemMarkerAppearance>
</Appearance>
</Legend>
<PlotArea>
<XAxis>
<Appearance Color="134, 134, 134" MajorTick-Color="134, 134, 134">
<MajorGridLines Color="134, 134, 134" Width="0" />
<TextAppearance TextProperties-Color="Black">
</TextAppearance>
</Appearance>
<AxisLabel>
<TextBlock>
<Appearance TextProperties-Color="Black">
</Appearance>
</TextBlock>
</AxisLabel>
</XAxis>
<YAxis>
<Appearance Color="134, 134, 134" MajorTick-Color="134, 134, 134"
MinorTick-Color="134, 134, 134">
<MajorGridLines Color="134, 134, 134" />
<MinorGridLines Color="134, 134, 134" />
<TextAppearance TextProperties-Color="Black">
</TextAppearance>
</Appearance>
<AxisLabel>
<TextBlock>
<Appearance TextProperties-Color="Black">
</Appearance>
</TextBlock>
</AxisLabel>
</YAxis>
<Appearance>
<FillStyle MainColor="Transparent" SecondColor="Transparent">
</FillStyle>
</Appearance>
</PlotArea>
<ChartTitle>
<Appearance>
<FillStyle MainColor="">
</FillStyle>
</Appearance>
<TextBlock Text="Ratio">
<Appearance TextProperties-Color="Black" TextProperties-Font="Arial, 18px">
</Appearance>
</TextBlock>
</ChartTitle>
</telerik:RadChart>
</td>
</tr>
</table>
this code works in c#:
chartname.Appearance.BarWidthPercent = 30;
Related
Is it possible to reduce the width of data point line in 3D Pie chart graph in asp.net?
Please check the image, you can able to see red color round, i want to reduce width of this line
Please check the code behind it:
style="border-bottom-style: solid; border-bottom-color: #FFFFFF">
<div style="overflow-x: hidden; overflow-y: hidden;" class="body">
<asp:Chart ID="ChartOnBDomesticByLocationType" runat="server"
BackImageTransparentColor="224, 224, 224"
TextAntiAliasingQuality="SystemDefault" BackSecondaryColor="Snow"
BorderlineColor="Silver" BorderlineDashStyle="Solid" BorderlineWidth="2">
<Series>
<asp:Series ChartType="Pie" BorderWidth="4" YValuesPerPoint="10" Name="Series1"
MarkerSize="2" Font="Microsoft Sans Serif, 10pt, style=Bold" IsValueShownAsLabel="True"
BackImageTransparentColor="192, 0, 0" IsXValueIndexed="True" ChartArea="ChartArea3"
Legend="On Board"
CustomProperties="PieLineColor=DimGray, CollectedSliceExploded=True, MinimumRelativePieSize=50, PieLabelStyle=Outside, 3DLabelLineSize=30">
</asp:Series>
<asp:Series ChartType="Pie" BorderWidth="4" YValuesPerPoint="10" Name="Series2"
MarkerSize="2" Font="Microsoft Sans Serif, 10pt, style=Bold" IsValueShownAsLabel="True"
BackImageTransparentColor="192, 0, 0" IsXValueIndexed="True" ChartArea="ChartArea3"
Legend="On Board"
CustomProperties="PieLineColor=LightGray, 3DLabelLineSize=30"
LabelForeColor="White">
<EmptyPointStyle MarkerBorderColor="White" MarkerColor="DimGray"
MarkerSize="1" />
</asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea3" BorderWidth="7" BackColor="White" BackGradientStyle="TopBottom"
BackImageTransparentColor="128, 128, 255" BackSecondaryColor="White" ShadowColor="RoyalBlue"
>
<AxisY Interval="10" Minimum="0" Maximum="100" TitleFont="Microsoft Sans Serif, 12pt"
TitleForeColor="ForestGreen">
<MajorGrid LineColor="Gray" />
<LabelStyle Format="0" />
</AxisY>
<AxisX LineColor="Red" LineWidth="0" TitleForeColor="Black" >
<MajorGrid LineWidth="0" LineColor="Gray" />
</AxisX>
<%-- <Area3DStyle Inclination="20" PointDepth="12" Rotation="20" LightStyle="None"
WallWidth="10" IsRightAngleAxes="False" Perspective="15" />--%>
</asp:ChartArea>
<asp:ChartArea Name="samplechartarea" BackColor="224, 224, 224" BackGradientStyle="TopBottom"
BackImageTransparentColor="0, 192, 0" BackSecondaryColor="224, 224, 224" ShadowColor="Lime"
Area3DStyle-Enable3D="true">
<AxisY Interval="10" Minimum="0" Maximum="100" TitleFont="Microsoft Sans Serif, 12pt"
IsMarginVisible="False" TitleForeColor="ForestGreen" Title="PreServiceCatalog">
<MajorGrid LineColor="Gray" />
</AxisY>
<AxisX LineColor="Red" LineWidth="0" TitleForeColor="ForestGreen">
<MajorGrid LineWidth="0" LineColor="Gray" />
</AxisX>
</asp:ChartArea>
</ChartAreas>
<Legends>
<asp:Legend Name="On Board" Title="Office Location" Docking="Bottom"
Alignment="Center" Font="Microsoft Sans Serif, 9pt, style=Bold"
IsTextAutoFit="False">
</asp:Legend>
</Legends>
<%--<Titles>
<asp:Title Font="Microsoft Sans Serif, 12pt" ShadowOffset="10" Alignment="TopCenter"
IsDockedInsideChartArea="False" ForeColor="Black" DockedToChartArea="ChartArea3"
Name="Title1" Text="Domestic OnBoarding By Location Type" Docking="Top" BackColor="White"
BorderColor="DarkGreen">
<Position Height="5.063335" Width="52.16632" X="4.365" Y="3" />
</asp:Title>
</Titles>--%>
</asp:Chart>
</div>
</td>
</tr>
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 { ...
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 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
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