How to plot different series

[Travis]

Hello,

We've got a chart that needs to display a couple different series types. All of values (thresholds, measurements) in a time domain.

First is a series of thresholds. Probably the closest series type that will work for us is a BarSeries. These should go on the chart first and chart in the background (or possibly bring them to front, i.e. if corresponding conditions are being edited, type thing).

Second is a series of measurements. We're currently doing this using LineSeries. The only thing I can say about this is, how are we able to treat X-axis values as values instead of categories? For instance, would be great to show the X-axis time domain as seconds (or divisions of milliseconds) and so on.

Thank you.

Regards,

Michael Powell

[Travis]

Is this possible? Without drilling down at all: would be great if we can chart bar series and line series in the same chart. The axes would be the same, just we need a slightly different visual representation from the chart. Thank you...

[Ivan Petrov]

Hello Michael,

Thank you for writing.

You can add two series to the same chart as long as they work with the same axes. Or you can have two series sharing a common axis and having their own secondary axis. The third option is to have two series without any common axes. For the first option just add the BarSeries and the LineSeries to the Series collection of RadChartView. For the latter you can see the following help article - Multiple axes support.

I hope this will help. Do not hesitate to write back with further questions.

Greetings,
Ivan Petrov
the Telerik team

[Travis]

Okay, so I'd like to clarify, I can add several ScatterLineSeries, followed by several BarSeries?

The data values (Y axis) display beautifully in the time domain (X axis) as one might expect.

*EDIT* Actually, the type of series I would like to use is more like to display is more like a candlestick I think, except rotated 90 degrees from the online docs.

Actually, now that I think about it, with control over painting characteristics, I believe we could very likely go with a clever reuse of another (limited) ScatterLineSeries, say of two points, marking begin/end in the time domain, and/or changes in data value thresholds. That could be our threshold series I think...

*EDIT* Edit to the edit. The thought here is only preferred if somehow we can paint the threshold-series' to stand out apart from the data series'.

[Travis]

So... to recap, I have the ScatterLineSeries for purposes of non-categorical, numeric X and Y axes. Works great.

Now I want to superimpose (or subimpose if you will) a thresholds series. Would like for that to be a BarSeries if possible. Also, the Candlestick series, except rotated 90 degrees would be ideal if we can manage it.

Failing either of those, I would like to put another ScatterLineSeries in the chart. But if we do, I want to be able to control the colors, line weights, etc, of the thing being charted.

Possible in the Telerik framework?

Thank you...

[Ivan Petrov]

Hello Michael,

Thank you for writing back.

There is a mechanism allowing custom drawing in the chart area called custom rendering. You can insert your custom draw part to be drawn with the rest of the chart. To be able to adequately and accurately help you I would need to get a clean idea of what you are trying to achieve. Although your description is quite full "an image says a thousand words" as they say. Therefore I would kindly ask you to send me an image or a sketch of what you want to ultimately achieve so I can help you with precise advice and examples.

Looking forward to your reply.

Regards,
Ivan Petrov
Telerik

[Travis]

Something like the attached. We start from some chart series with a ScatterLine type. Then we would like to represent thresholds supporting the charts.

Both axes must be numeric for best possible representation in the X and Y domains. It's something like a Candlestick, except to have them rotated 90 degrees if you will (see images).

Doesn't need to be that complex, or reinvent any wheels if possible. Another ScatterLine series would even work if we can control the palette and line weight, type thing.

Thank you.

[Ivan Petrov]

Hello Michael,

Thank you for your reply.

Your suggestion is a good way to approach this scenario. You can add scatter line series for your threshold graphics. You can control the width of the scatter line through the BorderWidth property of the series, the color of the line through the BorderColor and the size of the data points that are plotted through the PointSize property. Here is an example:

ScatterLineSeries series = new ScatterLineSeries();
series.BorderWidth = 10;
series.BorderColor = Color.Green;
series.PointSize = SizeF.Empty;

If you have a legend you can remove the threshold series through the IsVisibleInLegend property. Note that you have to use the property after you add the series to the chart Series collection:

this.radChartView1.Series.Add(series);

series.IsVisibleInLegend = false;

I hope this will help. Should you have further questions, I would be glad to help.

Regards,
Ivan Petrov
Telerik

[jamsheer]

