How to add custom legend in rechart? - recharts

I've pie chart for that I want to add custom legend, As of now from rechart I got legend like this but how to customized it?
Existing
I want legend like this:
Someone please help,Thank you

You can use content property in order to render a custom legend, like this:
<Legend iconType="circle" content={<RenderCusomizedLegend />} />
here is an example of use:
https://gist.github.com/abhirathore2006/7fa73328be7ff45b785d727fb19fffa6
also you can read more abou that in recharts documentation :
http://recharts.org/en-US/api/Legend

Related

kendo grid column: how to data bind click event in footer template?

Kendo Grid columns' data-bind click event in the footer template is not working.
Please see the example http://dojo.telerik.com/ALAZo
The click event on column template for price is working fine but not for the footer template for the same.
Any resolution which uses MVVM binding would be greatly appreciated
By default, the header and footer of the Grid are not bound to the ViewModel. A workaround is to find the footer with an appropriate jquery selector after the grid has been initialised and then bind it manually. So something like this:
kendo.bind($("body"), viewModel);
kendo.bind($("#grid").find(".k-grid-footer"), viewModel);
Here I've added id="grid" to your grid declaration like so in order to find it:
<div id="grid" data-role="grid" data-bind="source:dataSource"
I have reworked your example in order to get a solution where click event works on both column and footer template.
<a onclick='test()'... seems to do the trick.

Set textfield to numeric only Nativescript

I trying to do textfield accept numeric only and text align to center, but it no take any effect, Isn't I set wrong properties or another way to set?
<TextField id="btn" android:inputType="number" android:numeric="number" android:textAlignment="center" col="1" backgroundColor="#ffffff" col="2"/>
First. You want to set the keyboardType to number. See the documentation on EditableTextBase
Second, about styling. You really want to set the styling within a CSS file as it helps you separate markup and style. Take a look at the documentation about styling.
But if you want you can use inline styles. However what you've done is that you've tried to pass styling as xml parameters. What you want to do is that you want to pass the styling to the style param like this:
<TextField style="text-align: center;"/>
compare that to what you did:
<TextField textAlignment="center"/>
But as said. You're gonna be a happier developer if you write your style in a separate CSS file, like:
<TextField cssClass="myClass">
and then in your CSS file:
.myClass {
text-align: left;
}
On your submit event you could add in some validation to ensure that the input is a number. You can check this using console.log(typeof var) where var is the value of the text field, it should return integer.
You're best off setting the text-alignment within your CSS file.

BIRT chart using birt:report tag

I have tried to create charts with birt:viewer tag which displays viewer in iframe. But I want to use birt:report tag which will display inside div. I gone through
http://www.eclipse.org/birt/phoenix/deploy/viewerUsage2.2.php#tags
viewer tag library. Can someone help me with a sample ?
use reportcontainer="div" attribute in birt reporter tag then our charts generate on div
Try this tag
<birt:report id="<%=repoviewid %>" reportDesign="testreport.rptdesign" height="200" format="html" reportContainer="div" scrolling="no"/>

Modify built-in ember.js view

I'm new to ember.js and looking at the built-in views: http://emberjs.com/guides/views/built-in-views/
I understand working with views using a data-template name and editing it from Ember.view.extend, but how do I modify these ember.js built in views? And how do view names work?
For example, in my index.html:
<script type="text/x-handlebars" id="test">
<h3>Title</h3>
<p>{{view Ember.TextField valueBinding='title'}}</p>
<h3>Body</h3>
<p>{{view Ember.TextArea viewName="bodyArea" valueBinding='text'}}</p>
<h2>Output</h2>
{{title}}
{{text}}
</script>
Now how might I set the background color of the textarea with the viewName="bodyArea" in my app.js? In the ember.js guide linked to above they show that you can set a viewName property in handlebars but don't show how you might edit it in javascript....
I think you have three questions here:
How do I set a background color on the text area? {{view Ember.TextArea viewName="bodyArea" valueBinding='text' classNames="my-class-name'}} and then use CSS to style "my-class-name".
How do I modify a view with custom behavior?
App.MyTextArea = Em.TextArea.extend({
didInsertElement: function(){
//do something cool here.
}
});
In template:
{{view App.MyTextArea}}
How do I use view name? I'm not sure that is something that is used a lot, but if you define a container view you could access a child view with this.get('myViewName'). As things are more encapsulated within ember a lot of the old uses for viewName no longer seem relevant. Someone else might be able to chime in on this feature.
As an aside you can also use a new short hand for built in views:
{{textarea value=title}} will do the same as {{view Ember.TextField valueBinding='title'}}

To Show an tooltip on Image in Mvc3

I'm using asp.net MVC3 and i want to show a table containing information about a course
In that i have a field called "Information" which show an image.
I want to show the a tooltip when the mouse is taken on that image
I'm showing image lik this:
<img id="ok" src="../../Images/info.jpg" alt="tooltip"/>
I dont want to use any added plugin
can anybody help me with this?
Use title as well as alt in the Html tag
<img id="ok" src="../../Images/info.jpg" title="This is your tooltip message"/>
alt attributes on img elements are used as alternate text in case the image does not exist. Some browsers display these as tool tips when hovering over the image, but its not standard.
You could use the title attribute to display a tool tip on hover of the image.
You should always provide an alt attribute when using images, this is best for accessibility (screen readers read the alt text), and will fail XHTML if you don't have the attribute.

Resources