[Solved] Labels for bar chart not showing.

[Jonathan]

protected void DisplayRadChart(Guid UserID, int CourseID)
{
    //CLEAR INFO
    Chart_Code.PlotArea.Chart.Series.Clear();
    Chart_Code.PlotArea.XAxis.Clear();
    //GET THE INFO
    i2d2LMSProgress i2d2progress = new i2d2LMSProgress();
    UserLessonProgressCollection progress = i2d2progress.GetUserProgress(UserID, CourseID);
    ChartSeries failedSeries = new ChartSeries("FTW");
    failedSeries.Clear();
    failedSeries.Appearance.LegendDisplayMode = ChartSeriesLegendDisplayMode.SeriesName;
    failedSeries.Appearance.LabelAppearance.Visible = false;
    failedSeries.Appearance.FillStyle.MainColor = Color.Red;
    failedSeries.Type = ChartSeriesType.StackedBar100;
    ChartSeries completedSeries = new ChartSeries("Completed");
    completedSeries.Clear();
    completedSeries.Appearance.LegendDisplayMode = ChartSeriesLegendDisplayMode.SeriesName;
    completedSeries.Appearance.LabelAppearance.Visible = false;
    completedSeries.Appearance.FillStyle.MainColor = Color.Green;
    completedSeries.Type = ChartSeriesType.StackedBar100;
    ChartSeries startedSeries = new ChartSeries("Started");
    startedSeries.Clear();
    startedSeries.Appearance.LegendDisplayMode = ChartSeriesLegendDisplayMode.SeriesName;
    startedSeries.Appearance.LabelAppearance.Visible = false;
    startedSeries.Appearance.FillStyle.MainColor = Color.Yellow;
    startedSeries.Type = ChartSeriesType.StackedBar100;
    ChartSeries notstartedSeries = new ChartSeries("Not Started");
    notstartedSeries.Clear();
    notstartedSeries.Appearance.LegendDisplayMode = ChartSeriesLegendDisplayMode.SeriesName;
    notstartedSeries.Appearance.LabelAppearance.Visible = false;
    notstartedSeries.Appearance.FillStyle.MainColor = Color.PowderBlue;
    notstartedSeries.Type = ChartSeriesType.StackedBar100;
    Chart_Code.Legend.Items.Clear();
    foreach (UserLessonProgress ulp in progress)
    {
        failedSeries.AddItem(new ChartSeriesItem(Convert.ToDouble(ulp.Failed)));
        completedSeries.AddItem(new ChartSeriesItem(Convert.ToDouble(ulp.Completed)));
        startedSeries.AddItem(new ChartSeriesItem(Convert.ToDouble(ulp.Started)));
        notstartedSeries.AddItem(new ChartSeriesItem(Convert.ToDouble(ulp.NotStarted)));
        Chart_Code.PlotArea.XAxis.AddItem(new ChartAxisItem(ulp.Title, Color.Violet));
    }
    Chart_Code.AddChartSeries(failedSeries);
    Chart_Code.AddChartSeries(completedSeries);
    Chart_Code.AddChartSeries(startedSeries);
    Chart_Code.AddChartSeries(notstartedSeries);
    //SPECIFY THE CHART
    Chart_Code.DefaultType = ChartSeriesType.StackedBar100;
    Chart_Code.Visible = true;
    Chart_Code.PlotArea.Appearance.FillStyle.MainColor = Color.FromArgb(255, 255, 255);
    Chart_Code.PlotArea.Appearance.FillStyle.SecondColor = Color.FromArgb(255, 255, 255);
    Chart_Code.PlotArea.EmptySeriesMessage.TextBlock.Text = "No data available";
    Chart_Code.PlotArea.EmptySeriesMessage.Appearance.FillStyle.MainColor = Color.FromArgb(255, 255, 255);
    Chart_Code.PlotArea.EmptySeriesMessage.Appearance.FillStyle.SecondColor = Color.FromArgb(255, 255, 255);
    //** CHART TITLE **
    Chart_Code.ChartTitle.TextBlock.Appearance.Dimensions.Height = 0;
    Chart_Code.ChartTitle.TextBlock.Visible = false;
    Chart_Code.Chart.Appearance.Corners.SetCornersType(Telerik.Charting.Styles.CornerType.Round);
    Chart_Code.Appearance.Border.Color = Color.LightGray;
    Chart_Code.Skin = "Outlook";
    //** YAXIS **
    Chart_Code.PlotArea.YAxis.AxisLabel.TextBlock.Appearance.TextProperties.Font = new Font("Arial", 8, FontStyle.Bold);
    Chart_Code.PlotArea.YAxis.AxisLabel.TextBlock.Appearance.TextProperties.Color = Color.FromArgb(50, 50, 50);
    Chart_Code.PlotArea.YAxis.MaxValue = 110;
    Chart_Code.PlotArea.YAxis.MaxValue = 0;
    Chart_Code.PlotArea.YAxis.AutoScale = false;
    Chart_Code.PlotArea.YAxis.AddRange(0, 100, 20);
    Chart_Code.PlotArea.YAxis.AxisLabel.TextBlock.Text = "%";
    Chart_Code.PlotArea.YAxis.AxisLabel.Visible = true;
    Chart_Code.PlotArea.YAxis.Appearance.MinorGridLines.Visible = false;
    //** XAXIS **
    Chart_Code.PlotArea.XAxis.Appearance.TextAppearance.TextProperties.Font = new Font("Arial", 8, FontStyle.Bold);
    Chart_Code.PlotArea.XAxis.AutoScale = true;
    //Chart_Code.PlotArea.XAxis.Appearance.LabelAppearance.RotationAngle = 320;
    Chart_Code.PlotArea.XAxis.Appearance.LabelAppearance.Position.AlignedPosition = Telerik.Charting.Styles.AlignedPositions.Top;
    Chart_Code.PlotArea.XAxis.Appearance.TextAppearance.AutoTextWrap = Telerik.Charting.Styles.AutoTextWrap.True;
    Chart_Code.PlotArea.XAxis.LayoutMode = Telerik.Charting.Styles.ChartAxisLayoutMode.Between;


    Chart_Code.PlotArea.Appearance.Dimensions.Margins.Bottom.Value = 30;
    Chart_Code.PlotArea.XAxis.Appearance.LabelAppearance.RotationAngle = 90;
    //** CHART HEIGHT/WIDTH/PADDING/MARGINS
    Chart_Code.PlotArea.Appearance.Dimensions.Margins.Bottom = Telerik.Charting.Styles.Unit.Percentage(40);
    Chart_Code.PlotArea.Appearance.Dimensions.Margins.Top = Telerik.Charting.Styles.Unit.Percentage(10);
    Chart_Code.PlotArea.Appearance.Dimensions.Margins.Left = Telerik.Charting.Styles.Unit.Percentage(8);
    Chart_Code.PlotArea.Appearance.Dimensions.Margins.Right = Telerik.Charting.Styles.Unit.Percentage(5);
    Chart_Code.PlotArea.Appearance.Dimensions.Width = Telerik.Charting.Styles.Unit.Pixel(400);
    //// ** LEGEND STYLE **
    Chart_Code.Legend.TextBlock.Appearance.FillStyle.SecondColor = Color.White;
    Chart_Code.Legend.Appearance.FillStyle.SecondColor = Color.White;
    Chart_Code.Legend.Appearance.ItemMarkerAppearance.Visible = false;
    Chart_Code.Legend.Appearance.Corners.SetCornersType(Telerik.Charting.Styles.CornerType.Round);
    Chart_Code.Legend.Appearance.Position.AlignedPosition = Telerik.Charting.Styles.AlignedPositions.BottomLeft;
    Chart_Code.Legend.Appearance.Dimensions.Margins.Left = 70;
    Chart_Code.Legend.Appearance.Dimensions.Margins.Bottom = 20;
    Chart_Code.Legend.Appearance.Dimensions.AutoSize = false;
    Chart_Code.Legend.Appearance.Dimensions.Width = Telerik.Charting.Styles.Unit.Pixel(830);
    Chart_Code.Legend.Appearance.Dimensions.Height = Telerik.Charting.Styles.Unit.Pixel(30);
    //// ** PLOTAREA STYLE **
    Chart_Code.PlotArea.Appearance.Border.Visible = false;
    Chart_Code.PlotArea.Appearance.FillStyle.MainColor = Color.White;
    Chart_Code.PlotArea.Appearance.FillStyle.SecondColor = Color.White;

}

