What's New?

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

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Nov 14, 2012, 2:45 PM

    [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
    Nov 14, 2012, 3:40 PM
    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
    Nov 14, 2012, 3:58 PM
    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
    Nov 14, 2012, 4:24 PM
    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
    Nov 15, 2012, 2:30 AM
    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
    Nov 15, 2012, 9:07 AM
    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>

Similar Threads

  1. [FIXED] [#57] Am not Getting Radar Series Chart Dynamically.
    By nagesh in forum Bugs
    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 Legacy Premium Help
    Replies: 5
    Last Post: Dec 29, 2012, 11:15 AM
  3. [OPEN] [#77] Chart legend problems with large amount of series
    By MWM2Dev in forum 2.x Legacy Premium Help
    Replies: 14
    Last Post: Dec 21, 2012, 4:23 AM
  4. [CLOSED] chart series double click event
    By SymSure in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Sep 04, 2012, 2:03 PM
  5. [CLOSED] Scale on numeric X-axis not correct when having multiple line series
    By CarpFisher in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Jul 13, 2012, 10:28 AM

Tags for this Thread

Posting Permissions