[CLOSED] Fill between two line series

  1. #1

    [CLOSED] Fill between two line series

    How can I do a fill between two line series? If I set the Fill = True on the top line, the fill extends to the bottom of the chart. I tried setting Fill = true on second one and make hte style white but the Fill from the top line still bleeds down.
    Last edited by Daniil; Feb 28, 2014 at 4:06 AM. Reason: [CLOSED]
  2. #2
    Hi @jchau,

    Yes, it looks impossible to achieve the requirement with Fill="true". The Fill of the upper line is in priority...

    My next thought is to use an AreaSeries. Though, there is a quirky behavior - it overlaps with the Axes lines.

    Example
    <%@ Page Language="C#" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store s = this.Chart1.GetStore();
                s.DataSource = new object[]
                {
                    new 
                    {
                        x = 0,
                        y1 = 25,
                        y2 = 50
                        
                    },
                    new 
                    {
                        x = 50,
                        y1 = 35,
                        y2 = 65
                        
                    },
                    new 
                    {
                        x = 100,
                        y1 = 25,
                        y2 = 50
                    }
                };
            }
        }
    </script>
    
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:Chart 
                ID="Chart1" 
                runat="server" 
                Width="400" 
                Height="400">
                <Store>
                    <ext:Store runat="server">
                        <Model>
                            <ext:Model runat="server">
                                <Fields>
                                    <ext:ModelField Name="x" />
                                    <ext:ModelField Name="y1" />
                                    <ext:ModelField Name="y2" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <Axes>
                    <ext:NumericAxis Title="X" Fields="x" Position="Bottom" />
                    <ext:NumericAxis Title="Y" Fields="y1,y2" Position="Left" Minimum="0" />
                </Axes>
                <Series>
                    <ext:LineSeries Titles="Line 1" XField="x" YField="y1" />
    
                    <ext:LineSeries Titles="Line 2" XField="x" YField="y2" Fill="true" />
    
                    <ext:AreaSeries XField="x" YField="y1">
                        <Renderer Handler="attributes.fill = 'white'; return attributes;" />
                    </ext:AreaSeries>
                </Series>
            </ext:Chart>
        </form>
    </body>
    </html>
    Maybe, you could try to use an AreaSeries instend of LineSeries at all?
  3. #3
    Thanks. I tried the area series before too and cutting off the Y-Axis was a deal breaker.
  4. #4
    I don't know why they overlap an AreaSeries with an axis.

    Maybe, this way. Dirty, but appears to be working.

    Example
    <%@ Page Language="C#" %>
      
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
     
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store s = this.Chart1.GetStore();
                s.DataSource = new object[]
                {
                    new 
                    {
                        x = 0,
                        xForArea = 0.4,
                        y1 = 25,
                        y2 = 50
                         
                    },
                    new 
                    {
                        x = 50,
                        xForArea = 50,
                        y1 = 35,
                        y2 = 65
                         
                    },
                    new 
                    {
                        x = 100,
                        xForArea = 100.4,
                        y1 = 25,
                        y2 = 50
                    }
                };
            }
        }
    </script>
     
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:Chart
                ID="Chart1"
                runat="server"
                Width="400"
                Height="400">
                <Store>
                    <ext:Store runat="server">
                        <Model>
                            <ext:Model runat="server">
                                <Fields>
                                    <ext:ModelField Name="x" />
                                    <ext:ModelField Name="xForArea" />
                                    <ext:ModelField Name="y1" />
                                    <ext:ModelField Name="y2" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <Axes>
                    <ext:NumericAxis Title="X" Fields="x" Position="Bottom" />
                    <ext:NumericAxis Title="Y" Fields="y1,y2" Position="Left" Minimum="0" />
                </Axes>
                <Series>
                    <ext:LineSeries Titles="Line 1" XField="x" YField="y1" />
                    <ext:LineSeries Titles="Line 2" XField="x" YField="y2" Fill="true" />
                    <ext:AreaSeries XField="xForArea" YField="y1">
                        <Renderer Handler="attributes.fill = 'white'; return attributes;" />
                    </ext:AreaSeries>
                </Series>
            </ext:Chart>
        </form>
    </body>
    </html>
    Last edited by geoffrey.mcgill; Aug 25, 2014 at 1:19 PM.

Similar Threads

  1. Replies: 2
    Last Post: Nov 07, 2013, 1:03 PM
  2. [CLOSED] Configure Legend of Line Chart Series
    By PriceRightHTML5team in forum 2.x Legacy Premium Help
    Replies: 31
    Last Post: Oct 19, 2013, 4:32 AM
  3. [CLOSED] Disable Line Series Tips
    By cwolcott in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 19, 2013, 4:12 PM
  4. How to use Line series Chart in version 1.3
    By Binai in forum 1.x Help
    Replies: 1
    Last Post: May 08, 2013, 12:46 PM
  5. [CLOSED] Adding line series tooltip dynamically.
    By RCM in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Apr 04, 2013, 7:06 PM

Tags for this Thread

Posting Permissions