Hello Telerik
        Here I have a chart view for showing the model of chart ,That means where I have dropdownlists with chart type names and Chart view for showing the selected chart type of Dropdownlist. Its works successfully.
When I select Scatter Area Chart at first time then it showing successfully ,But Getting Error like that is "CartesianSeries can be attached to CartesianView" if I selected Scatter Area Chart Not at first Time.

     Where  I am using RadchartView.
       I attached the pic of Exception.
How could I Overcome This exception.
Thanks 
Jamsheer

[jamsheer]

Hello Telerik
        Here I have a chart view for showing the model of chart ,That means where I have dropdownlists with chart type names and Chart view for showing the selected chart type of Dropdownlist. Its works successfully.
When I select Scatter Area Chart at first time then it showing successfully ,But Getting Error like that is "CartesianSeries can be attached to CartesianView" if I selected Scatter Area Chart Not at first Time.
       I attached the pic of Exception.
How could I Overcome This exception.
Thanks 
Jamsheer

[Hristo]

Hello Jamsheer,

Thank you for writing.

The Polar and Cartesian area types are incompatible and you need to explicitly set the AreaType property of the chart whenever you are switching between polar and cartesian series. Please check my code snippet below: 

public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();
    }

    private void radButton1_Click(object sender, EventArgs e)
    {
        this.radChartView1.Series.Clear();
        this.radChartView1.AreaType = ChartAreaType.Cartesian;
        ScatterAreaSeries scatterSeries = new ScatterAreaSeries();
        scatterSeries.DataPoints.Add(new ScatterDataPoint(15, 19));
        scatterSeries.DataPoints.Add(new ScatterDataPoint(18, 10));
        scatterSeries.DataPoints.Add(new ScatterDataPoint(13, 15));
        scatterSeries.DataPoints.Add(new ScatterDataPoint(10, 8));
        scatterSeries.DataPoints.Add(new ScatterDataPoint(5, 2));
        this.radChartView1.Series.Add(scatterSeries);
    }

    private void radButton2_Click(object sender, EventArgs e)
    {
        this.radChartView1.Series.Clear();
        this.radChartView1.AreaType = ChartAreaType.Polar;
        RadarPointSeries radarPointSeries = new RadarPointSeries();
        radarPointSeries.DataPoints.Add(new CategoricalDataPoint(3.8d, "Oranges"));
        radarPointSeries.DataPoints.Add(new CategoricalDataPoint(4d, "Bananas"));
        radarPointSeries.DataPoints.Add(new CategoricalDataPoint(1.5d, "Apples"));
        this.radChartView1.Series.Add(radarPointSeries);
    }
}

I hope this helps. Should you have further questions please do not hesitate to write back.

Regards,
Hristo
Progress Telerik

[jamsheer]

Hello Hristo
        It works successfully .

      How can I adjust the size of chart view. 
Thanks 
Jamsheer

[Hristo]

Hello Jamsheer,

I am glad that it is working well on your end. 

