Point Chart - Point Center moves with point size

[Kelly Hamilton]

Hello,
I have a data-bound point chart that I'd like to change the point size of some points on. Ideally I'd like to have the point size read from a data column like the bubble chart, but I can't figure out how to do that. I have some code that goes through the Chart Series and updates the point size, but the points shift off their center point.

(I found a similar problem documented here)  http://www.telerik.com/community/forums/aspnet-ajax/chart/how-to-set-a-size-changed-point-to-center-of-the-axes.aspx

My chart is plotting percentages for a variable number of people. I want to use the bubble size to show relative sample sizes in the percentages.

I've tried the Bubble chart, but it is difficult to get rid of ovals, especially when the chart resizes. There are a variable number of items in my chart, so it is not a grid. The bubble chart also has a problem when there is only one item in the chart. I've decided that a bubble chart cannot do what I want and a point chart is closer.

Is there a way to put the point back on its center coordinate? Or a way to use the bubble chart and get bubbles to be a pixel size (like the point chart) rather than use the coordinate system for plotting?

I'm using version 2011.3.11.1219 with the .NET 2.0 framework (Visual Studio 2010). My development machine is a Windows 7 - 64bit computer.

I've attached sample code that reproduces the problem. My real code loads data from a database and contains variable numbers of people.

Form1.cs

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;
using Telerik.Charting;

namespace RadControlsWinFormsApp3
{
 public partial class Form1 : Form
 {
  public Form1()
  {
   InitializeComponent();

   DataTable dtPage = new DataTable();

   dtPage.TableName = "ChartData";
   dtPage.Columns.Add("Name", typeof(String));
   dtPage.Columns.Add("Completion", typeof(Double));
   dtPage.Columns.Add("PointRadius", typeof(Double));

   DataRow row = dtPage.NewRow();
   row[0] = "Person1";
   row[1] = .80d;
   row[2] = 20d;
   dtPage.Rows.Add(row);
   row = dtPage.NewRow();
   row[0] = "Person2";
   row[1] = .65d;
   row[2] = 40d;
   dtPage.Rows.Add(row);

   radChart1.DataSource = dtPage;
   radChart1.DataBind();

   //Force update of point sizes. We can't seem to do it from the bound data.
   foreach (ChartSeries series in radChart1.Series)
   {
    if (series.Type == Telerik.Charting.ChartSeriesType.Point)
    {
     series.Appearance.PointDimentions.AutoSize = false;
     foreach (ChartSeriesItem seriesItem in series.Items)
     {
      DataRow drow = dtPage.Rows[seriesItem.Index];
      double radius = (double)drow["PointRadius"];
      seriesItem.Appearance.PointDimentions.AutoSize = false;
      seriesItem.Appearance.PointDimentions.Height = Telerik.Charting.Styles.Unit.Pixel((float)(radius * 2));
      seriesItem.Appearance.PointDimentions.Width = Telerik.Charting.Styles.Unit.Pixel((float)(radius * 2));
      //(seriesItem.PointAppearance.Position).Auto = false;
      //(seriesItem.PointAppearance.Position).AlignedPosition = AlignedPositions.Center;
     }
    }
   }

  }
 }
}

 

Form1.Designer.cs
namespace RadControlsWinFormsApp3
{
 partial class Form1
 {
  /// <summary>
  /// Required designer variable.
  /// </summary>
  private System.ComponentModel.IContainer components = null;

  /// <summary>
  /// Clean up any resources being used.
  /// </summary>
  /// <param name="disposing">true if managed resources should be disposed; otherwise, false.</param>
  protected override void Dispose(bool disposing)
  {
   if (disposing && (components != null))
   {
    components.Dispose();
   }
   base.Dispose(disposing);
  }

  #region Windows Form Designer generated code

