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

Display Y Axis and bar values

5 Answers 187 Views
Chart (Obsolete)
This is a migrated thread and some comments may be shown as answers.
Simon
Top achievements
Rank 1
Simon asked on 13 Oct 2008, 01:45 PM
I have a chart where it shows up to 100% for test results for a series of topics. The issus I have is that, each bar shows the value at the top, except where the student scores 100%. I have set the max value of the Y-Axis to 110 but the chart now displays values up to 120 on the Y-Axis. Changing the step doesn't seem to affect this behaviour nor does setting the AutoScale.

5 Answers, 1 is accepted

Sort by
0
Simon
Top achievements
Rank 1
answered on 13 Oct 2008, 03:00 PM

I have used PlotArea.YAxis.AxisMode =

ChartYAxisMode.Extended but still no luck.

In the image below you can see that there are issues with the alignment of the values, 100 doesn't appear and there is an erroneous 120 floating top left.

 

     tChart.PlotArea.DataTable.Visible = false;  
      tChart.Appearance.Dimensions.Width.Type = Telerik.Charting.Styles.UnitType.Percentage;  
      tChart.Appearance.Corners.SetCornersType(Telerik.Charting.Styles.CornerType.Round);  
      tChart.PlotArea.XAxis.DataLabelsColumn = "LessonText";  
      tChart.PlotArea.XAxis.Appearance.LabelAppearance.RotationAngle = 270;  
      tChart.PlotArea.XAxis.Appearance.MinorGridLines.Visible = false;  
 
      tChart.PlotArea.YAxis.MaxValue = 105;  
      tChart.PlotArea.YAxis.AutoScale = false;  
      tChart.PlotArea.YAxis.MinValue = 0;  
      tChart.PlotArea.YAxis.Step = 20;  
      tChart.PlotArea.YAxis.Appearance.MinorGridLines.Visible = false;  
      tChart.PlotArea.YAxis.AxisLabel.TextBlock.Text = "%";  
      tChart.PlotArea.YAxis.AxisLabel.Visible = true;  
      tChart.PlotArea.YAxis.Appearance.Width = 1;  
      tChart.PlotArea.YAxis.AxisLabel.Appearance.RotationAngle = 270;  
      tChart.PlotArea.YAxis.AxisMode = ChartYAxisMode.Extended;  
 
      tChart.PlotArea.Appearance.Dimensions.Paddings.Bottom = Telerik.Charting.Styles.Unit.Percentage(12);  
      tChart.PlotArea.Appearance.Corners.SetCornersType(Telerik.Charting.Styles.CornerType.Round);  
 
      tChart.IntelligentLabelsEnabled = true;  
      tChart.DataManager.ValuesYColumns = new string[] { "Percentage" };  
      tChart.AlternateText = "Cumulative Result by Topic";  
      tChart.DataBind(); 
Cumulative Result by Topic

0
Ves
Telerik team
answered on 14 Oct 2008, 06:12 AM
Hello Simon,

I am afraid the link to the image did not make it as it refers to "http://localhost/Secure/Reports/ChartImage.axd?UseSession=true&....". You will need to save the image and link it again. Still, I have a couple of suggestions for you.
  • You can use PlotArea.YAxis.AxisMode=ChartYAxisMode.Extended but with AutoScale = true. This will force the Y axis to display an additional step i.e. if the values are up to 100 with step 10, the MaxValue will be 100.
  • You can still use AutoScale = false and set MinValue, MaxValue and Step but you will need to sync these values. That is, with MinValue = 0 and Step = 20, you cannot have MaxValue = 105, it should be either 100 or 120. You can use Step = 10 and MaxValue = 110.
Hope this helps.

