Drop Line in Polar Chart

[David]

I am trying to draw a phasor diagram similar to http://www.texample.net/media/tikz/examples/PDF/phasor-diagram.pdf. Basically a polar chart with vectors radiating from the origin based on the magnitude and phase angle between 2 or more signals. A PolarPointSeries is really close but I basically need a drop line to draw the line from the point back to the origin. Changing the symbol at the point to an arrow with the correct orientation would be a nice touch as well.

 

[Martin Ivanov]

Hello David,

To achieve your requirement you can use a PolarLineSeries with a PointTemplate instead of PolarPointSeries. In the PointTemplate you can define a Path element that draws the arrow head and rotate transform it to match the angle.

<telerik:PolarLineSeries.PointTemplate>
    <DataTemplate>
        <ContentPresenter Width="20" Height="20">
            <ContentPresenter.Content>
                <Path Width="10" Height="10" Fill="Red" HorizontalAlignment="Center" VerticalAlignment="Center">
                    <!-- Define geometry here -->
                    <Path.LayoutTransform>
                        <!-- Here you might need to calculate different angle depending on your geometry -->
                        <RotateTransform Angle="{Binding Angle}"/>
                    </Rectangle.LayoutTransform>
                </Rectangle>
            </ContentPresenter.Content>
        </ContentPresenter>
    </DataTemplate>
</telerik:PolarLineSeries.PointTemplate>

Note that the object passed as a data context in the template is a PolarDataPoint object.

You can also take a look at the polygon annotation feature request in the feedback portal and vote for it if you think this would be helpful for scenarios similar to yours.

Regards,
Martin
Telerik by Progress

[David]

Just a couple questions. I assume each PolarLineSeries will have two points. The origin and the outlying endpoint based on the magnitude and phase of the vector. This would draw N vectors originating at the origin and ending at the desired angle and magnitude. This makes sense, just checking.

The first issue is that the point template gets drawn for each point so I get a bunch of geometries at the origin that I don't want. The best way I can think of to get rid of the geometries at the origin would be to use a PointTemplateSelector and return null for the first point of each vector. Is there a better approach?

How would I bind the fill color for the PointTemplate so that it matches the color of the line? I assume binding it relative to the Stroke property of the line series?

Thanks

Dave

 

[David]

A few more follow up questions. I attached an image of my current progress. My current questions are:

1) I still have not been able to color the endpoint the same as the line series. I currently bind the fill to black but I would really prefer that the end point be the same color as the series. I tried binding it to the line series stroke but that always seems to be null.

2) Each line series has two data points. [0, 0] and [phase,amplitude]. The points show up at the right place but the lines tend to extend beyond their value (and hence beyond the point and/or origin). This can be seen at the origin of the enclosed image although just as often the line extends past the opposite end point.

3) Do polar charts support multiple value axes like line charts? In this plot three of the values are current the other three are volts. These values frequently have different scales so I use two axes (one for volts and one for amps) to display them on the same chart.

 

Thanks again

Dave

 

[Martin Ivanov]

Hello David,

I will try to address your questions in the order they were asked.

So, let me start with the drawing of the line in the PolarLineSeries, or any other line series. Basically, in order to draw a line you need at least two points. In other words, yes, it makes sense to have origin and end points.

To draw the arrow only for the end point, you can use the PointTemplateSelector property. This approach is okay. Alternatively, you can define a Visibility property in the view model of the data point and bind it to the Visibility of the UI element defined in the PointTemplate. 

To bind the color of the element in the PointTemplate to the color of the series, you should be able to use the approach with RelativeSource binding to the Stroke property. But keep in mind that the Stroke property will have a different value than Null only if you set it explicitly. Otherwise, the property is Null and the chart internally set the color of its series. If you are using a palette you can use its GetEntry() method to get the corresponding color and assign it to the element in the PointTemplate. In this case you can use an IValueConverter in the template's binding and in the Convert() method call the GetEntry() method.

About the extended line, this is caused because the series uses native WPF Path element with a geometry that is closed by default. In this case the last segment of the geometry is trying to make a turn and connect with the first one. And the line looks extended. To resolve this you can set the PolarLineSeries IsClosed property to False.

The polar chart doesn't support multiple axes. To achieve your requirement you can define two charts one over the other. This will overlap the PolarAxis of both charts. Currently, you can't change the position of the axis, so to resolve this you can hide the original axis of the series and create a custom one using annotations. You can see a possible approach demonstrated in the attached project. Keep in mind this is merely a suggestion and I can't guarantee that will work in all expected scenarios.

Regards,
Martin
Telerik by Progress

[Preeti]

Hi David,

I am also stuck in similar problem.I want to draw a phasor diagram with angle and radius using Kendo Polar chart but no line is created only points are shown.How to connect points with centre as i am passing model in kendo

please help

@model IEnumerable<LandisGyr.CommandCenter.ViewModels.PhaseVoltageReportViewModel>
@(Html.Kendo().Chart(Model)
    .Name("chart")
    .Title("Phase Diagram")
     .Legend(legend => legend.Orientation(ChartLegendOrientation.Vertical)
        .Position(ChartLegendPosition.Right)
    ).ChartArea(area => area.Width(450))
    .ChartArea(area => area.Height(400))
    .SeriesDefaults(seriesDefaults => seriesDefaults
       .PolarLine()
            .Style(ChartPolarLineStyle.Smooth)

        )
        .Series(series =>
        {

            series.PolarLine(model=>model.VoltageAngleA, model=>model.VoltageAngleB
            ).Name("vA").Color("Blue"); ;

            series.PolarLine(model => model.VoltageAngleC, model => model.VoltageAngleB).Name("vB").Color("Red"); ;

            series.PolarLine(new float[][] {
     new float[] {0, 0}, new float[] {129.7f, 1}
            }).Name("vC").Color("Green"); ;

            series.PolarLine(new int[][] {
       new int[] {0, 0}, new int[] {-150, 1}
            }).DashType(ChartDashType.Dash).Name("iA").Color("LightSeaGreen"); ;

            series.PolarLine(new int[][] {
        new int[] {0, 0}, new int[] {180, 1}
            }).DashType(ChartDashType.Dash).Name("iB").Color("SaddleBrown"); ;

            series.PolarLine(new int[][] {
        new int[] {0, 0}, new int[] {220, 1}
            }).DashType(ChartDashType.Dash).Name("iC").Color("Purple"); ;
        })
        .XAxis(axis => axis.Polar().MajorUnit(30))
        .YAxis(axis => axis.Polar().Visible(false))
)

[Dinko | Tech Support Engineer]

Hello Preeti,

You have posted your question in RadChartView for WPF component forum. I would suggest you submit your question in the Kendo forum. This way the responsible team can investigate your behavior would be able to assist you.

Regards,
Dinko
Progress Telerik