  /// <summary>
  /// Required method for Designer support - do not modify
  /// the contents of this method with the code editor.
  /// </summary>
  private void InitializeComponent()
  {
   Telerik.Charting.ChartAxisItem chartAxisItem1 = new Telerik.Charting.ChartAxisItem();
   Telerik.Charting.ChartAxisItem chartAxisItem2 = new Telerik.Charting.ChartAxisItem();
   Telerik.Charting.ChartAxisItem chartAxisItem3 = new Telerik.Charting.ChartAxisItem();
   Telerik.Charting.ChartAxisItem chartAxisItem4 = new Telerik.Charting.ChartAxisItem();
   Telerik.Charting.ChartAxisItem chartAxisItem5 = new Telerik.Charting.ChartAxisItem();
   Telerik.Charting.ChartAxisItem chartAxisItem6 = new Telerik.Charting.ChartAxisItem();
   Telerik.Charting.ChartAxisItem chartAxisItem7 = new Telerik.Charting.ChartAxisItem();
   Telerik.Charting.ChartSeries chartSeries1 = new Telerik.Charting.ChartSeries();
   this.radChart1 = new Telerik.WinControls.UI.RadChart();
   ((System.ComponentModel.ISupportInitialize)(this.radChart1)).BeginInit();
   this.SuspendLayout();
   //
   // radChart1
   //
   this.radChart1.Anchor = ((System.Windows.Forms.AnchorStyles)((((System.Windows.Forms.AnchorStyles.Top | System.Windows.Forms.AnchorStyles.Bottom)
            | System.Windows.Forms.AnchorStyles.Left)
            | System.Windows.Forms.AnchorStyles.Right)));
   this.radChart1.Location = new System.Drawing.Point(13, 13);
   this.radChart1.Name = "radChart1";
   this.radChart1.PlotArea.XAxis.AutoScale = false;
   this.radChart1.PlotArea.XAxis.AxisLabel.Appearance.RotationAngle = 270F;
   this.radChart1.PlotArea.XAxis.DataLabelsColumn = "Name";
   chartAxisItem1.Value = new decimal(new int[] {
            1,
            0,
            0,
            0});
   chartAxisItem2.Value = new decimal(new int[] {
            2,
            0,
            0,
            0});
   chartAxisItem3.Value = new decimal(new int[] {
            3,
            0,
            0,
            0});
   chartAxisItem4.Value = new decimal(new int[] {
            4,
            0,
            0,
            0});
   chartAxisItem5.Value = new decimal(new int[] {
            5,
            0,
            0,
            0});
   chartAxisItem6.Value = new decimal(new int[] {
            6,
            0,
            0,
            0});
   chartAxisItem7.Value = new decimal(new int[] {
            7,
            0,
            0,
            0});
   this.radChart1.PlotArea.XAxis.Items.AddRange(new Telerik.Charting.ChartAxisItem[] {
            chartAxisItem1,
            chartAxisItem2,
            chartAxisItem3,
            chartAxisItem4,
            chartAxisItem5,
            chartAxisItem6,
            chartAxisItem7});
   this.radChart1.PlotArea.XAxis.MinValue = 1D;
   this.radChart1.PlotArea.YAxis.Appearance.CustomFormat = "## %";
   this.radChart1.PlotArea.YAxis.AxisLabel.Appearance.RotationAngle = 0F;
   this.radChart1.PlotArea.YAxis.MaxValue = 80D;
   this.radChart1.PlotArea.YAxis.Step = 10D;
   this.radChart1.PlotArea.YAxis2.AxisLabel.Appearance.RotationAngle = 0F;
   chartSeries1.DataYColumn = "Completion";
   chartSeries1.DefaultLabelValue = "#Y{p1}";
   chartSeries1.Name = "Series 1";
   chartSeries1.Type = Telerik.Charting.ChartSeriesType.Point;
   this.radChart1.Series.AddRange(new Telerik.Charting.ChartSeries[] {
            chartSeries1});
   this.radChart1.SeriesOrientation = Telerik.Charting.ChartSeriesOrientation.Horizontal;
   this.radChart1.Size = new System.Drawing.Size(473, 317);
   this.radChart1.TabIndex = 0;
   //
   // Form1
   //
   this.AutoScaleDimensions = new System.Drawing.SizeF(6F, 13F);
   this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
   this.ClientSize = new System.Drawing.Size(505, 362);
   this.Controls.Add(this.radChart1);
   this.Name = "Form1";
   this.Text = "Form1";
   ((System.ComponentModel.ISupportInitialize)(this.radChart1)).EndInit();
   this.ResumeLayout(false);

  }

  #endregion

