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:
Related
The Problem
I am trying to simply display images in 2 rows, 2 columns - equally centered all around.
I have tried all sorts of Layouts. Here are a couple of my failures:
My Ideal Layout
My XML
<Page loaded="pageLoaded" class="page"
xmlns="http://www.nativescript.org/tns.xsd">
<ActionBar class="action-bar customActionBar" >
<!--
Use the NavigationButton as a side-drawer button in Android
because ActionItems are shown on the right side of the ActionBar
-->
<NavigationButton ios:visibility="collapsed" icon="res://menu" tap="onDrawerButtonTap"></NavigationButton>
<!--
Use the ActionItem for IOS with position set to left. Using the
NavigationButton as a side-drawer button in iOS is not possible,
because its function is to always navigate back in the application.
-->
<ActionItem icon="res://navigation/menu"
android:visibility="collapsed"
tap="onDrawerButtonTap"
ios.position="left"></ActionItem>
<Label class="action-bar-title" text="Signup"></Label>
</ActionBar>
<DockLayout width="100%" height="100%" backgroundColor="lightgray" class="page-gradient"
stretchLastChild="false">
<Button class="submitButton h2 border" text="Next" height="60" dock="bottom"
tap="onSignupButtonTap" returnKeyType="next"/>
<!-- content -->
<StackLayout dock="top" width="100%" height="75" >
<!-- ><Label horizontalAlignment="center" text="Graphic - Step 1 thru 3 Here" />
-->
<Image class="" src="~/images/signup/step-1-on.png" stretch="fill" />
<Image style="margin-top: 15" src="~/images/signup/progress.png" stretch="fill" />
</StackLayout>
<WrapLayout orientation="horizontal" width="210" height="210" backgroundColor="lightgray">
<Label text="Label 1" width="70" height="70" backgroundColor="red"/>
<Label text="Label 2" width="70" height="70" backgroundColor="green"/>
<Label text="Label 3" width="70" height="70" backgroundColor="blue"/>
<Label text="Label 4" width="70" height="70" backgroundColor="yellow"/>
</WrapLayout>
<!-- end content -->
</DockLayout>
</Page>
Can you help me with this layout? It appears to be easy, but not for me.
Thank You.
Created a playground here.
GridLayout is the king.
<GridLayout columns="*, *" rows="*, *" width="230" height="230"
backgroundColor="lightgray">
<Label text="Label 1" row="0" col="0" backgroundColor="red" />
<Label text="Label 2" row="0" col="1" backgroundColor="green" />
<Label text="Label 3" row="1" col="0" backgroundColor="blue" />
<Label text="Label 4" row="1" col="1" backgroundColor="yellow" />
<Label text="Label 5" row="1" col="2" backgroundColor="orange" />
</GridLayout>
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 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
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;