LineSeries Point Shape

4 posts, 0 answers
  1. Manoj
    Manoj avatar
    3 posts
    Member since:
    Jun 2015

    Posted 22 Jun 2015 Link to this post

    I have multiple LineSeries that are tied to a common DateTimeContinuousAxes for X and multiple LinearAxes for Y.

    So each LineSeries is tied to the common DateTimeContinuousAxis .

    Each LineSeries may have its own dedicated Linear Axis OR may share a linear axis with other series.

    Its the series that share both x and y axes that are confusing to the user.

    To make this visually clear to the user, I have set the color of these line series and the corresponding shared Y axis color to match, so that its obvious that series A, B and C share the same Y axis (say "VOLTS").

     

    But now I have multiple series with the same color. So I need to have the points for each individual series have a different shape so you can easily discriminate between the series.

    For example, Series A, B and C all share a common Y Axis, and all three are green in color, but Series A points are a Green Triangle, Series B is a Green Square and Series C is a Green Circle.

     

    Seems pretty straight forward...right?

     I know I can do this on the ScatterSeries, but I see no way to set the Point Shape for a Point in LineSeries. Some thing similar to the example below...

     

          private void ApplyShapeToPoints(ElementShape shape) 
            { 
                ScatterSeries series = this.radDropDownListSeries.SelectedValue as ScatterSeries; 
     
                foreach (ScatterPointElement point in series.Children) 
                { 
                    point.Shape = shape; 
                } 
            } 

     

    But I cant use a scatterseries because my data is time based....

     

    Any ideas?

     

    MG

  2. Dimitar
    Admin
    Dimitar avatar
    1415 posts

    Posted 23 Jun 2015 Link to this post

    Hello MG,

    Thank you for writing.

    You can set the shapes to the line series with the following code:
    LineSeries lineSeries = new LineSeries();
    lineSeries.Shape = new RoundRectShape(0);
    lineSeries.PointSize = new SizeF(20, 20);
    lineSeries.DataPoints.Add(new CategoricalDataPoint(20, "Jan"));
    lineSeries.DataPoints.Add(new CategoricalDataPoint(22, "Apr"));
    lineSeries.DataPoints.Add(new CategoricalDataPoint(12, "Jul"));
    lineSeries.DataPoints.Add(new CategoricalDataPoint(19, "Oct"));
    this.radChartView1.Series.Add(lineSeries);
     
    LineSeries lineSeries2 = new LineSeries();
     
    lineSeries2.Shape = new OfficeShape();
    lineSeries2.PointSize = new SizeF(20, 20);
    lineSeries2.DataPoints.Add(new CategoricalDataPoint(18, "Jan"));
    lineSeries2.DataPoints.Add(new CategoricalDataPoint(15, "Apr"));
    lineSeries2.DataPoints.Add(new CategoricalDataPoint(17, "Jul"));
    lineSeries2.DataPoints.Add(new CategoricalDataPoint(22, "Oct"));
    this.radChartView1.Series.Add(lineSeries2);

    Please let me know if there is something else I can help you with. 
     
    Regards,
    Dimitar
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for WinForms is Visual Studio 2017 Ready
  4. Manoj
    Manoj avatar
    3 posts
    Member since:
    Jun 2015

    Posted 23 Jun 2015 in reply to Dimitar Link to this post

    Thanks Dimitar. Just throwing out some results here..

    EllipseShape renders, but as a circle. How do I customize its shape? Am I missing something really obvious about these canned shapes? 

    RoudRectShape renders fine

    OfficeShape renders fine

    TabOffice12Shape renders fine

    TabIEShape renders fine

    TabVsShape renders fine 

    DiamondShape. StarShape and HeartShape don't render and are not visible. Again, something trivial I have overlooked on how they are initialized?

     Manoj

  5. Dimitar
    Admin
    Dimitar avatar
    1415 posts

    Posted 24 Jun 2015 Link to this post

    Hello Manoj,

    Thank you for writing back.

    For the ellipse you should just set the point size to a rectangle not a square:
    lineSeries.Shape = new EllipseShape();
    lineSeries.PointSize = new SizeF(20, 50);

    We have a known issue with our other shapes. You can track the item for status changes and add your vote for it here.

    To workaround this you can use custom shape classes:
    class MyDiamondShape : ElementShape
    {
        public override GraphicsPath CreatePath(Rectangle bounds)
        {
            GraphicsPath path = new GraphicsPath();
             
            path.AddPolygon(new PointF[]
            {
                new PointF(bounds.X + 0.5f * bounds.Width, bounds.Top),
                new PointF(bounds.Right, bounds.Y + 0.5f * bounds.Height),
                new PointF(bounds.X + 0.5f * bounds.Width, bounds.Bottom),
                new PointF(bounds.Left, bounds.Y + 0.5f * bounds.Height)
            });
         
            return path;
        }
    }
     
    class MyStarShape : ElementShape
    {
        private int arms;
        private float innerRadiusRatio;
         
        public MyStarShape()
        {
            this.arms = 8;
            this.innerRadiusRatio = 0.2f;
        }
         
        /// <summary>
        /// Creates Star like shape. Overrides CreatePath method in the base class
        /// ElementShape.
        /// </summary>
        public override GraphicsPath CreatePath(Rectangle bounds)
        {
            GraphicsPath path = new GraphicsPath();
             
            double angle = Math.PI / arms;
            double offset = Math.PI / 2d;
            PointF center = new PointF(bounds.X + bounds.Width / 2f, bounds.Y + bounds.Height / 2f);
            PointF[] points = new PointF[arms * 2];
             
            for (int i = 0; i < 2 * arms; i++)
            {
                float r = (i & 1) == 0 ? bounds.Width / 2f : bounds.Width / 2f * innerRadiusRatio;
                 
                float currX = center.X + (float)Math.Cos(i * angle - offset) * r;
                float currY = center.Y + (float)Math.Sin(i * angle - offset) * r;
             
                points[i] = new PointF(currX, currY);
            }
             
            path.AddPolygon(points);
            return path;
        }
    }
     
    class MyHeartShape : ElementShape
    {
        public override GraphicsPath CreatePath(Rectangle bounds)
        {
            GraphicsPath path = new GraphicsPath();
             
            path.AddArc(new Rectangle(bounds.X, bounds.Y, bounds.Width / 2, bounds.Height / 2), 150, 210);
            path.AddArc(new Rectangle(bounds.X + bounds.Width / 2, bounds.Y, bounds.Width / 2, bounds.Height / 2), 180, 210);
            path.AddLine(path.GetLastPoint(), new Point(bounds.X + bounds.Width / 2, bounds.Bottom));
            path.CloseFigure();
         
            return path;
        }
         
    }

    Please let me know if there is something else I can help you with. 
     
    Regards,
    Dimitar
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top