When I use the code above I am only getting the numbers rather than the titles for the columns.

I am adding the information with the line "Chart_Code.PlotArea.XAxis.AddItem(new ChartAxisItem(ulp.Title, Color.Violet)); " but the numbers still show up (and aren't violet).

Any ideas where I might be going wrong? If I put in a break I can check the values at the end of the procedure and they are there.

Below is a more stripped down version of the code that still shows 1,2,3 etc. rather than the titles.

//CLEAR INFO
Chart_Code.PlotArea.Chart.Series.Clear();
Chart_Code.PlotArea.XAxis.Clear();
//GET THE INFO
i2d2LMSProgress i2d2progress = new i2d2LMSProgress();
UserLessonProgressCollection progress = i2d2progress.GetUserProgress(UserID, CourseID);
ChartSeries failedSeries = new ChartSeries("FTW");
failedSeries.Clear();
failedSeries.Appearance.LegendDisplayMode = ChartSeriesLegendDisplayMode.SeriesName;
failedSeries.Appearance.LabelAppearance.Visible = false;
failedSeries.Appearance.FillStyle.MainColor = Color.Red;
failedSeries.Type = ChartSeriesType.StackedBar100;
ChartSeries completedSeries = new ChartSeries("Completed");
completedSeries.Clear();
completedSeries.Appearance.LegendDisplayMode = ChartSeriesLegendDisplayMode.SeriesName;
completedSeries.Appearance.LabelAppearance.Visible = false;
completedSeries.Appearance.FillStyle.MainColor = Color.Green;
completedSeries.Type = ChartSeriesType.StackedBar100;
ChartSeries startedSeries = new ChartSeries("Started");
startedSeries.Clear();
startedSeries.Appearance.LegendDisplayMode = ChartSeriesLegendDisplayMode.SeriesName;
startedSeries.Appearance.LabelAppearance.Visible = false;
startedSeries.Appearance.FillStyle.MainColor = Color.Yellow;
startedSeries.Type = ChartSeriesType.StackedBar100;
ChartSeries notstartedSeries = new ChartSeries("Not Started");
notstartedSeries.Clear();
notstartedSeries.Appearance.LegendDisplayMode = ChartSeriesLegendDisplayMode.SeriesName;
notstartedSeries.Appearance.LabelAppearance.Visible = false;
notstartedSeries.Appearance.FillStyle.MainColor = Color.PowderBlue;
notstartedSeries.Type = ChartSeriesType.StackedBar100;
Chart_Code.Legend.Items.Clear();
foreach (UserLessonProgress ulp in progress)
{
    failedSeries.AddItem(new ChartSeriesItem(Convert.ToDouble(ulp.Failed)));
    completedSeries.AddItem(new ChartSeriesItem(Convert.ToDouble(ulp.Completed)));
    startedSeries.AddItem(new ChartSeriesItem(Convert.ToDouble(ulp.Started)));
    notstartedSeries.AddItem(new ChartSeriesItem(Convert.ToDouble(ulp.NotStarted)));
    Chart_Code.PlotArea.XAxis.AddItem(new ChartAxisItem(ulp.Title, Color.Violet));
}
Chart_Code.AddChartSeries(failedSeries);
Chart_Code.AddChartSeries(completedSeries);
Chart_Code.AddChartSeries(startedSeries);
Chart_Code.AddChartSeries(notstartedSeries);
//SPECIFY THE CHART
Chart_Code.DefaultType = ChartSeriesType.StackedBar100;
Chart_Code.Visible = true;

[Evgenia]

Hi Jonathan,

There are two ways to set custom labels for the Axis Items:

1. By assigning a property Name to the XAxis.DataLabelsColumn as shown in our help topic. The topic also demonstrates how to set custom color for Axis Labels:

RadChart1.PlotArea.XAxis.Appearance.TextAppearance.TextProperties.Color =
           System.Drawing.Color.BlueViolet;

Have in mind that this approach can be achieved not only by databinding to DataBase but to a Generic List of simple Objects too.
 
2. By manually setting string values as Axis Items labels as shown here.

Regards,
Evgenia
the Telerik team

[Erik]

Evgenia, both links you refer to are dead...could you please provide the appropriate links?

Thanks!

[Evgenia]

Hello Erik,

We are sorry for the inconvenience - some breaking changes were made to our documentation that leaded to modifications in help links.
Here are the topics my links refered to:
-  DataLabelsColumn property - http://www.telerik.com/help/aspnet-ajax/radchart-building-data-bind-database.html.
-  Manually setting the Axis Items labels - http://www.telerik.com/help/aspnet-ajax/radchart-how-to-add-axis-labels-programmatically.html

Regards,
Evgenia
the Telerik team

[Vasssek]

Hello Telerik Team,

I have the same issue with labeling X axis.

Chart declaration in ASPX:

<div id="chartContainer" style="padding-top: 15px;">
    <telerik:RadChart ID="RadChart1" runat="server"  Skin="Vista" Width="1215px"
        AutoLayout="true"  AutoTextWrap="true">
    </telerik:RadChart>
    </div>

Server side is from your link http://www.telerik.com/help/aspnet-ajax/radchart-building-data-bind-database.html.

The result is, that I have got just the numbers instead of titles for the columns.
http://www.freeimagehosting.net/newuploads/dinte.png

Plese help me to solve this issue.

Best regards

Vasssek

[Evgenia]

Hello Vasssek,

 Without your full source code, I can only guess why is such unwanted behaviour occuring. However, here are some tips you might follow to get the X axis labels correctly shown:

• You need to assign the column name to the RadChart1.PlotArea.XAxis.DataLabelsColumn property. You can review the "Data Binding RadChart to a Database Object" help topic and the online demo here:
  http://www.telerik.com/help/aspnet-ajax/buildingdatabinddatabase.html

          http://demos.telerik.com/aspnet-ajax/chart/examples/databinding/xml/defaultcs.aspx

• Whether you want to display DateTime values on the X Axis, you need to convert them to their OLE Automation equivalents using ToOADate(). You can find an example here. You can also add Axis labels programmatically, as described in this help topic.

I hope this information helps.

Regards,
Evgenia
Telerik