none
GradientStyle in Range Chart RRS feed

  • Question

  • Is it possible to play with the rate of the gradient when using GradientStyle on a series in a range chart?  I've used these three lines and while the legend shows the gradient works, the graph itself has hardly any gradient visible.  In fact I thought at first it wasn't working at all as I could only detect one colour but I now wonder if it's just that the rate of gradient is too slow?  Eg I've selected a gradient type of TopBottom but there's no indication of where the "top" and "bottom" actually are - is it the top and bottom of the chartarea, the top and bottom of the range (as I had hoped), or something else?

    rngSeries.BackGradientStyle = GradientStyle.TopBottom
    rngSeries.Color = Color.FromArgb(128, Color.Yellow)
    rngSeries.BackSecondaryColor = Color.FromArgb(128, Color.Red)

    I suspect I may not have any control in which case I may have to abandon my wish to use a gradient but if you know of any tricks to produce the effect I'm after, please say so!


    Friday, October 26, 2018 8:54 PM

All replies

  • Found some more evidence: Some of my charts have a larger span of Y values (<1000) and these show the gradient whereas those with a narrower span of Y values (<20) do not.  So the rate of gradient appears to be dependant upon some preset max-min range?  Does anyone know if there's a way to manipulate this so that I can get a visible gradient with the lower range of Y values?
    Sunday, October 28, 2018 7:34 PM
  • Hi Tyson,

    I guess I cant duplicate what you mean or I don't understand.

    One change I made is how the colors are defined. What you have is 50percent opaque. Maybe you know.

    Otherwise I am not sure what you expect to get. Show an image of the result you want.

    The gradient has a rectangle you define in a normal thing. However I am not sure how its is used in the chart perhaps the chart area bounds or something. Play with moving the shape up and down the chart area . If your series range is between 50 and 100 and the chart area is 0 to 1000 then you may only see the dark red at the bottom ie 100 and the yellow at top ie 1000. So that is the proportion But its by percent of the area height, not the values of the chart series. They can be anything. Its the position in the whole chart area is the gradient rectangle.

    Imports System.Windows.Forms.DataVisualization.Charting
    
    Public Class Form8
        Private Sub Form8_Load(sender As Object, e As EventArgs) Handles MyBase.Load
    
            Dim yValue1 As Double() = {46, 74, 65, 59, 34, 87, 50, 87, 64, 74}
            Dim yValue2 As Double() = {22, 45, 30, 42, 25, 47, 40, 70, 34, 20}
    
            'Dim yValue1 As Double() = {546, 774, 665, 559, 334, 887, 650, 887, 764, 974}
            'Dim yValue2 As Double() = {222, 345, 430, 542, 225, 447, 440, 770, 334, 220}
    
            With Chart1.Series(0)
                .ChartType = SeriesChartType.SplineRange
                .IsVisibleInLegend = False
                .Points.DataBindY(yValue1, yValue2)
    
                .BackGradientStyle = GradientStyle.TopBottom
                '.Color = Color.FromArgb(128, Color.Yellow)
                '.BackSecondaryColor = Color.FromArgb(128, Color.Red)
                .Color = Color.Yellow
                .BackSecondaryColor = Color.Red
            End With
        End Sub
    End Class

    Sunday, October 28, 2018 8:25 PM
  • PS I should say I know what you want to do  and I don't know a way to do it, easily. The gradient fills the chart area it appears.

    However there may be a way to use what ever is available with a normal gdi+ drawing with the gradient if you knew how to point to it in the chart things.

    I think there are ways to set the fading and blending in a normal picturebox gradient drawing. I don't know how to do it in a chart.

    Show an image of what you get and what you want. How important is it. You can use different colors.

    Make sure you are only showing your scale range. ie if your data all starts at 20 don't put the bottom axis at 0. Like in the example you could set y to start at 20 like this:

    Hmm. Not sure that is what I meant? That's all I have at this time.


    Now it looks like it uses the max min y values of the series for the gradient rectangle top and bottom.



    Sunday, October 28, 2018 9:14 PM
  • Thanks tommytraindude, your graphs were different to mine and I think I've worked out that because I'm choosing to view a subset of the Y axis, it's not scaling the gradient to match.  Some of my data spikes to very large values so if I display their full extent, the rest of the data is so close to the X axis that it's not very informative.  So I've been deliberately "zooming" the Y axis by setting its min and max values so that the spikes are clipped and the graph stays viewing the majority of the data.  Looks like this means the gradient is not as nice to look at though.
    Wednesday, October 31, 2018 8:19 PM
  • Thanks tommytraindude, your graphs were different to mine and I think I've worked out that because I'm choosing to view a subset of the Y axis, it's not scaling the gradient to match.  Some of my data spikes to very large values so if I display their full extent, the rest of the data is so close to the X axis that it's not very informative.  So I've been deliberately "zooming" the Y axis by setting its min and max values so that the spikes are clipped and the graph stays viewing the majority of the data.  Looks like this means the gradient is not as nice to look at though.

    I see. Well maybe you should clip the tops of the spikes down to the lower range by clipping out those data points above the max y value you "zoom" to now  before adding to the series points.

    ie if you now set y max to 200 then filter your data and if pt.y > 200 then = 200. That way the gradient range is 0 to 200 (what you show) instead of 0 to 1000 (your spike max).


    Wednesday, October 31, 2018 8:53 PM
  • PS here we go you can use scale breaks. See how the middle of the chart is cut out? I will guess the gradient would work better. Did you get those chart samples?

     ' Enable scale breaks
    chart1.ChartAreas("Default").AxisY.ScaleBreakStyle.Enabled = True
    
    ' Set the scale break type
    chart1.ChartAreas("Default").AxisY.ScaleBreakStyle.BreakLineStyle = BreakLineStyle.Wave
    
    ' Set the spacing gap between the lines of the scale break (as a percentage of y-axis)
    chart1.ChartAreas("Default").AxisY.ScaleBreakStyle.Spacing = 2 
    
    ' Set the line width of the scale break
    chart1.ChartAreas("Default").AxisY.ScaleBreakStyle.LineWidth = 2
    
    ' Set the color of the scale break
    chart1.ChartAreas("Default").AxisY.ScaleBreakStyle.LineColor = Color.Red 
    
    ' Show scale break if more than 25% of the chart is empty space
    chart1.ChartAreas("Default").AxisY.ScaleBreakStyle.CollapsibleSpaceThreshold = 25 
    
    ' If all data points are significantly far from zero, 
    ' the Chart will calculate the scale minimum value
    chart1.ChartAreas("Default").AxisY.ScaleBreakStyle.IsStartedFromZero = AutoBool.Auto


    Wednesday, October 31, 2018 9:46 PM