SPC Chart

[Nuno]

Hi Telerik Team,

Can we get SPC Charts with Telerik controls?

Please see the attached screenshot...

Thanks,
Nuno

[Evgenia]

Hi Nuno,

These charts can be achieved by our Line Chart Series  with Dates on XAxis and Custom GridLines.

All the best,
Evgenia
the Telerik team

[Nuno]

Hi Evgenia,

Please see the attached image again and see the annotations I created using colored circles.

My questions are:

Green => Can you achieve vertical grid lines?

Orange => How can we do that? 3 labels in the same chart area...

Red => How is it possible to disconnect (not show the connector line) between A and B? (Same as handling empty values but with values in this case...)

Thanks for your help.

Regards,
Nuno

[Evgenia]

Hello Nuno,

To your questions:
Green - Yes, you can have vertical GridLines. Set the XIntercept property for the GridLine which will define at which point the GridLine will Intercept the XAxis.

Orange - This is not supported out-of-the-box. However I can suggest you two approaches:
 - You can put 3 TextBlocks over the Chart Area to achive this but it's up tp you to set their position on it.
 - You can use the fact that Annotations like GridLines and MarkedZones can have Labels. This means that you can create a Transaprent GridLine for example and set the Label for it in the upper-most border of the Plot Area. However you won't be able to make the Labels appear outside of the PlotArea. For more information on this approah - take a look at our help article.

Red - To achieve this you'll need two Line Series - one for A and one for B.

Greetings,
Evgenia
the Telerik team

[Nuno]

Hi Evgenia,

Thanks for clarifying this for me. It really looks like it's possible to achieve this type of chart using the RadChart control.

Regards,
Nuno

[นิรวัฒน์]

    Private Sub AddLineSPC(ByRef Chart As Telerik.WinControls.UI.RadChartView, ByVal Name As String, ByVal TargetValues As Decimal, ByVal ShowPoint As Boolean, ByVal LineColor As System.Drawing.Color, ByVal BorderStyle As System.Drawing.Drawing2D.DashStyle)
        Try
            Dim LineSeries As New Telerik.WinControls.UI.LineSeries

            LineSeries.Name = Name
            LineSeries.ShowLabels = False
            LineSeries.VerticalAxis = _LinearAxis
            LineSeries.HorizontalAxis = _CateAxis
            LineSeries.BorderColor = LineColor
            LineSeries.BorderWidth = 0.01!
            LineSeries.BorderDashStyle = BorderStyle
            LineSeries.LegendTitle = Name & If(TargetValues > 0, " = " & Format(TargetValues, "#,##0.00"), "")

            If ShowPoint = True Then
                LineSeries.PointSize = New Size(5, 5)
                LineSeries.BackColor = Color.Green
                LineSeries.GradientStyle = Telerik.WinControls.GradientStyles.Solid
            End If

            For ir = RangStart To RangEnd

                Dim point As Telerik.Charting.CategoricalDataPoint = New Telerik.Charting.CategoricalDataPoint()

                point.Category = ir.ToString

                If TargetValues > 0 Then
                    point.Value = TargetValues
                Else
                    Select Case ir
                        Case 2, 3
                            point.Value = 55
                        Case 4
                            point.Value = 88
                        Case 5, 6
                            point.Value = 65
                        Case 7
                            point.Value = 18
                        Case 8
                            point.Value = 27
                        Case 9
                            point.Value = 33
                        Case Else
                            point.Value = 54
                    End Select
                End If

                LineSeries.DataPoints.Add(point)

            Next

            Chart.Series.AddRange(New Telerik.WinControls.UI.ChartSeries() {LineSeries})

        Catch ex As Exception
            Throw ex
        End Try
    End Sub

    Private Sub AddPoint(ByRef Chart As Telerik.WinControls.UI.RadChartView, ByVal Name As String, ByVal LineColor As System.Drawing.Color, ByVal BorderStyle As System.Drawing.Drawing2D.DashStyle)
        Try
            Dim PointSeries As New Telerik.WinControls.UI.LineSeries

            PointSeries.Name = Name
            PointSeries.ShowLabels = False
            PointSeries.VerticalAxis = _LinearAxis
            PointSeries.HorizontalAxis = _CateAxis
            PointSeries.BorderWidth = 0.0!
            PointSeries.BorderColor = LineColor
            PointSeries.PointSize = New Size(11, 11)
            PointSeries.BackColor = LineColor
            PointSeries.GradientStyle = Telerik.WinControls.GradientStyles.Solid

            For ir = RangStart To RangEnd

                Dim point As Telerik.Charting.CategoricalDataPoint = New Telerik.Charting.CategoricalDataPoint()

                point.Category = ir.ToString

                Select Case ir
                    Case 4
                        point.Value = 88
                    Case 7
                        point.Value = 18
                    Case 8
                        point.Value = 27
                    Case Else
                        point.Value = Nothing
                End Select

                PointSeries.DataPoints.Add(point)

            Next

            Chart.Series.AddRange(New Telerik.WinControls.UI.ChartSeries() {PointSeries})

        Catch ex As Exception
            Throw ex
        End Try
    End Sub