Display Y Axis and bar values

[Simon]

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.

[Simon]

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();

[Ves]

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.

[Simon]

 //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.

[Ves]

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.

[Simon]

      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.