[CLOSED] chart display problem

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] chart display problem

    Hi,

    I create a panel to show my chart. I extract the data from codebehind and I add at the Store object. When I run my application I don't see nothing into the panel not even as error.
    <ext:Panel runat="server" Height="200" Layout="FitLayout" MarginSpec="0 0 3 0">
                                                <Items>
                                                    <ext:Chart 
                                                        ID="yieldChart" 
                                                        runat="server" 
                                                        Flex="1" 
                                                        Shadow="true" 
                                                        Animate="true">
                                                        <Store>
                                                            <ext:Store 
                                                                ID="yieldStore" 
                                                                runat="server" 
                                                                AutoDataBind="false">
                                                                <Model>
                                                                    <ext:Model runat="server">
                                                                        <Fields>
                                                                            <ext:ModelField Name="yield" Mapping="Yield" />
                                                                            <ext:ModelField Name="period" Mapping="Period" />
                                                                            <ext:ModelField Name="pnFirstPass" Mapping="PnFirstPass" Type="Int" />
                                                                            <ext:ModelField Name="pnFirstFail" Mapping="PnFirstFail" Type="Int" />
                                                                            <ext:ModelField Name="pnTotalPass" Mapping="PnTotalPass" Type="Int" />
                                                                        </Fields>
                                                                    </ext:Model>
                                                                </Model>
                                                            </ext:Store>
                                                        </Store>
                                                        <Axes>
                                                            <ext:NumericAxis Position="Left" Fields="yield" Minimum="0" Hidden="true" />
                                                            <ext:CategoryAxis Position="Bottom" Fields="period">
                                                                <Label Font="9px Arial">
                                                                    <Rotate Degrees="270" />
                                                                    <Renderer Handler="return Ext.String.ellipsis(value, 15, false);" />
                                                                </Label>
                                                            </ext:CategoryAxis>
                                                        </Axes> 
                            
                                                        <Series>
                                                            <ext:ColumnSeries 
                                                                Axis="Left" 
                                                                Highlight="true" 
                                                                XField="Name" 
                                                                YField="yield">
                                                                <Style Fill="#456d9f" />
                                                                <HighlightConfig Fill="#a2b5ca" />
                                                                <Label 
                                                                    Contrast="true" 
                                                                    Display="InsideEnd" 
                                                                    Field="yield" 
                                                                    Color="#000" 
                                                                    Orientation="Vertical" 
                                                                    TextAnchor="middle"
                                                                    />
                                                            </ext:ColumnSeries>
                                                        </Series>
                                                    </ext:Chart>
                                                </Items>
                                            </ext:Panel>
    In Codebehind
    yieldStore.DataSource = CreateYieldItems();
                    yieldStore.DataBind();
    Can you help me?
    Thank you so much for your support
    Last edited by Daniil; Sep 03, 2012 at 11:10 AM. Reason: Please use [CODE] tags, [CLOSED]
  2. #2
    Hi,

    I see
    XField="Name"
    for the ColumnSeries, but I can't see such ModelField.

    Also why did you set up this
    Hidden="true"
    for for NumericAxis?

    If you would remove it, you will see this Axis.

    The rest things depends on the data that you bind to the Store. Please demonstrate what data you bind to the Store or just provide a full sample to reproduce.
  3. #3

    display problem of chart

    Hi,

    I removed the Hidden=true for NumericAxis so I can see the Axis but I don't see the data into the chart. I attached an example below that it shows as I load the data into the store.

    <%@ Page Language = "C#"%>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
    	public class MonitorViewer
    	{
    		private double yieldValue;
    		private int pnFirstOk;
    		private int pnFirstKo;
    		private int pnTotalPass;
    		private string period;
    		
    		public MonitorViewer() {}
    		
    		public double YieldValue {
    			get { return yieldValue; }
    			set { yieldValue = value; }
    		}
    		
    		public int PnFirstOk {
    			get { return pnFirstOk; }
    			set { pnFirstOk = value; }
    		}
    		
    		public int PnFirstKo {
    			get { return pnFirstKo; }
    			set { pnFirstKo = value; }
    		}
    		
    		public int PnTotalPass {
    			get { return pnTotalPass; }
    			set { pnTotalPass = value; }
    		}
    		
    		public string Period {
    			get { return period; }
    			set { period = value; }
    		}
    	}
    	
    	public object[] DataValue () {
    			IList<MonitorViewer> listItems = new List<MonitorViewer>();
    			MonitorViewer monitorViewer1 = new MonitorViewer();
    			monitorViewer1.YieldValue = Double.Parse("95,97");
    			monitorViewer1.Period= "30/03/12 - 20/04/12";
    			monitorViewer1.PnFirstOk = 7507;
    			monitorViewer1.PnFirstKo = 315;
    			monitorViewer1.PnTotalPass = 7994;
    			
    			MonitorViewer monitorViewer2 = new MonitorViewer();
    			monitorViewer2.YieldValue = Double.Parse("96,68");
    			monitorViewer2.Period= "20/04/12 - 12/05/12";
    			monitorViewer2.PnFirstOk = 5995;
    			monitorViewer2.PnFirstKo = 206;
    			monitorViewer2.PnTotalPass = 6504;
    			
    			MonitorViewer monitorViewer3 = new MonitorViewer();
    			monitorViewer3.YieldValue = Double.Parse("95,91");
    			monitorViewer3.Period= "12/05/12 - 03/06/12";
    			monitorViewer3.PnFirstOk = 9732;
    			monitorViewer3.PnFirstKo = 415;
    			monitorViewer3.PnTotalPass = 10209;
    			
    			MonitorViewer monitorViewer4 = new MonitorViewer();
    			monitorViewer4.YieldValue = Double.Parse("96,09");
    			monitorViewer4.Period= "03/06/12 - 24/06/12";
    			monitorViewer4.PnFirstOk = 6710;
    			monitorViewer4.PnFirstKo = 273;
    			monitorViewer4.PnTotalPass = 7309;
    			
    			MonitorViewer monitorViewer5 = new MonitorViewer();
    			monitorViewer5.YieldValue = Double.Parse("96,29");
    			monitorViewer5.Period= "24/06/12 - 16/07/12";
    			monitorViewer5.PnFirstOk = 1922;
    			monitorViewer5.PnFirstKo = 74;
    			monitorViewer5.PnTotalPass = 2021;
    			
    			MonitorViewer monitorViewer6 = new MonitorViewer();
    			monitorViewer6.YieldValue = Double.Parse("0,0");
    			monitorViewer6.Period= "16/07/12 - 07/08/12";
    			monitorViewer6.PnFirstOk = 0;
    			monitorViewer6.PnFirstKo = 0;
    			monitorViewer6.PnTotalPass = 0;
    			
    			MonitorViewer monitorViewer7 = new MonitorViewer();
    			monitorViewer7.YieldValue = Double.Parse("0,0");
    			monitorViewer7.Period= "07/08/12 - 28/08/12";
    			monitorViewer7.PnFirstOk = 0;
    			monitorViewer7.PnFirstKo = 0;
    			monitorViewer7.PnTotalPass = 0;
    			
    			listItems.Add(monitorViewer1);
    			listItems.Add(monitorViewer2);
    			listItems.Add(monitorViewer3);
    			listItems.Add(monitorViewer4);
    			listItems.Add(monitorViewer5);
    			listItems.Add(monitorViewer6);
    			listItems.Add(monitorViewer7);
    			
    			object[] periodArray = new object[listItems.Count];
    			for (int i = 0;i < listItems.Count;i++) {
    				MonitorViewer monitorViewer = listItems[i];
    				object[] itemArray = new object[]{monitorViewer.YieldValue,monitorViewer.Period,monitorViewer.PnFirstOk,monitorViewer.PnFirstKo,monitorViewer.PnTotalPass};
    				
    				periodArray[i] = itemArray;
    			}
    			return periodArray;
    		}
    </script>
    
    <body>
    	<form Method=post Runat="server">
    		<ext:ResourceManager Id="resourceManager" runat="server" />
    			<ext:Panel runat="server" Height="200" Layout="FitLayout" MarginSpec="0 0 3 0">
    			    <Items>
    			        <ext:Chart 
    			            ID="yieldChart" 
    			            runat="server" 
    			            Flex="1" 
    			            Shadow="true" 
    			            Animate="true">
    						<Store>
    			                <ext:Store 
    			                    ID="yieldStore" 
    			                    runat="server" 
    			                    Data="<%# DataValue() %>"
    			                    AutoDataBind="false">
    			                    <Model>
    			                        <ext:Model runat="server">
    			                            <Fields>
    			                                <ext:ModelField Name="yield" Mapping="Yield" />
    			                                <ext:ModelField Name="period" Mapping="Period" />
    			                                <ext:ModelField Name="pnFirstPass" Mapping="PnFirstPass" Type="Int" />
    			                                <ext:ModelField Name="pnFirstFail" Mapping="PnFirstFail" Type="Int" />
    			                                <ext:ModelField Name="pnTotalPass" Mapping="PnTotalPass" Type="Int" />
    			                            </Fields>
    			                        </ext:Model>
    			                    </Model>
    			                </ext:Store>
    						</Store>
    			            <Axes>
    			                <ext:NumericAxis Position="Left" Fields="yield" Minimum="0" />
    			                <ext:CategoryAxis Position="Bottom" Fields="period">
    			                    <Label Font="9px Arial">
    			                        <Rotate Degrees="270" />
    			                        <Renderer Handler="return Ext.String.ellipsis(value, 15, false);" />
    			                    </Label>
    			                </ext:CategoryAxis>
    			            </Axes> 
    			
    			            <Series>
    			                <ext:ColumnSeries 
    			                    Axis="Left" 
    			                    Highlight="true" 
    			                    XField="Period" 
    			                    YField="yield">
    			                    <Style Fill="#456d9f" />
    			                    <HighlightConfig Fill="#a2b5ca" />
    			                    <Label 
    			                        Contrast="true" 
    			                        Display="InsideEnd" 
    			                        Field="yield" 
    			                        Color="#000" 
    			                        Orientation="Vertical" 
    			                        TextAnchor="middle"
    			                        />
    			                </ext:ColumnSeries>
    			            </Series>
    			        </ext:Chart>
    			    </Items>
    			</ext:Panel>
        </form>
    </Body>
    </Html>
    Thank you so much for your support.
  4. #4
    Please edit your post adding a closing [/CODE] tag at the end of the code.

    The sample doesn't reproduce the issue on my side, it renders the ColumnSeries.

    Please try to update from the 2.1 branch and retest.
    http://svn.ext.net/premium/branches/2.1/
  5. #5

    display problem of chart

    with the code previously posted I see the chart on my side as you can see into the image attached below. it's same on your side or you can see the columns and field label on x axis ?

    Click image for larger version. 

