[CLOSED] Chart Bar with null values

  1. #1

    [CLOSED] Chart Bar with null values

    Hello everyone

    I build a bar chart and I have a problem with null values. If I send null values in the store, they are convert as 0. So, It'll be impossible to make the difference between null value (so no value available at all for this category) and when value = 0.

    I need this because my chart describes the consumption of differents city :
    • I have a bill with 0$ for the selected period, I need to show 0.
    • I have a no bill for the selected period, I need to show nothing, an empty place.


    Does anyone have an idea to do this?
    Last edited by Daniil; Jul 17, 2015 at 4:38 PM. Reason: [CLOSED]
  2. #2
    Hello,

    I cannot reproduce it testing with http://examples2.ext.net/#/Chart/Bar/Basic/

    Can you please provide a small code sample?
  3. #3
    In your example, there is values for each month.
    If you put "null" for a month as value, you'll see that you'll get a 0 value, not a hidden bar.
  4. #4
    Yes, actually the value will be shown as a bar labeled with null much like a zero value. But this does not mean the null value is converted to zero.

    So, if you do not want null data in the chart , why don't you filter them (i.e. remove them from the data set) before binding to the store?
  5. #5
    I use a datable to bind my store.
    So if I put nothing in field for a row, it'll be a "null" value.

    With a gridpanel store and the same datatable, null value stays null value but not with a chart store.
  6. #6
    With a gridpanel store and the same datatable, null value stays null value but not with a chart store.
    I don't think there is a conversion from null to zero. It is just the chart component that renders null values the same way with zero values. What I meant, was to filter the data table before binding it to the store, which shouldn't be a problem to do in your code behind or you can even have the store filter null data:

    <%@ Page Language="C#" AutoEventWireup="true" %>
    
    <script runat="server">
        public class ChartData
        {
            public string Name
            {
                get;
                set;
            }
    
            public double? Data1
            {
                get;
                set;
            }
    
            public static List<ChartData> GenerateData()
            {
                return new List<ChartData>
                {
                    new ChartData {
                        Name = "City 1" ,
                        Data1 = 0
                    },
                    new ChartData {
                        Name = "City 2" ,
                        Data1 = 200
                    },
                    new ChartData {
                        Name = "City 3" ,
                        Data1 = 300
                    },
                    new ChartData {
                        Name = "City 4" ,
                        Data1 = null
                    }                                                
                };
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
       <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <ext:ChartTheme runat="server" ThemeName="CustomBlue">
                <Axis Stroke="#084594" />
                <AxisLabelLeft Fill="rgb(8,69,148)" Font="12px Arial" FontFamily="Arial" />
                <AxisLabelBottom Fill="rgb(8,69,148)" Font="12px Arial" FontFamily="Arial" />
                <AxisTitleLeft Font="bold 18px Arial" />
                <AxisTitleBottom Font="bold 18px Arial" />
            </ext:ChartTheme>
    
            <ext:Panel 
                runat="server"
                Title="Bar Chart"
                Width="800"
                Height="600"
                Layout="FitLayout">
                <Items>
                    <ext:Chart 
                        ID="Chart1" 
                        runat="server"
                        Shadow="true"
                        Theme="CustomBlue"
                        Animate="true">
                        <Store>
                            <ext:Store 
                                runat="server" 
                                Data="<%# ChartData.GenerateData() %>" 
                                AutoDataBind="true">                           
                                <Model>
                                    <ext:Model runat="server">
                                        <Fields>
                                            <ext:ModelField Name="Name" />
                                            <ext:ModelField Name="Data1" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                                <Listeners>
                                    <Load Handler="this.filterBy(function(record) { return record.get('Data1') != null; });" />
                                </Listeners>
                            </ext:Store>
                        </Store>
    
                        <Background>
                            <Gradient GradientID="backgroundGradient" Angle="45">
                                <Stops>
                                    <ext:GradientStop Offset="0" Color="#ffffff" />
                                    <ext:GradientStop Offset="100" Color="#eaf1f8" />
                                </Stops>
                            </Gradient>
                        </Background>
    
                        <Axes>
                            <ext:NumericAxis                             
                                Fields="Data1"
                                Position="Bottom"
                                Grid="true"
                                Title="Y"
                                Minimum="0">
                                <Label>
                                    <Renderer Handler="return Ext.util.Format.number(value, '0,0');" />
                                </Label>
                            </ext:NumericAxis>                            
    
                            <ext:CategoryAxis 
                                Fields="Name"
                                Position="Left"
                                Title="X"
                                />                            
                        </Axes>
    
                        <Series>
                            <ext:BarSeries 
                                Axis="Bottom"
                                Highlight="true" 
                                XField="Name" 
                                YField="Data1">
                                <Tips TrackMouse="true" Width="140" Height="28">
                                    <Renderer Handler="this.setTitle(storeItem.get('Name') + ': ' + storeItem.get('Data1'));" />
                                </Tips>
                                <Label 
                                    Display="InsideEnd" 
                                    Field="Data1" 
                                    Orientation="Horizontal" 
                                    Color="#333" 
                                    TextAnchor="middle"
                                    />
                            </ext:BarSeries>
                        </Series>
                    </ext:Chart>
                </Items>
            </ext:Panel>
        </form>  
    </body>
    </html>

    This record will not be in the chart:
    new ChartData {
        Name = "City 4" ,
        Data1 = null
    }

    Hope it helps.
    Last edited by Dimitris; Jul 02, 2015 at 2:55 PM.
  7. #7
    This not not exactly what I asked in the first message.

    I have different cities AND different periods (Data1 and Data2 for example for 2 periods).
    This is an example :

    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <%@ Page Language="C#" AutoEventWireup="true" %>
    
    <script runat="server">
        public class ChartData
        {
            public string Name
            {
                get;
                set;
            }
    
            public double? Data1
            {
                get;
                set;
            }
            
            public double? Data2
            {
                get;
                set;
            }
    
            public static List<ChartData> GenerateData()
            {
                return new List<ChartData>
                {
                    new ChartData {
                        Name = "City 1" ,
                        Data1 = 50,
                        Data2 = 0
                    },
                    new ChartData {
                        Name = "City 2" ,
                        Data1 = 200,
                        Data2 = 50
                    },
                    new ChartData {
                        Name = "City 3" ,
                        Data1 = 300,
                        Data2 = 150
                    },
                    new ChartData {
                        Name = "City 4" ,
                        Data1 = null,
                        Data2 = 100
                    }                                                
                };
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title></title>
    </head>
    <body>
       <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
    
            <ext:ChartTheme ID="ChartTheme1" runat="server" ThemeName="CustomBlue">
                <Axis Stroke="#084594" />
                <AxisLabelLeft Fill="rgb(8,69,148)" Font="12px Arial" FontFamily="Arial" />
                <AxisLabelBottom Fill="rgb(8,69,148)" Font="12px Arial" FontFamily="Arial" />
                <AxisTitleLeft Font="bold 18px Arial" />
                <AxisTitleBottom Font="bold 18px Arial" />
            </ext:ChartTheme>
    
            <ext:Panel ID="Panel1" 
                runat="server"
                Title="Bar Chart"
                Width="800"
                Height="600"
                Layout="FitLayout">
                <Items>
                    <ext:Chart 
                        ID="Chart1" 
                        runat="server"
                        Shadow="true"
                        Theme="CustomBlue"
                        Animate="true">
                        <Store>
                            <ext:Store ID="Store1" 
                                runat="server" 
                                Data="<%# ChartData.GenerateData() %>" 
                                AutoDataBind="true">                           
                                <Model>
                                    <ext:Model ID="Model1" runat="server">
                                        <Fields>
                                            <ext:ModelField Name="Name" />
                                            <ext:ModelField Name="Data1" />
                                            <ext:ModelField Name="Data2" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                                <Listeners>
                                    <Load Handler="this.filterBy(function(record) { return record.get('Data1') != null || record.get('Data2') != null;; });" />
                                </Listeners>
                            </ext:Store>
                        </Store>
    
                        <Background>
                            <Gradient GradientID="backgroundGradient" Angle="45">
                                <Stops>
                                    <ext:GradientStop Offset="0" Color="#ffffff" />
                                    <ext:GradientStop Offset="100" Color="#eaf1f8" />
                                </Stops>
                            </Gradient>
                        </Background>
    
                        <Axes>
                            <ext:NumericAxis                             
                                Fields="Data1,Data2"
                                Position="Bottom"
                                Grid="true"
                                Title="Y"
                                Minimum="0">
                                <Label>
                                    <Renderer Handler="return Ext.util.Format.number(value, '0,0');" />
                                </Label>
                            </ext:NumericAxis>                            
    
                            <ext:CategoryAxis 
                                Fields="Name"
                                Position="Left"
                                Title="X"
                                />                            
                        </Axes>
    
                        <Series>
                            <ext:BarSeries 
                                Axis="Bottom"
                                Highlight="true" 
                                XField="Name" 
                                YField="Data1,Data2">
                            </ext:BarSeries>
                        </Series>
                    </ext:Chart>
                </Items>
            </ext:Panel>
        </form>  
    </body>
    </html>
    And It gave me this :

    Click image for larger version. 

Name:	2015-07-03 09-58-49.png 
Views:	3 
Size:	38.8 KB 
ID:	24055

    you can see there is no difference betwenn the Data2 in City 1 and the Data1 in City 4, it displays a zero bar even if for City1 it is zero and for City 4 a null value.
    How can I hide the bar whith null value because if I want to read the store, both value are zero.
  8. #8
    Any Ideas @Dimitris ?
  9. #9
    Hi, yes, this should do:

    <%@ Page Language="C#" AutoEventWireup="true" %>
    
    <script runat="server">
        public class ChartData
        {
            public string Name
            {
                get;
                set;
            }
    
            public double? Data1
            {
                get;
                set;
            }
    
            public double? Data2
            {
                get;
                set;
            }
    
            public static List<ChartData> GenerateData()
            {
                return new List<ChartData>
                {
                    new ChartData {
                        Name = "City 1" ,
                        Data1 = 50,
                        Data2 = 0
                    },
                    new ChartData {
                        Name = "City 2" ,
                        Data1 = 200,
                        Data2 = 50
                    },
                    new ChartData {
                        Name = "City 3" ,
                        Data1 = 300,
                        Data2 = 150
                    },
                    new ChartData {
                        Name = "City 4" ,
                        Data1 = null,
                        Data2 = 100
                    }                                                 
                };
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
       <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <ext:ChartTheme runat="server" ThemeName="CustomBlue">
                <Axis Stroke="#084594" />
                <AxisLabelLeft Fill="rgb(8,69,148)" Font="12px Arial" FontFamily="Arial" />
                <AxisLabelBottom Fill="rgb(8,69,148)" Font="12px Arial" FontFamily="Arial" />
                <AxisTitleLeft Font="bold 18px Arial" />
                <AxisTitleBottom Font="bold 18px Arial" />
            </ext:ChartTheme>
    
            <ext:Panel 
                runat="server"
                Title="Bar Chart"
                Width="800"
                Height="600"
                Layout="FitLayout">
                <Items>
                    <ext:Chart 
                        ID="Chart1" 
                        runat="server"
                        Shadow="true"
                        Animate="true"
                        Theme="CustomBlue">
                        <Store>
                            <ext:Store 
                                runat="server" 
                                Data="<%# ChartData.GenerateData() %>" 
                                AutoDataBind="true">                           
                                <Model>
                                    <ext:Model runat="server">
                                        <Fields>
                                            <ext:ModelField Name="Name" />
                                            <ext:ModelField Name="Data1">
                                                <Convert Handler="return (value == null) ? undefined : value;" />
                                            </ext:ModelField>
                                            <ext:ModelField Name="Data2"/>
                                        </Fields>
                                    </ext:Model>
                                </Model>
                            </ext:Store>
                        </Store>
    
                        <Background>
                            <Gradient GradientID="backgroundGradient" Angle="45">
                                <Stops>
                                    <ext:GradientStop Offset="0" Color="#ffffff" />
                                    <ext:GradientStop Offset="100" Color="#eaf1f8" />
                                </Stops>
                            </Gradient>
                        </Background>
    
                        <Axes>
                            <ext:NumericAxis                             
                                Fields="Data1,Data2"
                                Position="Bottom"
                                Grid="true"
                                Minimum="0"
                                Title="Y">
                                <Label>
                                    <Renderer Handler="return Ext.util.Format.number(value, '0,0');" />
                                </Label>
                            </ext:NumericAxis>                            
    
                            <ext:CategoryAxis 
                                Fields="Name"
                                Position="Left"
                                Title="X"
                                />                            
                        </Axes>
    
                        <Series>
                            <ext:BarSeries 
                                Axis="Bottom"
                                Highlight="true" 
                                XField="Name" 
                                YField="Data1,Data2">
                            </ext:BarSeries>
                        </Series>
                    </ext:Chart>
                </Items>
            </ext:Panel>
        </form>  
    </body>
    </html>
    Hope it helps.

Similar Threads

  1. Replies: 3
    Last Post: Oct 25, 2014, 7:57 AM
  2. Replies: 1
    Last Post: Nov 07, 2013, 9:14 PM
  3. Replies: 1
    Last Post: Nov 07, 2013, 3:40 PM
  4. [CLOSED] Handle null values in line chart series
    By PriceRightHTML5team in forum 2.x Premium Help
    Replies: 12
    Last Post: Jul 29, 2013, 9:50 AM
  5. Null values in RowEditing V 2.0
    By billy in forum 2.x Help
    Replies: 0
    Last Post: Oct 11, 2012, 3:31 PM

Posting Permissions