Implementing a Fan Chart

Fan chart series draws a line for the given actual y-values and draws colored bands over certain ranges to illustrate the uncertainty in the projections. You can find more details from this wiki link – http://en.wikipedia.org/wiki/Fan_chart_(time_series). By using Syncfusion’s multiple range area chart type, you can plot a Fan Chart series.

Below table shows data collection for a Fan chart:

DateTime(X-value)

Actual Value

Projected
Min Value

Var1

Var2

Var3

Var4

Projected
Max Value

July 2011

24

Oct 2011

32

Jan 2012

16

Apr 2012

45

July 2012

30

Oct 2012

5

10

20

50

60

65

Jan 2013

10

15

30

60

70

75

Apr 2013

20

25

50

70

80

85

July 2013

25

30

60

80

90

95

 

Actual values are available till July 2012 and after that the collection has projected values from Min to Max with four variant values. To render this data as a Fan chart series, we will copy the actual values to projected values till July 2012. Then use three range charts having the Min & Max, Var1 & Var4, Var3 & Var2 as DataSources. Below find the XAML for WPF implementation:

 



    
        
    
    
        
    
            


    
        
    
    
        
    
               



    
        
    
    
        
    

FanChart_wpf

WPF sample – FanChart_WPF.zip

The same approach can be used to render Fan Chart series for ASP.NET, ASP.NET MVC and Windows Forms platforms. Below find samples:

ASP.NET, ASP.NET MVC and Windows Forms samples – FanChartSamples.zip

Share this post:

Leave a comment