  private Telerik.WinControls.UI.RadChart radChart1;
 }
}

 

Thanks

[Peshito]

Hi Kelly,

There is a workaround that is easy -- you can use Line series instead of Point one. The line itself will be transparent, but the pointmarks will be shown. You can then wire to the ItemDataBound event and set to each series item your desired size. Please, find attached an example using the sample code you have provided demonstrating this approach.

All the best,
Peshito
the Telerik team

[Kelly Hamilton]

Hi Peshito,Thank you very much for your reply, it does solve the point size problem, but I have a couple questions about colors. In my real implementation, I am using a user selectable chart skin for the chart, which I left out for simplicity. The skin can either be a built-in Telerik skin, or a user designed custom skin. Hard coding a color won't always look good in all skins. I can't seem to copy the line color over to the point color before setting the line to transparent. Is there a way to get the series color(s) and apply it to the point color using this work around? Also I need to have the legend color match the point color. In this sample, the legend color is transparent like the line color.

you can set the skin in the sample by adding this line after the DataBind() line:

 radChart1.Skin = "DeepGreen";

Thanks,
Kelly.

[Peshito]

Hello Kelly,

I am glad that the provided solution did help. Regarding your other question there isn't a way to get the palette's color at runtime using the RadChart for WinForms.  As a workaround you may set the pointmarks a color from the palette you use and depending on that palette, you could set different color. In case you are interested in this solution we can provide you the colors you need or you could get them by yourself.

Regards,
Peshito
the Telerik team

[Kelly Hamilton]

 

Thanks Peshito,

I appreciate your help on this, please attach a list of colors for all of the skins. I think some are gradients so I'll need both colors. This will work for now, but it would be ideal if the fix for the problem with the point chart could be considered for an upcoming service pack. It would provide a more robust solution that is less prone to breakage.

Thanks,
Kelly.

[Peshito]

Hello Kelly,

I will forward your feedback to our developers for further consideration. Regarding the list of colors, could you be more specific about which skins would you need, so I can prepare and provide you with the list of colors.

All the best,
Peshito
the Telerik team

[Kelly Hamilton]

Hi Peshito,

I hope this doesn't sound crazy, but I've build a part of the application where users can customize the look by adding charts. Each chart can be customized for content and look. In my chart look customization wizard I allow users to pick a skin that is either one of Telerik's skins or a user devined XML skin created with a home-made skin designer. The Telerik skins I allow are:

"Black","Blue", "BlueStripes","Brick","Classic","Colorful","DeepBlue","DeepGray",

"DeepGreen","DeepRed","Default","Default2006","Desert","ExcelClassic","Gradient",

"Gray","GrayStripes","GreenStripes","Green","Hay","Inox","LightBlue","LightGreen",

"LightBrown","Mac","Marble","Metal","Office2007","Outlook","Pastel","Sunset",

"Stripes","Sunset","Telerik","UltraGreen","Vista","Web","WebBlue","Web20","Wood"

The only one I can't seem to use is "BabyBlue" because it fails to draw if the chart is sized too small.

I haven't implemented the work around yet, so I hope it will also work with the user defined skins. I make them by setting a chart's look and then using this code to save the skin XML:

using (Stream fs = saveFileDialog1.OpenFile())
{
    ChartSkin myCustomSkin = new ChartSkin();
    myCustomSkin.CreateFromChart(radChart1.Chart, textBoxSkinName.Text);
    byte[] bytes = System.Text.Encoding.UTF8.GetBytes(myCustomSkin.XmlSource.OuterXml);
    fs.Write(bytes, 0, bytes.Length);
}

Thanks,
Kelly.

[Peshito]

Hello Kelly,

As noted in our previous reply unfortunately there is no public API that exposes the palette colors used by RadChart. There are two possible approaches that you can use if you need to extract the colors for all skins:

• You can find them in the resx resource file in the RadControls for Winforms source code under the following location: Charting\RadChart\Charting\Styles\Skins\ChartSkinsCollection.resx
• You can use decompilation tool like JustDecompile to get them from the chart binary itself. The path you need is Telerik.WinControls.RadChart >> Resources >>Telerik.Charting.Styles.Skins.ChartSkinsCollection.

Hope this helps.

Kind regards,
Peshito
the Telerik team