I have one LineSeries and one BarSeries, and I need two use two Y-axis. How I can achieve this in Nativescript angular?
You can set multiple axes via HTML as follows:
<RadCartesianChart tkExampleTitle tkToggleNavButton>
<LinearAxis tkCartesianVerticalAxis horizontalLocation="Left"></LinearAxis>
<CategoricalAxis tkCartesianHorizontalAxis verticalLocation="Down"></CategoricalAxis>
<LineSeries tkCartesianSeries seriesName="RateA" [items]="rateA" stackMode="Stack" categoryProperty="Country" valueProperty="Amount"></LineSeries>
<LineSeries tkCartesianSeries seriesName="RateB" [items]="rateB" stackMode="Stack" categoryProperty="Country" valueProperty="Amount"></LineSeries>
<LineSeries tkCartesianSeries seriesName="RateC" [items]="rateC" stackMode="Stack" categoryProperty="Country" valueProperty="Amount"></LineSeries>
<BarSeries tkCartesianSeries seriesName="Total" [items]="total" stackMode="Stack" categoryProperty="Country" valueProperty="Amount">
<LinearAxis tkBarVerticalAxis horizontalLocation="Right"></LinearAxis>
</BarSeries>
</RadCartesianChart>
The full example can be found here
Related
am trying to have different legends labels with their own colors representing each column in the bar series. As you see in the screen shot, i can't get other legends to appear.
Also each should have a different color. Here is my html.
<CategoricalAxis tkCartesianHorizontalAxis allowPan="true" allowZoom="true"></CategoricalAxis>
<LinearAxis tkCartesianVerticalAxis allowPan="true"></LinearAxis>
<BarSeries tkCartesianSeries [items]="LivestockData"
categoryProperty="Year" valueProperty="Amount" seriesName="Bar" showLabels="true" legendTitle="Cattle"></BarSeries>
<!-- >> chart-legend-angular-definition -->
<RadLegendView tkCartesianLegend position="Bottom" title="Species"
height="150" enableSelection="true"></RadLegendView>
<!-- << chart-angular-styling-bars -->
<Palette tkCartesianPalette seriesName="Bar">
<PaletteEntry tkCartesianPaletteEntry fillColor="#A05BC5"></PaletteEntry>
</Palette>
</RadCartesianChart>
Here is the data am showing.
{ species: "Cattle", Amount: 4771, Year: 1980 },
{ species: "Sheep and goats", Amount: 3862, Year: 2000 },
{ species: "Pigs", Amount: 187, Year: 2002 },
{ species: "Poultry", Amount: 2941, Year: 1990 }
The species property values should be in the legends but i can only show cattle value and i also need different colors for each. Any help is appreciated.
I have the playground for you here. To have the mutiple colors for the Bars, you need to comment out the Palette section and add the paletteMode="Item" in your Bar Series.
<BarSeries tkCartesianSeries [items]="categoricalSource"
categoryProperty="Year" paletteMode="Item" valueProperty="Amount"
seriesName="Bar" legendTitle="Cattle" showLabels="true"></BarSeries>
Also Legend is working fine as they represents series type and you can modity the legendTitle per series. If you want multiple legends, you need to add mutiple Bar series(for each cattle in your case.)
i need this FLUID Code "inline":
<f:for each="{dce:fal(field:'textImageTeaserImage', contentObject:contentObject)}" as="fileReference" iteration="iterator">
<f:image src="{fileReference.uid}" treatIdAsReference="1" title="{field.textImageTeaserHeadline}" alt="{field.textImageTeaserHeadline}" class="img-responsive" width="1920c" height="780c" />
</f:for>
and here a Test with Image-Url:
{f:for(each: '{dce:fal(field: \'textImageTeaserImage\', contentObject:contentObject)}', as:'fileReference', iteration:'iterator') -> f:uri.image(src: 'fileReference.uid', treatIdAsReference: '1')}
but, it dont work :(
Thanks,
Sebastian
Inline syntax reverse the order (child node comes before parent node). Correct syntax:
{f:uri.image(src: 'fileReference.uid', treatIdAsReference: '1')
-> f:for(each: '{dce:fal(field: \'textImageTeaserImage\', contentObject: contentObject)}', as: 'fileReference', iteration: 'iterator')}
Same can be used to render a section for example, in case you need to add additional markup that is not added by the ViewHelpers themselves.
I propose to use an own section for it in combination with the <f:spaceless /> ViewHelper.
An (untested) example:
<f:section name="main">
<f:render section="imgs" arguments="{field:field,fieldName:'textImageTeaserImage',contentObject:contentObject}" />
</f:section>
<f:section name="imgs">
<f:spaceless>
<f:for each="{dce:fal(field:fieldName, contentObject:contentObject)}" as="fileReference" iteration="iterator">
<f:image src="{fileReference.uid}" treatIdAsReference="1" title="{field.textImageTeaserHeadline}" alt="{field.textImageTeaserHeadline}" class="img-responsive" width="1920c" height="780c" />
</f:for>
</f:spaceless>
</f:section>
that work:
<f:for each="{dce:fal(field:'textImageTeaserImage', contentObject:contentObject)}" as="fileReference" iteration="iterator">
<div style="background-image: url('{f:uri.image(src: '{fileReference.uid}', treatIdAsReference: 1, absolute: 1)}');">
</f:for>
but this is not fine :)
I got a problem with the toolbar property in the rich text field. On the first load everything looks as expected, but after a partial refresh you can see all buttons in the richtext editor.
It seems that you don't get the problem when you use slim, medium, large instead.
I use a Domino Server Version 9.0.1 FP3
Here is an example:
<xp:button value="Label" id="button1">
<xp:eventHandler event="onclick" submit="true"
refreshMode="partial" refreshId="inputRichText1">
</xp:eventHandler>
</xp:button>
<xp:inputRichText id="inputRichText1">
<xp:this.dojoAttributes>
<xp:dojoAttribute name="toolbar">
<xp:this.value><![CDATA[[['Format']]]]></xp:this.value>
</xp:dojoAttribute>
</xp:this.dojoAttributes>
</xp:inputRichText>
Try using the toolbarType property instead, with values "Slim", "Medium" or "Large" ...
<xp:inputRichText id="inputRichText1"
style="height:200.0px">
<xp:this.dojoAttributes>
<xp:dojoAttribute name="toolBarType"
value="Slim">
</xp:dojoAttribute>
</xp:this.dojoAttributes>
</xp:inputRichText>
In my app I import a twitter timeline. Some tweets contain images, some don't. Also the height of the imqages is variabel. I have a set width of 90% to make sure the images fit in the group (with a vertical layout), but no matter what I do, the group gets it's height from the original image, not the scaled height. I tried setting variableRowHeight="true", but that doesn't seem to do anything.Here is some sample code:
<s:List id="list" y="0" width="90%" height="954" dataProvider="{tweets}" horizontalCenter="0">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:itemRenderer>
<fx:Component>
<s:ItemRenderer>
<s:Group width="100%">
<s:Label id="twitlabel" text="{tweetImage.height}"
width="100%"
styleName="tweetlist"/>
<s:Image id="tweetImage" y="{twitlabel.height}" width="90%" horizontalCenter="0" scaleMode="letterbox" smooth="true" source="{data.entities.media[0].media_url}"/>
</s:Group>
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
The question is, how can I get the group to set it's height to the scaled image height?
First set the "complete" event handler for your Image and an id for your Group:
<s:Group id="tweetImageGroup" width="100%">
<s:Image id="tweetImage" y="{twitlabel.height}" horizontalCenter="0" scaleMode="letterbox" smooth="true" source="{data.entities.media[0].media_url}" complete="tweetImage_completeHandler(event)"/>
Then set the width after the image has completed loading:
protected function tweetImage_completeHandler(event:Event):void{
tweetImageGroup.height = event.currentTarget.measuredHeight;
}
This might need some adjusting but should work if I understood your problem correctly.
i am applying struts2 jquery grid.the data in the grid will be generated based on the filter selected values and the jsp will be executed where i have written this code.the data type i am using is json and the action is execution here but i want to pass parameters for this action how can i acheive this without including url in same page.even i tried with type="chain",redirect but i am not getting any grid just json data is displaying
*<s:url id="remoteurl" action="gridaction"/>
<s:url id="editurl" action="editaction"/>
<s:url id="selecturl" action="selectaction"/>*
<sjg:grid id="sjgrid" **dataType="json"** href="%{remoteurl}" caption="Grid Model"
gridModel="gridModel" editurl="%{editurl}"
navigator="true"
navigatorSearch="true"
navigatorSearchOptions="{multipleSearch:true}"
navigatorExtraButtons="{
seperator: {
title : 'seperator'
},
hide : {
title : 'Show/Hide',
icon: 'ui-icon-wrench',
topic: 'showcolumns'
},
alert : {
title : 'Alert',
onclick: function(){ alert('Grid Button clicked!') }
}
}"
loadonce="true"
pager="true"
pagerPosition="center"
rowList="5,10,20"
shrinkToFit="true"
altRows="true"
autowidth="true"
filter="true"
>
<sjg:gridColumn name="iduser" title="iduser" key="true" hidden="true"/>
<sjg:gridColumn name="uname" title="Username" editable="true" align="center"
editrules="{required:true}"
/>
<sjg:gridColumn name="passwd" title="Password" editable="true" align="center"
editrules="{required:true}"
/>
<sjg:gridColumn name="country" title="Country" editable="true" align="center"
edittype="select"
editoptions="{dataUrl:'%{selecturl}'}"
/>
<sjg:gridColumn name="contact" title="Contact No" editable="true" align="center"
editrules="{required:true,number:true,integer:true}"
/>
</sjg:grid>
you have to use formIds attribute:
first create a form with the variables you want to send
second reference this form from sjg:grid with the formIds attribute
in the json action you will have all form variables available