Regarding your question, you can increase the control`s size. Please also note that we try to keep our threads related to a single topic. In case you have further questions not directly related to the initial one, you can open a ticket or create a forum thread. Thank you for understanding.

I hope this helps.

Regards,
Hristo
Progress Telerik

[jamsheer]

Hello Hristo
        Sorry ,

     I mean I want to change the size of an area of my Radchartview ,where the Radchartview size should be stable ,I mean I don't want to change the size of Radchartview ,change the area size only.

Thanks 
Jamsheer

[Hristo]

Hi Jamsheer,

You can apply a margin on the chart element object. This way the size of the view holding the series will be changed: 

this.RadChartView1.ChartElement.Margin = new Padding(25);

I hope this helps. Please let me know if you have other questions.

Regards,
Hristo
Progress Telerik

[Sadhana]

Hello Telerik Team,

I have query regarding Polar chart , I want to change color of Polar Line Series for some data points whose values are within some range , As like annotation is showing a line or band of color for that region, instead of that annotation line or band , I want to change color of my polar line series as it is crossing that region.

Waiting for your reply.

 

[Hristo]

Hello Sadhana,

Thank you for writing.

You can create a custom renderer and use it with your PolarLineSeries creating special draw parts with custom painting logic. The actual point elements are rendered in the virtual DrawPoints method: 

public partial class RadForm1 : Telerik.WinControls.UI.RadForm
{
    public RadForm1()
    {
        InitializeComponent();

        this.radChartView1.CreateRenderer += RadChartView1_CreateRenderer;

        this.radChartView1.AreaType = ChartAreaType.Polar;
        PolarLineSeries polarLineSeries = new PolarLineSeries();
        polarLineSeries.PointSize = new SizeF(16, 16);

        PolarDataPoint point = new PolarDataPoint();
        point.Value = 35;
        point.Angle = 50;
        polarLineSeries.DataPoints.Add(point);

        point = new PolarDataPoint();
        point.Value = 40;
        point.Angle = 200;
        polarLineSeries.DataPoints.Add(point);

        point = new PolarDataPoint();
        point.Value = 55;
        point.Angle = 320;
        polarLineSeries.DataPoints.Add(point);
        this.radChartView1.Series.Add(polarLineSeries);
    }

    private void RadChartView1_CreateRenderer(object sender, ChartViewCreateRendererEventArgs e)
    {
       e.Renderer = new CustomPolarRenderer(e.Area as PolarArea);
    }
}

public class CustomPolarRenderer : PolarRenderer
{
    public CustomPolarRenderer(PolarArea area)
        : base(area)
    { }

    protected override void Initialize()
    {
        base.Initialize();
        for (int i = 0; i < this.DrawParts.Count; i++)
        {
            PolarLineSeriesDrawPart polarPart = this.DrawParts[i] as PolarLineSeriesDrawPart;
            if (polarPart != null)
            {
                this.DrawParts[i] = new CustomPolarLineSeriesDrawPart((PolarLineSeries)polarPart.Element, this);
            }
        }
    }
}
public class CustomPolarLineSeriesDrawPart : PolarLineSeriesDrawPart
{
    public CustomPolarLineSeriesDrawPart(PolarLineSeries series, IChartRenderer renderer)
        : base(series, renderer)
    {
    }

    protected override void DrawPoints()
    {
        PointF[] points = this.GetPointsPositionsArray();

        if (points == null)
        {
            return;
        }

        RadGdiGraphics radGraphics = new RadGdiGraphics(this.Renderer.Surface as Graphics);

        for (int i = 0; i < this.Element.Children.Count; i++)
        {
            DataPointElement childElement = this.Element.Children[i] as DataPointElement;

            if (childElement == null || !childElement.IsVisible || childElement.PointSize.Width < 1f || childElement.PointSize.Height < 1f)
            {
                continue;
            }

            SizeF pointSize = childElement.PointSize;
            PointF pointLocation = points[i];

            RectangleF ptRect = new RectangleF(pointLocation, pointSize);
            ptRect.Offset(pointSize.Width / -2f, pointSize.Height / -2f);

            if (childElement.BackgroundShape != null)
            {
                childElement.BackgroundShape.Paint((Graphics)radGraphics.UnderlayGraphics, ptRect);
            }

            GraphicsPath pointPath = null;

            if (childElement.Shape != null)
            {
                pointPath = childElement.Shape.CreatePath(ptRect);
            }
            else
            {
                pointPath = new GraphicsPath();
                pointPath.AddEllipse(ptRect);
            }

            if (pointPath != null)
            {
                PolarDataPoint dataPoint =  childElement.DataPoint as PolarDataPoint;
                if (dataPoint != null && dataPoint.Value < 50)
                {
                    childElement.BackColor = Color.Red;
                }

                FillPrimitiveImpl pointFill = new FillPrimitiveImpl(childElement, null);
                pointFill.PaintFill(radGraphics, pointPath, ptRect);

                BorderPrimitiveImpl pointBorder = new BorderPrimitiveImpl(childElement, null);
                pointBorder.PaintBorder(radGraphics, null, pointPath, ptRect);

                if (childElement.Image != null)
                {
                    ImagePrimitiveImpl pointImage = new ImagePrimitiveImpl(childElement);
                    pointImage.PaintImage(radGraphics, childElement.Image, ptRect, childElement.ImageLayout, childElement.ImageAlignment, childElement.ImageOpacity, false);
                }

                pointPath.Dispose();
            }
        }
    }
}

I am also attaching a screenshot showing the result on my end. In case you will need to change the rendering of the connection lines you will need to override and customize the DrawLines and GetLinePath  methods.

I hope this helps. Should you have further questions please do not hesitate to write back.

Regards,
Hristo
Progress Telerik