[FIXED] [#367] [2.x] Does chart curve control support multi Y axis?

  1. #1

    [FIXED] [#367] [2.x] Does chart curve control support multi Y axis?

    I found chart curve control support double Y axis, one at left and another at right.

    Does chart curve control support multi Y axis ? for example, 3 Y axis at left. as follows:
    Click image for larger version. 

Name:	MultiY.png 
Views:	23 
Size:	86.7 KB 
ID:	6906
    Last edited by Daniil; Oct 31, 2013 at 6:17 AM. Reason: [OPEN] [#367]
  2. #2
    Hi @wangyi,

    Please look at the example.
    https://examples2.ext.net/#/Chart/Line/Multiple_Axes/

    There are two Y axes. One on the left, another on the right. If needed, they should be possible to position on one side, setting up its an Axis's Position property.
  3. #3

    the line does not appear

    When I set the second axis Position="Left" , the line chart the line does not appear.
    Please help me and give the demo code.


    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="LineChart2.aspx.cs" Inherits="Project_Demo_Chart_LineChart2" %>
    <%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
       <ext:ResourceManager ID="ResourceManager1" runat="server" />
    
       <ext:Panel ID="Panel1" 
                runat="server"
                Title="曲线_双Y轴"
                Height="400"
                Layout="FitLayout">
                <Items>
                    <ext:Chart 
                        ID="Chart1" 
                        runat="server" 
                        Animate="true">
                        <Store>
                            <ext:Store ID="Store1" runat="server">
                                <Model>
                                    <ext:Model ID="Model1" runat="server">
                                        <Fields>
                                            <ext:ModelField Name="Date" Type="Date" />
                                            <ext:ModelField Name="Data1" />
                                            <ext:ModelField Name="Data2" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                            </ext:Store>
                        </Store>
                        <Axes>
                            <ext:TimeAxis 
                                AxisID="XAxis"
                                Fields="Date" 
                                Position="Bottom" 
                                DateFormat="dd"
                                Constrain="true"
                                FromDate="<%# startTime %>"
                                ToDate="<%# endTime %>"
                                AutoDataBind="true" />
    
                            <ext:NumericAxis 
                                AxisID="YAxis1"
                                Fields="Data1" 
                                Position="Left" 
                                Grid="true">
                                <LabelTitle Fill="#115fa6" />
                                <Label Fill="#115fa6" />
                            </ext:NumericAxis>
    
                            <ext:NumericAxis 
                                AxisID=" YAxis2" 
                                Fields="Data2" 
                                Position="Left" >
                                <LabelTitle Fill="#94ae0a" />
                                <Label Fill="#94ae0a" />
                            </ext:NumericAxis>
                        </Axes>
                        <Series>
                            <ext:LineSeries 
                                Titles="指标1" 
                                XField="Date" 
                                YField="Data1" 
                                Axes="YAxis1"
                                Smooth="3">
                                <HighlightConfig Size="7" Radius="7" />
                                <MarkerConfig Size="4" Radius="4" StrokeWidth="0" />
                                <%--鼠标提示--%>
                                <Tips ID="Tips1" runat="server" TrackMouse="true" Width="100" Height="25">                            
                                    <Renderer Handler="this.setTitle(Ext.util.Format.date(storeItem.get('Date'), 'y-m-d') + ':' + storeItem.get('Data1'));"></Renderer>
                                </Tips>
                            </ext:LineSeries>
    
                            <ext:LineSeries 
                                Titles="指标2" 
                                XField="Date"  
                                YField="Data2"  
                                Axes="YAxis2"        
                                Smooth="3">
                                <HighlightConfig Size="7" Radius="7" />
                                <MarkerConfig Size="4" Radius="4" StrokeWidth="0" />
                                <%--鼠标提示--%>
                                <Tips ID="Tips2" runat="server" TrackMouse="true" Width="100" Height="25">                            
                                    <Renderer Handler="this.setTitle(Ext.util.Format.date(storeItem.get('Date'), 'y-m-d') + ':' + storeItem.get('Data2'));"></Renderer>
                                </Tips>
                            </ext:LineSeries>
                        </Series>
                        <LegendConfig Position="Bottom" />
                    </ext:Chart>
                </Items>
            </ext:Panel>
    
    
        </form>
    </body>
    </html>
    
    
    .cs code:
    
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using Ext.Net;
    
    public partial class Project_Demo_Chart_LineChart2 : System.Web.UI.Page
    {
        public DateTime startTime = new DateTime();
        public DateTime endTime = new DateTime();
        protected void Page_Load(object sender, EventArgs e)
        {
            startTime = DateTime.Parse(DateTime.Now.Year + "-" + DateTime.Now.Month + "-01");
            endTime = DateTime.Parse(DateTime.Now.Year + "-" + DateTime.Now.Month + "-" + DateTime.DaysInMonth(DateTime.Now.Year, DateTime.Now.Month));
    
            if (!X.IsAjaxRequest)
            { 
                Store s = this.Chart1.GetStore();
                s.DataSource = this.GenerateData(startTime, endTime);
                s.DataBind();
            }
    
        }
    
        private List<object> GenerateData(DateTime startTime, DateTime endTime)
        {
            List<object> data = new List<object>();
            Random random = new Random();
            double p = (random.NextDouble() * 11) + 1;
    
    
            while (startTime <= endTime)
            {
                if (startTime < DateTime.Now)
                {
                    data.Add(new
                    {
                        Date = startTime,
                        Data1 = Math.Round(random.NextDouble() * 10),
                        Data2 = Math.Round(random.NextDouble() * 100)
                    });
                }
                else
                {
                    data.Add(new
                    {
                        Date = startTime,
                        Data1 = Math.Round(random.NextDouble() * 10)
                    });
                }
                startTime = startTime.AddDays(1);
            }
    
            return data;
        }
    }
  4. #4

    Does the chart curve control support multi Y axis on one side???

    Does the chart curve control support multi Y axis on one side ??? help.
  5. #5
    Your test case throws the following error for me.
    Parser Error Message: Cannot create an object of type 'Ext.Net.Position[]' from its string representation 'YAxis1' for the 'Axes' property.

    It is due to this LineSeries's setting:
    Axes="YAxis1"
    There is no Axes property in the LineSeries. I am not sure what you meant.
  6. #6
    Quote Originally Posted by wangyi View Post
    Does the chart curve control support multi Y axis on one side ??? help.
    I am afraid it doesn't. I will check if we can do something here.
  7. #7
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="LineChart2.aspx.cs" Inherits="Project_Demo_Chart_LineChart2" %>
    <%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
       <ext:ResourceManager ID="ResourceManager1" runat="server" />
     
       <ext:Panel ID="Panel1"
                runat="server"
                Title="曲线_双Y轴"
                Height="400"
                Layout="FitLayout">
                <Items>
                    <ext:Chart
                        ID="Chart1"
                        runat="server"
                        Animate="true">
                        <Store>
                            <ext:Store ID="Store1" runat="server">
                                <Model>
                                    <ext:Model ID="Model1" runat="server">
                                        <Fields>
                                            <ext:ModelField Name="Date" Type="Date" />
                                            <ext:ModelField Name="Data1" />
                                            <ext:ModelField Name="Data2" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                            </ext:Store>
                        </Store>
                        <Axes>
                            <ext:TimeAxis
                                AxisID="XAxis"
                                Fields="Date"
                                Position="Bottom"
                                DateFormat="dd"
                                Constrain="true"
                                FromDate="<%# startTime %>"
                                ToDate="<%# endTime %>"
                                AutoDataBind="true" />
     
                            <ext:NumericAxis
                                AxisID="YAxis1"
                                Fields="Data1"
                                Position="Left"
                                Grid="true">
                                <LabelTitle Fill="#115fa6" />
                                <Label Fill="#115fa6" />
                            </ext:NumericAxis>
     
                            <ext:NumericAxis
                                AxisID=" YAxis2"
                                Fields="Data2"
                                Position="Left" >
                                <LabelTitle Fill="#94ae0a" />
                                <Label Fill="#94ae0a" />
                            </ext:NumericAxis>
                        </Axes>
                        <Series>
                            <ext:LineSeries
                                Titles="指标1"
                                XField="Date"
                                YField="Data1"
                                Smooth="3">
                                <HighlightConfig Size="7" Radius="7" />
                                <MarkerConfig Size="4" Radius="4" StrokeWidth="0" />
                                <%--鼠标提示--%>
                                <Tips ID="Tips1" runat="server" TrackMouse="true" Width="100" Height="25">                            
                                    <Renderer Handler="this.setTitle(Ext.util.Format.date(storeItem.get('Date'), 'y-m-d') + ':' + storeItem.get('Data1'));"></Renderer>
                                </Tips>
                            </ext:LineSeries>
     
                            <ext:LineSeries
                                Titles="指标2"
                                XField="Date" 
                                YField="Data2" 
                                Smooth="3">
                                <HighlightConfig Size="7" Radius="7" />
                                <MarkerConfig Size="4" Radius="4" StrokeWidth="0" />
                                <%--鼠标提示--%>
                                <Tips ID="Tips2" runat="server" TrackMouse="true" Width="100" Height="25">                            
                                    <Renderer Handler="this.setTitle(Ext.util.Format.date(storeItem.get('Date'), 'y-m-d') + ':' + storeItem.get('Data2'));"></Renderer>
                                </Tips>
                            </ext:LineSeries>
                        </Series>
                        <LegendConfig Position="Bottom" />
                    </ext:Chart>
                </Items>
            </ext:Panel>
     
     
        </form>
    </body>
    </html>
    .cs code:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using Ext.Net;
     
    public partial class Project_Demo_Chart_LineChart2 : System.Web.UI.Page
    {
        public DateTime startTime = new DateTime();
        public DateTime endTime = new DateTime();
        protected void Page_Load(object sender, EventArgs e)
        {
            startTime = DateTime.Parse(DateTime.Now.Year + "-" + DateTime.Now.Month + "-01");
            endTime = DateTime.Parse(DateTime.Now.Year + "-" + DateTime.Now.Month + "-" + DateTime.DaysInMonth(DateTime.Now.Year, DateTime.Now.Month));
     
            if (!X.IsAjaxRequest)
            { 
                Store s = this.Chart1.GetStore();
                s.DataSource = this.GenerateData(startTime, endTime);
                s.DataBind();
            }
     
        }
     
        private List<object> GenerateData(DateTime startTime, DateTime endTime)
        {
            List<object> data = new List<object>();
            Random random = new Random();
            double p = (random.NextDouble() * 11) + 1;
     
     
            while (startTime <= endTime)
            {
                if (startTime < DateTime.Now)
                {
                    data.Add(new
                    {
                        Date = startTime,
                        Data1 = Math.Round(random.NextDouble() * 10),
                        Data2 = Math.Round(random.NextDouble() * 100)
                    });
                }
                else
                {
                    data.Add(new
                    {
                        Date = startTime,
                        Data1 = Math.Round(random.NextDouble() * 10)
                    });
                }
                startTime = startTime.AddDays(1);
            }
     
            return data;
        }
    }
    Last edited by Daniil; Oct 31, 2013 at 6:01 AM. Reason: Please use [CODE] tags
  8. #8
    Alas, the Chart package supports the only axis per position.

    I posted a feature request on the Sencha forum.
    http://www.sencha.com/forum/showthread.php?275032

    Created an Issue to monitor it.
    https://github.com/extnet/Ext.NET/issues/367
  9. #9
    Hello!

    Sencha claims this as fixed for at least a couple release iterations so far, so I believe we're safe to mark this issue as done (implemented). The charts' functionality really evolved a lot between 2.x and 3.x versions!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] Ext.Net chart - two sided Y axis
    By velusoft in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Sep 01, 2015, 2:39 PM
  2. [OPEN] [#252] Axis color in Chart
    By livehealthierGF in forum 2.x Legacy Premium Help
    Replies: 9
    Last Post: May 29, 2013, 3:54 AM
  3. [OPEN] [#192] Chart axis setTitle
    By bayoglu in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Apr 10, 2013, 6:02 PM
  4. Replies: 2
    Last Post: Aug 13, 2012, 2:12 PM
  5. Replies: 2
    Last Post: Jul 02, 2009, 4:16 PM

Tags for this Thread

Posting Permissions