Name:	Immagine.jpg 
Views:	63 
Size:	11.9 KB 
ID:	4693

    Thanks
  6. #6
    I see this.
    Click image for larger version. 

Name:	1.JPG 
Views:	67 
Size:	26.1 KB 
ID:	4694

    Seems you have missed this comment.
    Quote Originally Posted by Daniil View Post
    Please edit your post adding a closing [/CODE] tag at the end of the code.
  7. #7

    chart display problem

    Hi,

    I removed the Mapping property into ModelField, now I can see the columns into the chart

    <ext:ModelField Name="yield" Mapping="Yield" />
    <ext:ModelField Name="period" Mapping="Period" />
    <ext:ModelField Name="pnFirstPass" Mapping="PnFirstPass" Type="Int" />
    <ext:ModelField Name="pnFirstFail" Mapping="PnFirstFail" Type="Int" />
    <ext:ModelField Name="pnTotalPass" Mapping="PnTotalPass" Type="Int" />
    
    <ext:ModelField Name="yield"  />
    <ext:ModelField Name="period"  />
    <ext:ModelField Name="pnFirstPass" Type="Int" />
    <ext:ModelField Name="pnFirstFail"  Type="Int" />
    <ext:ModelField Name="pnTotalPass" Type="Int" />
    Why the mapping property generates this problem on my side?

    I have another problem. I want generate the chart after I clicked on button, if I put the following code into the buttonEvent

    yieldStore.DataSource = CreateYieldItems();
    yieldStore.DataBind();
    I can't see the chart, if I put same code into the pageLoad instead it works.

    Can you help me for this issue?

    Thank you so much.
  8. #8
    Please clarify are you missing these comments?

    Quote Originally Posted by Daniil View Post
    Please edit your post adding a closing [/CODE] tag at the end of the code.
    Quote Originally Posted by Daniil View Post
    Seems you have missed this comment.

    Quote Originally Posted by Daniil View Post
    Please edit your post adding a closing [/CODE] tag at the end of the code.
  9. #9
    I'm sorry it was a mistake, now I corrected the error and I hope that now it's ok.
    I thought the warning that you posted for [/CODE] tag was referred at the code with example that I posted earlier.
  10. #10
    Thanks for editing.

    Quote Originally Posted by tactime10 View Post
    I removed the Mapping property into ModelField, now I can see the columns into the chart

    <ext:ModelField Name="yield" Mapping="Yield" />
    <ext:ModelField Name="period" Mapping="Period" />
    <ext:ModelField Name="pnFirstPass" Mapping="PnFirstPass" Type="Int" />
    <ext:ModelField Name="pnFirstFail" Mapping="PnFirstFail" Type="Int" />
    <ext:ModelField Name="pnTotalPass" Mapping="PnTotalPass" Type="Int" />
    
    <ext:ModelField Name="yield"  />
    <ext:ModelField Name="period"  />
    <ext:ModelField Name="pnFirstPass" Type="Int" />
    <ext:ModelField Name="pnFirstFail"  Type="Int" />
    <ext:ModelField Name="pnTotalPass" Type="Int" />
    Why the mapping property generates this problem on my side?
    I think because you bind arrays of arrays. In this case you should configure the Store with an ArrayReader. For default JsonReader you should bind arrays of objects. In this case your Mappings should work.

    Here are more details about the Mapping option.
    http://docs.sencha.com/ext-js/4-1/#!...ld-cfg-mapping

    Quote Originally Posted by tactime10 View Post
    I have another problem. I want generate the chart after I clicked on button, if I put the following code into the buttonEvent

    yieldStore.DataSource = CreateYieldItems();
    yieldStore.DataBind();
    I can't see the chart, if I put same code into the pageLoad instead it works.

    Can you help me for this issue?
    Please provide a sample. We will do our best to investigate.
Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 0
    Last Post: Aug 17, 2012, 6:54 AM
  2. Problem with Ext.Net Chart - Column
    By OCaglayan in forum 2.x Help
    Replies: 1
    Last Post: Jul 31, 2012, 12:43 PM
  3. This is a bug?Chart problem···
    By jiaxiang8756 in forum 2.x Help
    Replies: 4
    Last Post: Jul 17, 2012, 7:14 PM
  4. [CLOSED] Problem with chart controls and coolite
    By Pablo_Azevedo in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Jan 12, 2012, 4:12 PM
  5. [CLOSED] Problem with DirectMethod and ActiveX (MS Chart)
    By nhg_itd in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Sep 26, 2011, 5:01 AM

Posting Permissions