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

Loading