All the best,
Ves
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Simon
Top achievements
Rank 1
answered on 14 Oct 2008, 08:34 AM
 //Format Chart 'Cumulative Score By Topic'  
      tChart.Visible = true;  
      tChart.AutoLayout = true;  
      tChart.DefaultType = Telerik.Charting.ChartSeriesType.Bar;  
        
      //Set Chart Data  
      tChart.PlotArea.XAxis.Step = 20;  
      tChart.Series.Clear();  
      tChart.PlotArea.XAxis.Clear();  
 
      //cumulativeResult1.Columns.Remove("Total");  
      cumulativeResult1.Columns.Remove("LastTestDate");  
      cumulativeResult1.Columns.Remove("StudentName");  
 
      tChart.DataSource = cumulativeResult1;  
      cumulativeResult1.Columns.Add(new DataColumn("Percentage", System.Type.GetType("System.String")));  
      foreach (DataRow row in cumulativeResult1.Rows)  
      {  
        correct = Convert.ToInt32(row["TotalCorrect"]);  
        total = Convert.ToInt32(row["Total"]);  
        scorePercentage = (correct / total) * 100;  
 
        row["Percentage"] = Convert.ToString(Math.Round(scorePercentage, 1));  
      }  
      //tChart.DataManager.ValuesYColumns = new string[] { "TotalCorrect", "Total" };  
      tChart.PlotArea.DataTable.Visible = false;  
      tChart.Appearance.Dimensions.Width.Type = Telerik.Charting.Styles.UnitType.Percentage;  
      tChart.Appearance.Corners.SetCornersType(Telerik.Charting.Styles.CornerType.Round);  
      tChart.PlotArea.XAxis.DataLabelsColumn = "LessonText";  
      tChart.PlotArea.XAxis.Appearance.LabelAppearance.RotationAngle = 270;  
      tChart.PlotArea.XAxis.Appearance.MinorGridLines.Visible = false;  
 
      tChart.PlotArea.YAxis.MaxValue = 100;  
      tChart.PlotArea.YAxis.AutoScale = false;  
      tChart.PlotArea.YAxis.MinValue = 0;  
      tChart.PlotArea.YAxis.Step = 20;  
      tChart.PlotArea.YAxis.Appearance.MinorGridLines.Visible = false;  
      tChart.PlotArea.YAxis.AxisLabel.TextBlock.Text = "%";  
      tChart.PlotArea.YAxis.AxisLabel.Visible = true;  
      tChart.PlotArea.YAxis.Appearance.Width = 1;  
      tChart.PlotArea.YAxis.AxisLabel.Appearance.RotationAngle = 270;  
      tChart.PlotArea.YAxis.AxisMode = ChartYAxisMode.Extended;  
 
      tChart.PlotArea.Appearance.Dimensions.Paddings.Bottom = Telerik.Charting.Styles.Unit.Percentage(12);  
      tChart.PlotArea.Appearance.Corners.SetCornersType(Telerik.Charting.Styles.CornerType.Round);  
 
      tChart.IntelligentLabelsEnabled = true;  
      tChart.DataManager.ValuesYColumns = new string[] { "Percentage" };  
      tChart.AlternateText = "Cumulative Result by Topic";  
      tChart.DataBind(); 

No matter which permutation of ChartYAxisMode.Extended or YAxis.Step I still do not get the desired effect of a max value showing of 100% and a small area at the top to show the value of 100 other wise the graph stops at 100% on the YAxis and does not display the value. A value above 100% has no meaning so is not required to be shown.

0
Accepted
Ves
Telerik team
answered on 16 Oct 2008, 06:57 AM
Hi Simon,

I am afraid you cannot have half or quarter of the step added to Y axis Range. But you can add a whole step and hide the last label. I have attached a small example showing this.

Kind regards,
Ves
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Simon
Top achievements
Rank 1
answered on 16 Oct 2008, 10:55 AM
      cumulativeResult.Visible = true;  
      cumulativeResult.DataManager.ValuesYColumns = new string[] { "Percentage" };  
 
      cumulativeResult.PlotArea.YAxis.LabelStep = 20;  
      cumulativeResult.PlotArea.YAxis.MaxValue = 110;  
      cumulativeResult.PlotArea.YAxis.AutoScale = false;  
      cumulativeResult.PlotArea.YAxis.AxisLabel.Visible = true;  
      cumulativeResult.PlotArea.YAxis.AxisLabel.TextBlock.Text = "%";  
 
      cumulativeResult.PlotArea.XAxis.DataLabelsColumn = "LessonText";  
      cumulativeResult.PlotArea.XAxis.Appearance.LabelAppearance.RotationAngle = 270;  
 
      cumulativeResult.DataSource = cumulativeResult1;  
      cumulativeResult.DataBind(); 

This seems to work for me. Thanks for the code sample - you can close the support ticket.
Tags
Chart (Obsolete)
Asked by
Simon
Top achievements
Rank 1
Answers by
Simon
Top achievements
Rank 1
Ves
Telerik team
Share this question
or