LineSeries Point Shape

[Manoj]

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

[Dimitar]

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

[Manoj]

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

[Dimitar]

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