This is a migrated thread and some comments may be shown as answers.

Rad chart Yaxix tick label binding to graph

7 Answers 223 Views

Chart

This is a migrated thread and some comments may be shown as answers.

FIJO asked on 23 Sep 2010, 06:03 AM

rad-chart-yaxix-tick-label-binding-to-graph.JPG

older.JPG

HI,

pLease respond asap , iam having a blocker with this.
I am working on Telerick charts, I have graph which will look like this in the release tab area.

please have look at New RAd Chart without YAxix tick label binding to graph.png

I would like to set Yaxix tick value as label for this control.

Older asp application will have this look and fell after setting Y-axix tick value.
please have look at Older.png

So how do I put y-axis tick label for these there column in my rad chart in the above rad chart .

With thanks,

Fijo Francis T.

7 Answers, 1 is accepted

answered on 28 Sep 2010, 02:27 PM

Hi,

Thank you for contacting Telerik Support.

To be able to set custom labels you should use Categorical chart where the category is your string. Categorical charts are described in our help topic - http://www.telerik.com/help/silverlight/radchart-features-categorical-charts.html with source code. As a side note -- this is actually the X axis which appears vertically in case of horizontal chart.

I hope this information helps.

Greetings,
Evgenia
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

answered on 07 Oct 2010, 06:21 PM

radchartsample.JPG

infragisticssample.jpg

HI ,
PLEASE HELP ME URGENT (:.-.:)
As per you suggested in previous reply i have done all the settings now graph look like as per attachment with this RADCHARTSAMPlE.JPG

XAML part look like this

In this YAxisDisplayName is a combined collection or concatnated string of FeatureName+ FeatureStatusName+ReviseEstimate

It is coming now all the ytick label collection in above how do i get it as the chart in infragisticsSample.jpg here each label and yaaxix value is directly aligen in a strigth y axix tick. HOW DO I DO THAT?

Please have look at ReleaseFeatureChart.xaml which i am using now in RADCHARTSAMPlE.JPG . please respond me as soon as possible.

With Thanks,
Fijo
ReleaseFeatureChart.xaml

answered on 11 Oct 2010, 04:35 PM

Hi,

As I investigated your XAML I saw that you are trying to set Grouping. There is no need of this feature in your scenario as there are no similar category names. Here is how you can achieve the desired chart (shown in infragisticssample.jpg) :

public partial class MainPage : UserControl

