[CLOSED] [#8] Chart: Hide Line Series values

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] [#8] Chart: Hide Line Series values

    I have a chart showing three line series (2010, 2011, 2012) with a categories axis by month (Jan, Feb, ..., Nov, Dec). The data is complete for 2010 and 2011 but since it is not Dec 2012 yet I do not have data and thus the line for 2012 should stop at Nov and not show 0 for Dec and connect the line between Nov and Dec 2012.

    I used your line chart example and tried to set the data point to null after changing the data type to double?. But that causes strange results.

    There are several discussions on Sencha, but I can't find any resolutions:

    Ext JS Community Forums 4.x
    How can I hide null value in a Line chart?
    Hide Values from a Line Series of a Chart

    Ext JS Community Forums 3.x
    Null values handling in line chart
    Last edited by Daniil; Mar 14, 2013 at 5:42 AM. Reason: [CLOSED]
  2. #2
    Hi Chris,

    I am afraid there is no solution except waiting for ExtJS 4.2.
    http://www.sencha.com/forum/showthread.php?238541
  3. #3
    Quote Originally Posted by Daniil View Post
    Hi Chris,

    I am afraid there is no solution except waiting for ExtJS 4.2.
    http://www.sencha.com/forum/showthread.php?238541
    Based on the response to your Sencha thread Scott Martin said "It seems that undefined only works if it is at the end as shown":
    http://www.sencha.com/forum/showthread.php?233162.

    Currently that is my problem that I need to stop the line series at the end of a series and not in the middle.
  4. #4
    That is right.

    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)
            {
                this.Chart1.GetStore().Data = new object[]
                {
                    new 
                    {
                        x = 0,
                        y = 0  
                    },
                    new 
                    {
                        x = 50,
                        y = 50  
                    },
                    new 
                    {
                        x = 100
                    }
                };
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    </head>
    <body>
        <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="y" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <Axes>
                <ext:NumericAxis Title="X" Fields="x" Position="Bottom" />
                <ext:NumericAxis Title="Y" Fields="y" Position="Left" />
            </Axes>
            <Series>
                <ext:LineSeries Titles="Chart" XField="x" YField="y" />
            </Series>
        </ext:Chart>
    </body>
    </html>
  5. #5
    Well values are hidden when they are absent from the beginning or end of the line. So it is great if I could hard code the data directly, but how to build the dynamic objects based on a list of data retrieved.
                this.Chart1.GetStore().Data = new object[]
                {
                    new { Name = "Jan", Data1 = 10 },
                    new { Name = "Feb", Data1 = 25 },
                    new { Name = "Mar", Data1 = 33, Data2 = 56 },
                    new { Name = "Apr", Data1 = 17, Data2 = 23 },
                    new { Name = "May", Data1 = 51, Data2 = 34 },
                    new { Name = "Jun", Data1 = 22, Data2 = 66 },
                    new { Name = "Jul", Data1 = 87, Data2 = 45 },
                    new { Name = "Aug", Data1 = 67, Data2 = 92 },
                    new { Name = "Sep", Data1 = 12, Data2 = 77 },
                    new { Name = "Oct", Data1 = 55, Data2 = 66 },
                    new { Name = "Nov", Data2 = 65 },
                    new { Name = "Dec", Data2 = 33 }
                };

    The dbData is a sample of retrieving data from my data table. I am summing up data requests ordered by Year and Month of the request.
    <%@ 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)
            {
                // Data1 = 2012 data
                // Data2 = 2011 data
                var dbData = new object[]
                {
                    new {Year = 2012, Month = "Jan", Requests = 10 },
                    new {Year = 2012, Month = "Feb", Requests = 25 },
                    new {Year = 2012, Month = "Mar", Requests = 33 },
                    new {Year = 2012, Month = "Apr", Requests = 17 },
                    new {Year = 2012, Month = "May", Requests = 51 },
                    new {Year = 2012, Month = "Jun", Requests = 22 },
                    new {Year = 2012, Month = "Jul", Requests = 87 },
                    new {Year = 2012, Month = "Aug", Requests = 67 },
                    new {Year = 2012, Month = "Sep", Requests = 12 },
                    new {Year = 2012, Month = "Oct", Requests = 55 },
                    new {Year = 2011, Month = "Mar", Requests = 56 },
                    new {Year = 2011, Month = "Apr", Requests = 23 },
                    new {Year = 2011, Month = "May", Requests = 34 },
                    new {Year = 2011, Month = "Jun", Requests = 66 },
                    new {Year = 2011, Month = "Jul", Requests = 45 },
                    new {Year = 2011, Month = "Aug", Requests = 92 },
                    new {Year = 2011, Month = "Sep", Requests = 77 },
                    new {Year = 2011, Month = "Oct", Requests = 66 },
                    new {Year = 2011, Month = "Nov", Requests = 65 },
                    new {Year = 2011, Month = "Dec", Requests = 33 }
                };
                
                this.Chart1.GetStore().Data = new object[]
                {
                    new { Name = "Jan", Data1 = 10 },
                    new { Name = "Feb", Data1 = 25 },
                    new { Name = "Mar", Data1 = 33, Data2 = 56 },
                    new { Name = "Apr", Data1 = 17, Data2 = 23 },
                    new { Name = "May", Data1 = 51, Data2 = 34 },
                    new { Name = "Jun", Data1 = 22, Data2 = 66 },
                    new { Name = "Jul", Data1 = 87, Data2 = 45 },
                    new { Name = "Aug", Data1 = 67, Data2 = 92 },
                    new { Name = "Sep", Data1 = 12, Data2 = 77 },
                    new { Name = "Oct", Data1 = 55, Data2 = 66 },
                    new { Name = "Nov", Data2 = 65 },
                    new { Name = "Dec", Data2 = 33 }
                };
    
            }
        }
           
    </script>
    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
        <title>Line Chart - Ext.NET Examples</title>
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Panel ID="Panel1" runat="server" Title="Line Chart" Width="800" Height="600"
            Layout="FitLayout">
            <Items>
                <ext:Chart ID="Chart1" runat="server" StyleSpec="background:#fff;" Shadow="true"
                    StandardTheme="Category1" Animate="true">
                    <LegendConfig Position="Right" />
                    <Store>
                        <ext:Store ID="Store1" runat="server">
                            <Model>
                                <ext:Model ID="Model1" runat="server">
                                    <Fields>
                                        <ext:ModelField Name="Name" />
                                        <ext:ModelField Name="Data1" />
                                        <ext:ModelField Name="Data2" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                        </ext:Store>
                    </Store>
                    <Axes>
                        <ext:NumericAxis Position="Left" Fields="Data1,Data2" Title="Number of Hits" MinorTickSteps="1" Minimum="0" />
                        <ext:CategoryAxis Position="Bottom" Fields="Name" Title="Month of the Year" />
                    </Axes>
                    <Series>
                        <ext:LineSeries Axis="Left" XField="Name" YField="Data1" Title="2012" Smooth="3">
                            <Tips  runat="server" TrackMouse="true">
                                <Renderer Handler="this.update(String(item.value[1]))" />
                            </Tips>
                        </ext:LineSeries>
                        <ext:LineSeries Axis="Left" XField="Name" YField="Data2" Title="2011" Smooth="3">
                            <Tips runat="server" TrackMouse="true">
                                <Renderer Handler="this.update(String(item.value[1]))" />
                            </Tips>
                        </ext:LineSeries>
                    </Series>
                </ext:Chart>
            </Items>
        </ext:Panel>
        </form>
    </body>
    </html>
    Any thoughts? If not I hope that Ext JS 4.2 will allow Data1 or Data2 to be null and interpreted as undefined.
  6. #6
    Your sample appears to be working fine for me. Or I am misunderstanding something...

    Anyway, to convert nulls to undefined, you can use Convert.
    <ext:ModelField Name="y">
        <Convert Handler="if (value === null) { 
                              value = undefined; 
                          }                                                  
                          return value;" />
    </ext:ModelField>
  7. #7
    agreed the sample works but my question is how to convert dbData to data. It worked when I hardcoded the data structure but it really needs to be populated from the dbData object. driving into work now will test your solution also when I get there.
  8. #8
    I think I understand now.

    Yes, Convert should help.

    Also I agreed with you here:
    I hope that Ext JS 4.2 will allow Data1 or Data2 to be null and interpreted as undefined.
    I can't see any reason why not do deal with nulls the same as with undefined.
  9. #9
    Implementation worked perfectly. Once I added the convert handler to the ModelField and changed the definition of my variable to allow nulls (double? vs double), the line series was drawn exactly like I wanted.

    <ext:ModelField Name="Data1">
        <Convert Handler="if (value === null) {value = undefined;}                                                 
                                     return value;" />
    </ext:ModelField>
    public class ChartData
    {
        public string Name
        {
           get;
           set;
        }
        public double? Data1
        {
           get;
           set;
        }
        ....
    }
    You can close the thread since the solution worked for me to not show null values at the beginning or end of a lines series. But there are still issues with line series with nulls in the middle and if you do not want a line to not drawn, but that is not the reason for this thread.
  10. #10
    I will leave it opened till ExtJS 4.2 release to review.

    I also made an update regarding nulls.
    http://www.sencha.com/forum/showthre...l=1#post911947
    Last edited by Daniil; Nov 15, 2012 at 11:34 AM.
Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 13
    Last Post: Apr 26, 2016, 10:11 PM
  2. [CLOSED] [#18] Chart: Single Column Series yField incorrect
    By cwolcott in forum 2.x Premium Help
    Replies: 5
    Last Post: Dec 29, 2012, 11:15 AM
  3. Replies: 14
    Last Post: Dec 21, 2012, 4:23 AM
  4. [CLOSED] chart series double click event
    By SymSure in forum 2.x Premium Help
    Replies: 4
    Last Post: Sep 04, 2012, 2:03 PM
  5. Replies: 3
    Last Post: Jul 13, 2012, 10:28 AM

Tags for this Thread

Posting Permissions