[FIXED] [#1486] [4.3.0] Handle null values as gaps in a Line Chart

Page 2 of 2 FirstFirst 12
  1. #11
    Hello again @tylert!

    We've just implemented this on Ext.NET. It is now available from github.

    The fix involves actually enabling the fix, for any side effects it may have (and as it is necessary only in a specific case of gaps + auto-scale).

    The fix is enabled via the DataGapsHandling="true" property set to the each series' components.

    This would be the code required to run the example, if under the fixed Ext.NET version:

    <%@ Page Language="C#" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            this.Chart1.GetStore().DataSource = new List<object>
            {
                new { Month = "Jan", Data1 = 20.3, Data2 = 10.3 },
                new { Month = "Feb", Data1 = 20, Data2 = 10 },
                new { Month = "Mar", Data1 = 19, Data2 = 9 },
                new { Month = "Apr", Data1 = 18, Data2 = 8 },
                new { Month = "May", Data1 = 18, Data2 = 8 },
                new { Month = "Jun", Data2 = 7 },
                new { Month = "Jul", Data1 = 16, Data2 = 6 },
                new { Month = "Aug", Data1 = 16 },
                new { Month = "Sep", Data1 = 16, Data2 = 6 },
                new { Month = "Oct", Data1 = 16, Data2 = 6 },
                new { Month = "Nov", Data1 = 15, Data2 = 5 },
                new { Month = "Dec", Data1 = 20, Data2 = 5 }
            };
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Line Chart - Ext.NET Examples</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <h1>Line Chart Example</h1>
    
            <p>A basic line chart displays information as a series of data points connected through</p>
            <p>straight lines. It is similar to scatter plot, except that the points are connected.</p>
            <p>Line charts are often used to visualize trends in data over a period.</p>
    
            <ext:Panel
                runat="server"
                Width="650"
                Height="550"
                Layout="FitLayout">
                <TopBar>
                    <ext:Toolbar runat="server">
                        <Items>
                            <ext:ToolbarFill runat="server" />
    
                            <ext:Button
                                runat="server"
                                Text="Preview"
                                Handler="this.up('panel').down('chart').preview();" />
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <Items>
                    <ext:CartesianChart
                        ID="Chart1"
                        runat="server"
                        InsetPadding="40"
                        InnerPadding="0 40 0 40">
                        <Store>
                            <ext:Store runat="server">
                                <Model>
                                    <ext:Model runat="server">
                                        <Fields>
                                            <ext:ModelField Name="Month" />
                                            <ext:ModelField Name="Data1" Type="Float"  AllowNull="true" />
                                            <ext:ModelField Name="Data2" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                            </ext:Store>
                        </Store>
    
                        <Interactions>
                            <ext:PanZoomInteraction ZoomOnPanGesture="true" />
                        </Interactions>
    
                        <Items>
                            <ext:TextSprite
                                Text="Line Charts - Line With data Gaps"
                                FontSize="22"
                                Width="100"
                                Height="30"
                                X="40"
                                Y="20" />
                        </Items>
    
                        <Axes>
                            <ext:NumericAxis
                                Position="Left"
                                Fields="Data1,Data2"
                                Grid="true">
                                <Renderer Handler="return layoutContext.renderer(label) + '%';" />
                            </ext:NumericAxis>
    
                            <ext:CategoryAxis
                                Position="Bottom"
                                Fields="Month"
                                Grid="true">
                                <Label RotationDegrees="-45" />
                            </ext:CategoryAxis>
                        </Axes>
                        <Series>
                            <ext:LineSeries XField="Month" YField="Data1" DataGapsHandling="true">
                                <StyleSpec>
                                    <ext:Sprite LineWidth="4" />
                                </StyleSpec>
    
                                <HighlightConfig>
                                    <ext:Sprite FillStyle="#000" Radius="5" LineWidth="2" StrokeStyle="#fff" />
                                </HighlightConfig>
                                <Marker>
                                    <ext:Sprite Radius="4" />
                                </Marker>
                                <Label Field="Data1" Display="Over" />
                            </ext:LineSeries>
                            <ext:LineSeries XField="Month" YField="Data2">
                                <StyleSpec>
                                    <ext:Sprite LineWidth="4" />
                                </StyleSpec>
    
                                <HighlightConfig>
                                    <ext:Sprite FillStyle="#000" Radius="5" LineWidth="2" StrokeStyle="#fff" />
                                </HighlightConfig>
                                <Marker>
                                    <ext:Sprite Radius="4" />
                                </Marker>
                                <Label Field="Data2" Display="Over" />
                            </ext:LineSeries>
                        </Series>
                    </ext:CartesianChart>
                </Items>
            </ext:Panel>
        </form>
    </body>
    </html>
    Notice the property is set in line 107 but not on 120. It is just because the second series map Data2, which is rid of the 'float' type restriction which, in turn, was a condition to trigger the issue.

    I hope this helps!
    Fabrício Murta
    Developer & Support Expert
  2. #12
    We were still using the overrides FixA and FixB, but they seemed to have broken at some point recently with a new ExtJS update because getRangeOfData() doesn't seem to be called anymore. Instead I applied a similar override to expandRange():


    Ext.define('FixC', {
      override: 'Ext.chart.Util',
      expandRange: function (range, data) {
          var length = data.length, min = range[0], max = range[1], i, value;
          for (i = 0; i < length; i++) {
              value = data[i];
              if (!isFinite(value) || !Ext.isNumeric(value)) {
                  continue;
              }
              if (value < min || !isFinite(min) || !Ext.isNumeric(min)) {
                  min = value;
              }
              if (value > max || !isFinite(max) || !Ext.isNumeric(max)) {
                  max = value;
              }
          }
          range[0] = min;
          range[1] = max;
      }
    });
  3. #13
    bump -- just want to make sure this latest update is seen. Should I create a new thread since this one was previously marked as FIXED?
  4. #14
    Hello @tylert!

    Sorry, should have posted a follow-up here. With the test case we have, no issue is triggering at all in Ext.NET 4.4.0.

    So, at first, seems the issue reported here is still fixed. Maybe it is a case for a new issue as a different test case may be involved. Or, do you reproduce the issue with the test case provided above (post #11)?

    Anyway, the thread is two pages long, no matter how I look at it, it looks like a good idea to start a new thread.

    Any chance you didn't set the "magic" DataGapsHandling="true" bit in your chart?

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
Page 2 of 2 FirstFirst 12

Similar Threads

  1. Replies: 2
    Last Post: Sep 11, 2015, 8:20 AM
  2. [CLOSED] Chart Bar with null values
    By slavina in forum 2.x Legacy Premium Help
    Replies: 8
    Last Post: Jul 09, 2015, 8:25 PM
  3. [CLOSED] Line Series Chart with null values & axis scaling
    By tylert in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Oct 25, 2014, 6:57 AM
  4. Replies: 1
    Last Post: Nov 07, 2013, 2:40 PM
  5. [CLOSED] Handle null values in line chart series
    By PriceRightHTML5team in forum 2.x Legacy Premium Help
    Replies: 12
    Last Post: Jul 29, 2013, 8:50 AM

Tags for this Thread

Posting Permissions