Chart for .NET / User's Guide / Styling / Custom Style Sheets

Custom Style Sheets

You can use style sheets for a variety of purposes. One of them is to apply dynamic coloring depending on the data in the chart. In this topic we’ll show how to create a custom style sheet that will dynamically change the fill style of gauge indicators if it they enter a specified range of values.

The first task is to create an applicator that will change the fill style of a gauge indicator if it falls in a specified range. The following code shows how to do this:

C#
Copy Code
public class NRangeValueApplicator : NRuleApplicator
{
public NRangeValueApplicator(double startVal, double endVal, Color inRange, Color outRange)
{
StartValue = startVal;
EndValue = endVal;
InRangeColor = inRange;
OutRangeColor = outRange;
}
public override void Apply(NChartElement element)
{
 NNeedleValueIndicator indicator = element as NNeedleValueIndicator;
 if (indicator == null)
  return;
 if (indicator.Value > StartValue && indicator.Value < EndValue)
 {
  // indicator is in range
  indicator.Shape.FillStyle = new NColorFillStyle(InRangeColor);
 }
 else
 {
  indicator.Shape.FillStyle = new NColorFillStyle(OutRangeColor);
 }
}
double StartValue;
double EndValue;
Color InRangeColor;
Color OutRangeColor;
}
Visual Basic
Copy Code
Public Class NRangeValueApplicator
  Inherits NRuleApplicator
Public Sub New(ByVal startVal As Double, ByVal endVal As Double, ByVal inRange As Color, ByVal outRange As Color)
 StartValue = startVal
 EndValue = endVal
 InRangeColor = inRange
 OutRangeColor = outRange
End Sub
Public Overrides Sub Apply(ByVal element As NChartElement)
 Dim indicator As NNeedleValueIndicator = TryCast(element, NNeedleValueIndicator)

 If indicator Is Nothing Then
  Return
 End If
 If indicator.Value > StartValue AndAlso indicator.Value < EndValue Then
  ' indicator is in range
  indicator.Shape.FillStyle = New NColorFillStyle(InRangeColor)
 Else
  indicator.Shape.FillStyle = New NColorFillStyle(OutRangeColor)
 End If

End Sub
Private StartValue As Double
Private EndValue As Double
Private InRangeColor As Color
Private OutRangeColor As Color
End Class

The next step is to create a style sheet that uses this applicator:

C#
Copy Code
// create selector
NTypeOfSelector selector = new NTypeOfSelector(typeof(NNeedleValueIndicator));
NRangeValueApplicator customApplicator = new NRangeValueApplicator(10, 20, Color.Green, Color.Red);
// create a style sheet
NStyleSheet sheet = new NStyleSheet();
sheet.Rules.Add(new NStyleSheetRule(selector, customApplicator));
// apply to document
nChartControl1.Document.StyleSheet = sheet;
Visual Basic
Copy Code
' create selector
Dim selector As NTypeOfSelector = New NTypeOfSelector(GetType(NNeedleValueIndicator))
Dim customApplicator As NRangeValueApplicator = New NRangeValueApplicator(10, 20, Color.Green, Color.Red)

' create a style sheet
Dim sheet As NStyleSheet = New NStyleSheet()
sheet.Rules.Add(New NStyleSheetRule(selector, customApplicator))
' apply to document
nChartControl1.Document.StyleSheet = sheet

Note that we used a “type of” selector to create the style sheet rule. This ensures that only objects of type “NNeedleValueIndicator” will be processed in the Apply override of the applicator.

Finally you should know that you can also extend selectors by deriving from the abstract NSelector class.