This is a migrated thread and some comments may be shown as answers.

Gradient

4 Answers 41 Views
Gauges (RadialGauge, LinearGauge, BulletGraph)
This is a migrated thread and some comments may be shown as answers.
Marc
Top achievements
Rank 1
Veteran
Marc asked on 21 Mar 2018, 02:21 PM

Hello,

I need help.

I'm using a radBulletGraph.

Set BackColor1 and 2 of bulletGraphQualitativeBar1 to different colors, BrushType is gradient, GradientStyle is linear.

Gradient is from top to bottom, I want left to right, or right to left. What can I do?

 

Kind regards

4 Answers, 1 is accepted

Sort by
0
Marc
Top achievements
Rank 1
Veteran
answered on 22 Mar 2018, 01:08 PM

I need somethin like this:

 

0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 23 Mar 2018, 12:45 PM
Hello, Marc, 

By default, the GradientStyles.Linear uses two colors for the gradient. However, I can suggest you specifying the BulletGraphFeaturedMeasureBar.BrushType to GaugeBrushType.Rainbow. Thus, you will obtain a similar gradient to the illustrated one:

I hope this information helps. If you have any additional questions, please let me know. 

Regards,
Dess
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Marc
Top achievements
Rank 1
Veteran
answered on 23 Mar 2018, 12:51 PM

Hey Dess,

thank you for your answer, but this isn't what I'm looking for.
I need the same colors you can see in my picture at post two.

Kind regards

0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 27 Mar 2018, 07:41 AM
Hello, Marc, 
  
You can create a custom BrushFactory and implement the desired brush you need. Here is demonstrated a sample approach:
this.bulletGraphFeaturedMeasureBar1.BrushFactory = new MyFactory();

public class MyFactory : IBrushFactory
{
    public Brush CreateBrush(GaugeVisualElement owner, GaugeBrushType type)
    {
        LinearGaugeBar bar = owner as LinearGaugeBar;
        if (bar == null)
        {
            return null;
        }
        return CreateRainbowBrush(bar);
    }
 
    private Brush CreateRainbowBrush(LinearGaugeBar bar)
    {
        LinearGradientBrush br = new LinearGradientBrush(bar.BoundingRectangle, Color.Black, Color.Black, (bar.Owner.Vertical ? 90 : 180), false);
        ColorBlend cb = new ColorBlend();
        cb.Positions = new float[8];
        int i = 0;
        for (float f = 0; f <= 1; f += 1.0f / 7)
        {
            cb.Positions[i++] = f;
        }
 
        cb.Colors = new Color[] { Color.Green, Color.FromArgb(120,190,0), Color.FromArgb(200,218,0), Color.FromArgb(220,190,0), Color.FromArgb(205,133,0), Color.FromArgb(190,80,0), Color.Red , Color.Green};
        br.InterpolationColors = cb;
        return br;
    }
}

The following articles are quite useful about creating a gradient brush: 
https://docs.microsoft.com/en-us/dotnet/framework/winforms/advanced/using-a-gradient-brush-to-fill-shapes
https://stackoverflow.com/questions/7822514/multi-color-linear-gradient-in-winforms
https://www.codeproject.com/Articles/20018/Gradients-made-easy

I hope this information helps. If you have any additional questions, please let me know. 

Regards,
Dess
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Gauges (RadialGauge, LinearGauge, BulletGraph)
Asked by
Marc
Top achievements
Rank 1
Veteran
Answers by
Marc
Top achievements
Rank 1
Veteran
Dess | Tech Support Engineer, Principal
Telerik team
Share this question
or