What's New?

[CLOSED] Handle null values in line chart series

Page 1 of 2 12 LastLast
  1. #1
    Jul 26, 2013, 7:55 AM

    [CLOSED] Handle null values in line chart series

    Hi Ext.Net Team,

    I am binding a line chart with a model which has some values as null

    for e.g:

    Name Switzerland Italy
    Apr-13 1.1 1.0
    May-13 1.1
    Jun-13 1.1
    Jul-13 1.1 1.0
    Aug-13 1.1 1.9

    So when i bind this model to my chart i get as shown in the attachment

    Click image for larger version.  Name: graph2.PNG  Views: 26  Size: 20.2 KB  ID: 6631

    if you note in the above it makes null values as 0 since the model we have set the data type as float.

    what i want is it should not show data for those months whose values are null.
    I want it as below:

    Click image for larger version.  Name: graph3.PNG  Views: 23  Size: 11.6 KB  ID: 6632

    Any suggestions

    Thanks
    Last edited by Daniil; Jul 29, 2013 at 12:13 PM. Reason: [CLOSED]
  2. #2
    Jul 26, 2013, 9:34 AM
    Hi @PriceRightHTML5team,

    If an YField contains "false", then there will be a gap in the line.

    You can convert it to false in a ModelField's Convert.
    <ext:ModelField Name="y">
    <Convert Handler="if (value === '') { 
                          return false; 
                      } 
                      return value;" />
</ext:ModelField>
    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,
                    y = 0  
                },
                new 
                {
                    x = 25,
                    y = 25  
                },
                new 
                {
                    x = 50,
                    y = ""  
                },
                new 
                {
                    x = 75,
                    y = 75  
                },
                new 
                {
                    x = 100,
                    y = 100   
                }
            };
        }
    }
</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 ID="Store1" runat="server">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="x" />
                                <ext:ModelField Name="y">
                                    <Convert Handler="if (value === '') { return false; } return value;" />
                                </ext:ModelField>
                            </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>
    </form>
</body>
</html>
  3. #3
    Jul 26, 2013, 11:55 AM
    Quote Originally Posted by Daniil View Post
    Hi @PriceRightHTML5team,

    If an YField contains "false", then there will be a gap in the line.

    You can convert it to false in a ModelField's Convert.
    <ext:ModelField Name="y">
    <Convert Handler="if (value === '') { 
                          return false; 
                      } 
                      return value;" />
</ext:ModelField>
    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,
                    y = 0  
                },
                new 
                {
                    x = 25,
                    y = 25  
                },
                new 
                {
                    x = 50,
                    y = ""  
                },
                new 
                {
                    x = 75,
                    y = 75  
                },
                new 
                {
                    x = 100,
                    y = 100   
                }
            };
        }
    }
</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 ID="Store1" runat="server">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="x" />
                                <ext:ModelField Name="y">
                                    <Convert Handler="if (value === '') { return false; } return value;" />
                                </ext:ModelField>
                            </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>
    </form>
</body>
</html>
    The graph doesn't show up.Her's what i added.
    I am generating "Yfield dynamically" 

     listColumns.ForEach(column =>
        {
            model.Fields.Add(new ModelField(column, ModelFieldType.Float).Convert.Handler = " if (value === '') { return false; } return value;");            
        });
    Not getting why we have 3 equal(=) in if (value === '')

    Please let me know what i am missing or anything wrong
  4. #4
    Jul 26, 2013, 12:12 PM
    In my example I bind y = "" to the ModelField. What do you bind? I guess a null. Please try:
    if (value === null) {
     return false; 
} 

return value;
    Quote Originally Posted by PriceRightHTML5team View Post
    Not getting why we have 3 equal(=) in if (value === '')
    Please follow:
    http://www.w3schools.com/js/js_comparisons.asp
  5. #5
    Jul 26, 2013, 12:33 PM
    Quote Originally Posted by Daniil View Post
    In my example I bind y = "" to the ModelField. What do you bind? I guess a null. Please try:
    if (value === null) {
     return false; 
} 

return value;


    Please follow:
    http://www.w3schools.com/js/js_comparisons.asp

    Not sure whats missing even if I add the below code the graph is not showing up:

       listColumns.ForEach(column =>
        {
            model.Fields.Add(new ModelField(column, ModelFieldType.Float).Convert.Handler = "return value;");          
        });
    I also tried (value === null) but still no luck.

    I also added an alert inside the handle but it is not getting fired.

    Just a note:
    I am generating the modelfield dynamically and through code behind
  6. #6
    Jul 26, 2013, 3:39 PM
    Please create a ModelField this way.
    model.Fields.Add(new ModelField(column, ModelFieldType.Float)
{
    Convert =
    {
        Handler = "console.log('Convert'); return value;"
    }
});
  7. #7
    Jul 29, 2013, 4:39 AM
    Quote Originally Posted by Daniil View Post
    Please create a ModelField this way.
    model.Fields.Add(new ModelField(column, ModelFieldType.Float)
{
    Convert =
    {
        Handler = "console.log('Convert'); return value;"
    }
});
    The graph is getting messed up when i change the model field as described above.
    below is the attachment of the graph:

    Click image for larger version.  Name: graph4.PNG  Views: 13  Size: 16.8 KB  ID: 6647
  8. #8
    Jul 29, 2013, 4:59 AM
    Does it work with this Convert function?

    model.Fields.Add(new ModelField(column, ModelFieldType.Float)
{
    Convert =
    {
        Handler = @"if (typeof v === 'number') {
                        return v;
                   }
                   return v !== undefined && v !== null && v !== '' ?
                        parseFloat(String(v).replace(Ext.data.Types.stripRe, ''), 10) : (this.useNull ? null : 0);"
    }
});
  9. #9
    Jul 29, 2013, 5:57 AM
    Quote Originally Posted by Daniil View Post
    Does it work with this Convert function?

    model.Fields.Add(new ModelField(column, ModelFieldType.Float)
{
    Convert =
    {
        Handler = @"if (typeof v === 'number') {
                        return v;
                   }
                   return v !== undefined && v !== null && v !== '' ?
                        parseFloat(String(v).replace(Ext.data.Types.stripRe, ''), 10) : (this.useNull ? null : 0);"
    }
});
    Its throwing a script error:

    0x800a1391 - JavaScript runtime error: 'v' is undefined
  10. #10
    Jul 29, 2013, 6:24 AM
    Sorry, please try:
    model.Fields.Add(new ModelField(column, ModelFieldType.Float)
{
    Convert =
    {
        Handler = @"if (typeof value === 'number') {
                        return value;
                    }
                    return value !== undefined && value !== null && value !== '' ?
                        parseFloat(String(value).replace(Ext.data.Types.stripRe, ''), 10) : (this.useNull ? null : 0);"
    }
});
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] Vertical Marker on partial line series
    By cwolcott in forum 2.x Legacy Premium Help
    Replies: 7
    Last Post: Jun 26, 2013, 5:43 PM
  2. [CLOSED] Disable Line Series Tips
    By cwolcott in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 19, 2013, 4:12 PM
  3. 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
  4. [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
  5. [CLOSED] [#8] Chart: Hide Line Series values
    By cwolcott in forum 2.x Legacy Premium Help
    Replies: 12
    Last Post: Mar 14, 2013, 5:41 AM

Tags for this Thread

Posting Permissions