{

public class Company

{

public string FeatureStatusName { get; set; }

public double Value1 { get; set; }

public string ReviseEstimate { get; set; }

public string Category { get; set; }

public string FeatureName { get; set; }

public Company(string featureName, string featureStatusName, string reviseEstimate, double value1)

{

FeatureName = featureName;

FeatureStatusName = featureStatusName;

Value1 = value1;

Category = featureName + " " + featureStatusName + " " + reviseEstimate;

}

public override string ToString()

{

return FeatureStatusName + Value1;

}

public MainPage()

{

InitializeComponent();

List<Company> sampleData = new List<Company>();

sampleData.Add(new Company("Release management for iteration 6", "Completed", "5", 100));

sampleData.Add(new Company("Release management for iteration 5", "Completed", "5", 210));

sampleData.Add(new Company("Rule interpreter or parser", "In progress", "21", 89));

SeriesMapping seriesMapping = new SeriesMapping { LegendLabel = "Series 1" };

seriesMapping.ItemMappings.Add(new ItemMapping("Value1", DataPointMember.YValue));

seriesMapping.ItemMappings.Add(new ItemMapping("Category" , DataPointMember.XCategory));

seriesMapping.SeriesDefinition = new HorizontalBarSeriesDefinition() { ShowItemLabels = true};

RadChart1.DefaultView.ChartArea.AxisX.LayoutMode = AxisLayoutMode.Inside;

RadChart1.ItemsSource = sampleData;

RadChart1.SeriesMappings.Add(seriesMapping);

}

The chart is bound using a list of business objects. In order to map to such kind of business objects, you have to create a new instance of SeriesMapping. Each SeriesMapping has ItemMapping property. For each ItemMappings the following properties are set - DataPointMember and FieldName which specifies from where the data should be taken. You can find more information about this in our help article - http://www.telerik.com/help/silverlight/radchart-populating-with-data-data-binding-with-manual-series-mapping.html
To be able to show custom labels for Axis X tickpoints - chart uses Categories. In above XAML each XCategory is mapped to Category property of the class Company which is set to concatenated featureName , featureStatusName and reviseEstimate strings.

Additionally the property LayoutMode is set to Inside so that ticks match labels as described here - http://www.telerik.com/help/silverlight/radchart-features-layout-mode.html.

Best wishes,
Evgenia
the Telerik team

answered on 14 Oct 2010, 07:43 AM

oldchart.JPG

newradchart.JPG

Hi Evgenia,

I am facing following issues in the same Chart

Issue 1:

Old Chart: - Which look fine shown in OLDChart.JPG

New Rad Chart Which looks different shown in NewRadChart.JPG

Issue 1:

In old Chart all the column we binding in the y-axis is showing in Column wise how do I achieve same in New rad chart.

Old chart Code snippet which does this job is

e.YAxisTick.Label.Text +=

"<block hAlign='Left' " + extras + ">" + name + "<block hAlign='Center' " + extras + ">" +

e.Name + "<block hAlign='Center' " + extras + ">" + e.YValue;

Here its doing html align.

But as far I understand silver light is a XHTML render and much like flash pluggin so ho do we do these kind of column align.

Issue 2:

In old chart with Pentage is showing with % symbol but in silver light it is not showing % symbol , I know I need to concatenate % symbol but where because I am setting it as label like this which I shown in green. I am using ItemToolTipFormat for showing ScheduledEffort but how do I achive it for DataPointMember="Label"?

Please have look at new rad chart.

<telerik:RadChart.SeriesMappings>

<telerik:SeriesMapping>

<telerik:SeriesMapping.SeriesDefinition>

<telerik:HorizontalBarSeriesDefinition ShowItemToolTips="True" ShowItemLabels="True"

ItemToolTipFormat="Scheduled Effort:#Y{N} Hours"

ShowZeroValuesLabels="False" StackGroupName="Stack0"

</telerik:SeriesMapping.SeriesDefinition>

<telerik:SeriesMapping.ItemMappings>

<telerik:ItemMapping FieldName="YAxisDisplayName" DataPointMember="XCategory"/>

<telerik:ItemMapping FieldName="ScheduledEffort" DataPointMember="YValue" />

<telerik:ItemMapping FieldName="PercentageCompleted" DataPointMember="Label" />

</telerik:SeriesMapping.ItemMappings>

</telerik:SeriesMapping>

</telerik:RadChart.SeriesMappings>

Issue 3:-

In old Chart it is showing ScheduledEffort and PercentageCompleted in same tooltip how I achive same in rad chart? Code is same as above

Issue 4:

In Old Chart 1000 is howing in X axix but in new rad chart 1000 is formatting 1K but I have to maintain same look and feel as old one what should I do , I mean to show as 1000?

With Tahnks,

FIJO Francis T

answered on 18 Oct 2010, 10:45 AM

Hello FIJO,

Issue 1) Here is a suggestion which will make categories look maximum close to your requirement.
You can set custom Style to your axis item labels as described here - http://www.telerik.com/help/silverlight/radchart-styling-and-appearance-styling-axis-item-label.html. The key Property you need is HorizontalAlignment which I'm setting to Right:

<Style x:Key="ItemLabelStyle"

TargetType="TextBlock">

<Setter Property="Foreground"

Value="Black"

/>

<Setter Property="HorizontalAlignment" Value="Right"/>

</Style>

After that you can use horizontal tab "\t" escape sequence to provide equal space between strings. The example below sets in the data, but you may consider wiring the iItemDataBound event and modifying each DataPoint's Category in the same manner.

List<Company> sampleData = new List<Company>();

sampleData.Add(new Company("Release management for iteration 6\t", "\tCompleted", "\t5\t", 1000, "100"));

sampleData.Add(new Company("Release management for iteration 5\t", "\tCompleted", "\t5\t", 2010, "88.89"));

sampleData.Add(new Company("Rule interpreter or parser\t", "\tIn progress", "\t21\t", 890, "100"));

sampleData.Add(new Company("Rule builder GUI\t", "\tCompleted", "\t21\t", 2000, "100"));

sampleData.Add(new Company("Alerts Engine\t", "\tCompleted", "\t13\t", 3000, "100"));

Issue 2) You are right that you need to concatenate "%" sign with Item Label string. You can do this in the constructor:

public string FeatureStatusName { get; set; }

public double Value1 { get; set; }

public string ReviseEstimate { get; set; }

public string Category { get; set; }

public string FeatureName { get; set; }

public string PercentageCompleted { get; set; }

public Company(string featureName, string featureStatusName, string reviseEstimate, double value1, string percentageCompleted)

{

FeatureName = featureName;

FeatureStatusName = featureStatusName;

Value1 = value1;

PercentageCompleted = percentageCompleted + "%";

Category = featureName + featureStatusName + reviseEstimate;

}

Then simply set ItemMapping's Label to PercentageCompleted field like this:

seriesMapping.ItemMappings.Add(new ItemMapping("PercentageCompleted", DataPointMember.Label));

Issue 3) You can show ScheduledEffort and PercentageCompleted in same tooltip using #DATAITEM token as described here - http://www.telerik.com/help/silverlight/radchart-features-format-expressions.html.
Here is how your ItemToolTip should look like:

seriesMapping.SeriesDefinition = new HorizontalBarSeriesDefinition()

{

ItemToolTipFormat = "Scheduled Effort:#Y{N} Hours\nPercentage Completed: #DATAITEM.PercentageCompleted",

ShowItemToolTips = true,

ShowItemLabels = true

};

NOTE that you need to turn on visibility of ItemLabels and ToolTips. The tooltip is formatted to show two rows by the "\n" escaping sequence.

Issue 4) RadChart allows you to specify how to format the axis labels by specifying ChartArea.LabelFormatBehavior property. In your case it is set to "HumanReadable" (by default) and you need to change it to None like this:

RadChart1.DefaultView.ChartArea.LabelFormatBehavior = LabelFormatBehavior.None;

This is described in our help article - http://www.telerik.com/help/silverlight/radchart-features-chart-area.html.

I hope this information helps.

Best wishes,
Evgenia
the Telerik team

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Rad chart Yaxix tick label binding to graph

7 Answers, 1 is accepted