Labels for bar chart not showing.

Thread is closed for posting
6 posts, 0 answers
  1. Jonathan
    Jonathan avatar
    15 posts
    Member since:
    Sep 2007

    Posted 16 Feb 2011 Link to this post

    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;

  2. Evgenia
    Admin
    Evgenia avatar
    1407 posts

    Posted 21 Feb 2011 Link to this post

    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
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Erik
    Erik avatar
    8 posts
    Member since:
    Jan 2012

    Posted 08 Feb 2012 Link to this post

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

    Thanks!
  5. Evgenia
    Admin
    Evgenia avatar
    1407 posts

    Posted 10 Feb 2012 Link to this post

    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
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  6. Vasssek
    Vasssek avatar
    143 posts
    Member since:
    Aug 2010

    Posted 20 Aug 2013 Link to this post

    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
  7. Evgenia
    Admin
    Evgenia avatar
    1407 posts

    Posted 22 Aug 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017