In this topic, we will explain how to set multiple colors to DataPoint region which lies in a specified axis range. LinearGradientBrush can be used to apply multiple colors to DataPoint. The below example is shown using Silverlight, but you can do the same in WPF also.
Example from Managed Code
Lets create a Silverlight application and add Visifire binary references to it. For information about creating Visifire Chart in a Silverlight application, please refer to Managed Code Silverlight Sample.
Open the Page.xaml.cs page and add a function CreateChart() in Page constructor.
|
public Page() { InitializeComponent();
// Call function to create chart CreateChart(); } |
Following is the content of the CreateChart function:
|
private void CreateChart() { // Create Chart Chart chart = new Chart();
// Set Chart size chart.Width = 500; chart.Height = 300;
// Create DataSeries DataSeries ds = new DataSeries();
// Set DataSeries property ds.Bevel = false;
Random rand = new Random();
for (Int32 i = 0; i < 5; i++) { // Create DataPoint DataPoint dp = new DataPoint();
// Set DataPoint YValue dp.YValue = rand.Next(0, 50);
// Create LinearGradientBrush LinearGradientBrush brush = new LinearGradientBrush(); brush.StartPoint = new Point(0.5, 1); brush.EndPoint = new Point(0.5, 0);
// Create GradientStop collection brush.GradientStops = new GradientStopCollection();
GradientStop gs;
for (Int32 j = 1; j < dp.YValue; j++) { if (j <= 20) { // Initialize GradientStop gs = new GradientStop();
// Set GradientStop properties gs.Color = Color.FromArgb(0xFF, 0xF2, 0x85, 0x00); gs.Offset = j / dp.YValue;
// Add GradientStop to GradientStops collection brush.GradientStops.Add(gs); } else { // Initialize GradientStop gs = new GradientStop();
// Set GradientStop properties gs.Color = Color.FromArgb(0x88, 0x22, 0x97, 0xCC); gs.Offset = j / dp.YValue;
// Add GradientStop to GradientStops collection brush.GradientStops.Add(gs); } }
// Set LinearGradientBrush to DataPoint's Color property dp.Color = brush;
// Add DataPoint to DataPoints collection of DataSeries ds.DataPoints.Add(dp); }
// Add DataSeries to Series collection of Chart chart.Series.Add(ds);
// Add chart to LayoutRoot LayoutRoot.Children.Add(chart); } |
Below is the screen shot of Chart. As you can see, the DataPoint region which lies in the axis range from 0 - 20 has a different Color than the range above 20.
Example from XAML
You can also set multiple colors to DataPoint region which lies in a specified axis range from XAML.
Below is the code for Chart XAML.
|
<vc:Chart Width="500" Height="300" xmlns:vc="clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts" Theme="Theme1"> <vc:Chart.Series> <vc:DataSeries RenderAs="Column" Bevel="False"> <vc:DataSeries.DataPoints> <vc:DataPoint YValue="80"> <vc:DataPoint.Color> <LinearGradientBrush StartPoint="0.5,1" EndPoint="0.5,0"> <GradientStop Color="Green" Offset="0.5"/> <GradientStop Color="Red" Offset="0.5"/> </LinearGradientBrush> </vc:DataPoint.Color> </vc:DataPoint> <vc:DataPoint YValue="70"> <vc:DataPoint.Color> <LinearGradientBrush StartPoint="0.5,1" EndPoint="0.5,0"> <GradientStop Color="Green" Offset="0.571428571428"/> <GradientStop Color="Red" Offset="0.571428571428"/> </LinearGradientBrush> </vc:DataPoint.Color> </vc:DataPoint> </vc:DataSeries.DataPoints> </vc:DataSeries> </vc:Chart.Series> </vc:Chart> |
Here is the screenshot for the above XAML. As you can see, the DataPoint region which lies in the axis range from 0 - 40 has a different Color than the range above 40. This is done by calculating Offset value for GradientStop in LinearGradientStop. Example, the second DataPoint's YValue is 70, if you divide 40 (axis range) by 70 (YValue) then you will get Offset as 0.571428571428 (approx).
Webyog 2010