EXT.NET 3.0.0 RELEASED!
Now with Tablet Support!
Ext.NET 3.0.0 is here with lots of new cool features and now with tablet support! Check Examples Explorer now to see it in action or download and test it yourself for free!
Page 2 of 2 FirstFirst 12
Results 11 to 18 of 18

Thread: [CLOSED] chart display problem

  1. #11
    Member
    Join Date
    Jun 2011
    Location
    naples
    Posts
    117
    if I run the following code

    Code:
    <%@ 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};
    				
    				periodArray[i] = itemArray;
    			}
    			return periodArray;
    		}
    		
    		public void Page_Load() {
    
    	        var store = this.yieldChart.GetStore();
    	        store.DataSource = DataValue();
    	        store.DataBind();
    		}
    		
    		protected void ExtractData(object sender, DirectEventArgs e) {
    		}
    </script>
    
    <body>
    	<form Method=post Runat="server">
    		<ext:ResourceManager Id="resourceManager" runat="server" />
    			<h3>Example</h3>
    			<br/>
    			<ext:Button ID="btnSearch" Text="Search" runat="server" Hidden="false" Icon="Magnifier" >
    				<DirectEvents>
    					<Click OnEvent="ExtractData">
    						<EventMask ShowMask="true" MinDelay="100"/>
    					</Click>
    				</DirectEvents>
    			</ext:Button>
    			<br/>
    			<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 runat="server">
                                <Model>
    			                        <ext:Model runat="server">
    			                            <Fields>
    											<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" />
    			                            </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="Period" 
    			                        Color="#000" 
    			                        Orientation="Vertical" 
    			                        TextAnchor="middle"
    			                        />
    			                </ext:ColumnSeries>
    			            </Series>
    			        </ext:Chart>
                        </Items>
                    </ext:Panel>
    			    </Items>
    			</ext:Panel>
        </form>
    </Body>
    </Html>
    I see this Click image for larger version. 

Name:	example.JPG 
Views:	31 
Size:	30.7 KB 
ID:	4701

    If I change the part of code as below

    Code:
    		public void Page_Load() {
    
    		}
    		
    		protected void ExtractData(object sender, DirectEventArgs e) {
    	           var store = this.yieldChart.GetStore();
    	           store.DataSource = DataValue();
    	           store.DataBind();
    		}
    I see this Click image for larger version. 

Name:	example1.JPG 
Views:	34 
Size:	22.3 KB 
ID:	4702
    after clicked on button search

    Thank you so much

  2. #12
    Ext.NET - Support Team Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    28,083
    Please define an ArrayReader for the Store as I mentioned here.

    Quote Originally Posted by Daniil View Post
    I think because you bind arrays of arrays. In this case you should configure the Store with an ArrayReader.
    Example
    Code:
    <ext:Store runat="server">
        <Reader>
            <ext:ArrayReader />
        </Reader>
    </ext:Store>
    Daniil
    Ext.NET, Inc.
    Support Team

    Ext.NET Examples | Ext.NET API Docs | ExtJS API Docs | Twitter | Jobs

  3. #13
    Member
    Join Date
    Jun 2011
    Location
    naples
    Posts
    117
    ok now it work.
    I see the ColumnSeries into the chart, but I don't see the LineSeries object that I just added into same chart and with same store
    that I use to show the columns
    Where is the issue?

    also I see the border with black color when the chart just rendered into the page.
    How can change the border?

    I attach code that show my problem
    Code:
    <%@ 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};
    				
    				periodArray[i] = itemArray;
    			}
    			return periodArray;
    		}
    		
    		public void Page_Load() {
    	        //var store = this.yieldChart.GetStore();
    	        //store.DataSource = DataValue();
    	        //store.DataBind();
    		}
    		
    		protected void ExtractData(object sender, DirectEventArgs e) {
    	        var store = this.yieldChart.GetStore();
    	        store.DataSource = DataValue();
    	        store.DataBind();
    		}
    </script>
    
    <body>
    	<form Method=post Runat="server">
    		<ext:ResourceManager Id="resourceManager" runat="server" />
    			<h3>Example</h3>
    			<br/>
    			<ext:Button ID="btnSearch" Text="Search" runat="server" Hidden="false" Icon="Magnifier" >
    				<DirectEvents>
    					<Click OnEvent="ExtractData">
    						<EventMask ShowMask="true" MinDelay="100"/>
    					</Click>
    				</DirectEvents>
    			</ext:Button>
    			<br/>
    	        <ext:ChartTheme 
    	            ID="CustomThemeID" 
    	            runat="server" 
    	            ThemeName="CustomTheme" 
    	            Colors="url(#blueColor),url(#greenColor),url(#redColor),url(#orangeColor)">
    	        </ext:ChartTheme>
    			<ext:Panel runat="server" Height="400" Layout="FitLayout" MarginSpec="0 0 3 0">
    			
    			    <Items>
    			        <ext:Chart 
    			            ID="yieldChart" 
    			            runat="server" 
    			            Flex="1" 
    			            Theme="CustomTheme"
    			            Shadow="true" 
    			            Animate="true">
    	
    						<Store>
                            <ext:Store runat="server">
    				            <Reader>
    				                <ext:ArrayReader >
    				                </ext:ArrayReader>
    				            </Reader>
                                <Model>
    			                        <ext:Model runat="server">
    			                            <Fields>
    											<ext:ModelField Name="yield"  />
    											<ext:ModelField Name="period"  />
    											<ext:ModelField Name="pnFirstPass" />
    											<ext:ModelField Name="pnFirstFail" />
    											<ext:ModelField Name="pnTotalPass" />
    			                            </Fields>
    			                        </ext:Model>
                                </Model>
                            </ext:Store>
    						</Store>
    	                    <Gradients>
    	                        <ext:Gradient GradientID="redColor" Angle="0">
    	                            <Stops>
    	                                <ext:GradientStop Offset="0" Color="#e21413" />
    	                                <ext:GradientStop Offset="100" Color="#d82931" />
    	                            </Stops>
    	                        </ext:Gradient>
    	
    	                        <ext:Gradient GradientID="orangeColor" Angle="0">
    	                            <Stops>
    	                                <ext:GradientStop Offset="0" Color="#ecbe38" />
    	                                <ext:GradientStop Offset="100" Color="#dc9614" />
    	                            </Stops>
    	                        </ext:Gradient>
    	
    	                        <ext:Gradient GradientID="greenColor" Angle="0">
    	                            <Stops>
    	                                <ext:GradientStop Offset="0" Color="#3ed730" />
    	                                <ext:GradientStop Offset="100" Color="#3ea830" />
    	                            </Stops>
    	                        </ext:Gradient>
    	
    	                        <ext:Gradient GradientID="blueColor" Angle="0">
    	                            <Stops>
    	                                <ext:GradientStop Offset="0" Color="#4868e7" />
    	                                <ext:GradientStop Offset="100" Color="#3c56bf" />
    	                            </Stops>
    	                        </ext:Gradient>
    	                    </Gradients>
    	                    
    			            <Axes>
    			                <ext:NumericAxis Position="Left" Fields="yield" Minimum="0" />
    	                        <ext:NumericAxis Position="Right" Minimum="0" Fields="pnFirstOk,pnFirstKo,pnTotalPass" Hidden="true">
    	                        </ext:NumericAxis>
    			                <ext:CategoryAxis Position="Bottom" Fields="period">
    			                    <Label Font="10px Arial">
    			                        <Rotate Degrees="270" />
    			                        <Renderer Handler="return Ext.String.ellipsis(value, 15, false);" />
    			                    </Label>
    			                </ext:CategoryAxis>
    			            </Axes>
    			
    			            <Series>
    			                <ext:ColumnSeries Axis="Left" XField="period" YField="yield">
    								<Style Fill="url(#blueColor)" StrokeWidth="3" />
    								
    			                    <Label Contrast="true" Display="Under" Field="yield" Color="#000" TextAnchor="middle" />
    			                </ext:ColumnSeries>
    							<ext:LineSeries Highlight="true" Axis="Right" Smooth="3" XField="period" YField="pnFirstOk" >
    	                            <Style Fill="#38B8BF" Stroke="#38B8BF" StrokeWidth="3" />
    								<MarkerConfig Type="Circle" Size="4" Radius="4" StrokeWidth="0" />
    								
    			                    <Label Contrast="true" Display="InsideEnd" Field="pnFirstOk" Color="#000" TextAnchor="middle" />
    	                    	</ext:LineSeries>
    							<ext:LineSeries Highlight="true" Axis="Right" Smooth="3" XField="period" YField="pnFirstKo" >
    	                            <Style Fill="#38B8BF" Stroke="#38B8BF" StrokeWidth="3" />
    								<MarkerConfig Type="Circle" Size="4" Radius="4" StrokeWidth="0" />
    								
    			                    <Label Contrast="true" Display="InsideEnd" Field="pnFirstKo" Color="#000" TextAnchor="middle" />
    	                    	</ext:LineSeries>
    							<ext:LineSeries Highlight="true" Axis="Right" Smooth="3" XField="period" YField="pnTotalPass" >
    	                            <Style Fill="#38B8BF" Stroke="#38B8BF" StrokeWidth="3" />
    								<MarkerConfig Type="Circle" Size="4" Radius="4" StrokeWidth="0" />
    								
    			                    <Label Contrast="true" Display="InsideEnd" Field="pnTotalPass" Color="#000" TextAnchor="middle" />
    	                    	</ext:LineSeries>
    			            </Series>
    			        </ext:Chart>
    			        </Items>
                    </ext:Panel>
    			    </Items>
    			</ext:Panel>
        </form>
    </Body>
    </Html>
    Thank you so much for your support.

  4. #14
    Ext.NET - Support Team Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    28,083
    Quote Originally Posted by tactime10 View Post
    ok now it work.
    I see the ColumnSeries into the chart, but I don't see the LineSeries object that I just added into same chart and with same store
    that I use to show the columns
    Where is the issue?
    You use the following - pnFirstOk, pnFirstKo, pnTotalPass - as YFields of the LineSeries. But you don't bind these fields into the Store. Also I can't see "pnFirstOk", "pnFirstKo" ModelFields.

    Quote Originally Posted by tactime10 View Post
    also I see the border with black color when the chart just rendered into the page.
    How can change the border?
    To hide the border please set
    Code:
    Border="false"
    for the Panel.

    To change the border please use the Panel Cls (a CSS class names) or StyleSpec (a value for the "style" attribute) properties to specify your custom CSS.
    Daniil
    Ext.NET, Inc.
    Support Team

    Ext.NET Examples | Ext.NET API Docs | ExtJS API Docs | Twitter | Jobs

  5. #15
    Member
    Join Date
    Jun 2011
    Location
    naples
    Posts
    117
    Hi,

    I'm sorry for the first question, instead for the second question I'm wrong to explain the problem.

    When I run the code previously posted I see for each column the black color for the borders, also I see the black color for the LineSeries when the property Highlight="true".

    How can change this?

    I attach screen shot that show my problem and my code with ModelFields corrected.
    Click image for larger version. 

Name:	Immagine.jpg 
Views:	35 
Size:	55.8 KB 
ID:	4717

    Code:
    <%@ 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;
    		}
    		
    		public void Page_Load() {
    	        //var store = this.yieldChart.GetStore();
    	        //store.DataSource = DataValue();
    	        //store.DataBind();
    		}
    		
    		protected void ExtractData(object sender, DirectEventArgs e) {
    	        var store = this.yieldChart.GetStore();
    	        store.DataSource = DataValue();
    	        store.DataBind();
    		}
    </script>
    
    <body>
    	<form Method=post Runat="server">
    		<ext:ResourceManager Id="resourceManager" runat="server" />
    			<h3>Example</h3>
    			<br/>
    			<ext:Button ID="btnSearch" Text="Search" runat="server" Hidden="false" Icon="Magnifier" >
    				<DirectEvents>
    					<Click OnEvent="ExtractData">
    						<EventMask ShowMask="true" MinDelay="100"/>
    					</Click>
    				</DirectEvents>
    			</ext:Button>
    			<br/>
    	        <ext:ChartTheme 
    	            ID="CustomThemeID" 
    	            runat="server" 
    	            ThemeName="CustomTheme" 
    	            Colors="url(#blueColor),url(#greenColor),url(#redColor),url(#orangeColor)">
    	        </ext:ChartTheme>
                <ext:Panel runat="server" Height="600" Layout="FitLayout" MarginSpec="0 0 3 0">
                    <Bin>
                        <ext:Store ID="yieldStore" runat="server">
    			            <Reader>
    			                <ext:ArrayReader />
    			            </Reader>
                            <Model>
    	                        <ext:Model runat="server">
    	                            <Fields>
    	                                <ext:ModelField Name="yield"/>
    	                                <ext:ModelField Name="period"/>
    	                                <ext:ModelField Name="pnFirstOk"/>
    	                                <ext:ModelField Name="pnFirstKo"/>
    	                                <ext:ModelField Name="pnTotalPass"/>
    	                            </Fields>
    	                        </ext:Model>
                            </Model>
                        </ext:Store>
                    </Bin>
                    <Items>
    			        <ext:Chart 
    			            ID="yieldChart" 
    			            runat="server" 
    			            Flex="1" 
    			            Theme="CustomTheme"
    			            Shadow="true" 
    			            Animate="true"
    			            StoreID="yieldStore">
    	
    	                    <Gradients>
    	                        <ext:Gradient GradientID="redColor" Angle="0">
    	                            <Stops>
    	                                <ext:GradientStop Offset="0" Color="#e21413" />
    	                                <ext:GradientStop Offset="100" Color="#d82931" />
    	                            </Stops>
    	                        </ext:Gradient>
    	
    	                        <ext:Gradient GradientID="orangeColor" Angle="0">
    	                            <Stops>
    	                                <ext:GradientStop Offset="0" Color="#ecbe38" />
    	                                <ext:GradientStop Offset="100" Color="#dc9614" />
    	                            </Stops>
    	                        </ext:Gradient>
    	
    	                        <ext:Gradient GradientID="greenColor" Angle="0">
    	                            <Stops>
    	                                <ext:GradientStop Offset="0" Color="#3ed730" />
    	                                <ext:GradientStop Offset="100" Color="#3ea830" />
    	                            </Stops>
    	                        </ext:Gradient>
    	
    	                        <ext:Gradient GradientID="blueColor" Angle="0">
    	                            <Stops>
    	                                <ext:GradientStop Offset="0" Color="#4868e7" />
    	                                <ext:GradientStop Offset="100" Color="#3c56bf" />
    	                            </Stops>
    	                        </ext:Gradient>
    	                    </Gradients>
    	                    
    			            <Axes>
    			                <ext:NumericAxis Position="Left" Fields="yield" Minimum="0" />
    	                        <ext:NumericAxis Position="Right" Minimum="0" Fields="pnFirstOk,pnFirstKo,pnTotalPass" Hidden="true">
    	                        </ext:NumericAxis>
    			                <ext:CategoryAxis Position="Bottom" Fields="period">
    			                    <Label Font="10px 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="url(#blueColor)" StrokeWidth="3" />
    								
    			                    <Label Contrast="true" Display="Under" Field="yield" Color="#000" TextAnchor="middle" />
    			                </ext:ColumnSeries>
    							<ext:LineSeries Highlight="true" Axis="Right" Smooth="3" XField="period" YField="pnFirstOk" >
    	                            <Style Fill="#38B8BF" Stroke="#38B8BF" StrokeWidth="3" />
    								<MarkerConfig Type="Circle" Size="4" Radius="4" StrokeWidth="0" />
    								
    			                    <Label Contrast="true" Display="InsideEnd" Field="pnFirstOk" Color="#000" TextAnchor="middle" />
    	                    	</ext:LineSeries>
    							<ext:LineSeries Highlight="true" Axis="Right" Smooth="3" XField="period" YField="pnFirstKo" >
    	                            <Style Fill="#38B8BF" Stroke="#38B8BF" StrokeWidth="3" />
    								<MarkerConfig Type="Circle" Size="4" Radius="4" StrokeWidth="0" />
    								
    			                    <Label Contrast="true" Display="InsideEnd" Field="pnFirstKo" TextAnchor="middle" />
    	                    	</ext:LineSeries>
    							<ext:LineSeries Highlight="true" Axis="Right" Smooth="3" XField="period" YField="pnTotalPass" >
    	                            <Style Fill="#38B8BF" Stroke="#38B8BF" StrokeWidth="3" />
    								<MarkerConfig Type="Circle" Size="4" Radius="4" StrokeWidth="0" />
    								
    			                    <Label Contrast="true" Display="InsideEnd" Field="pnTotalPass" Color="#000" TextAnchor="middle" />
    	                    	</ext:LineSeries>
    			            </Series>
    			        </ext:Chart>
    			    </Items>
    			</ext:Panel>
        </form>
    </Body>
    </Html>
    I hope clear.

    Thank you.

  6. #16
    Ext.NET - Support Team Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    28,083
    What browser do you test with? It is not reproducible in Chrome, FireFox, IE9 on my side.
    Daniil
    Ext.NET, Inc.
    Support Team

    Ext.NET Examples | Ext.NET API Docs | ExtJS API Docs | Twitter | Jobs

  7. #17
    Member
    Join Date
    Jun 2011
    Location
    naples
    Posts
    117
    Quote Originally Posted by Daniil View Post
    What browser do you test with? It is not reproducible in Chrome, FireFox, IE9 on my side.
    I use the IE9 but I discovered the cause of problem. The page rendering into my IE9 is in nonstandard mode, I changed IE9 in standard mode so the problem is solved and I don't see the black color for the borders.

  8. #18
    Ext.NET - Support Team Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    28,083
    Yes, compatibility modes often causes problems. Please note they are not officially supported.
    Daniil
    Ext.NET, Inc.
    Support Team

    Ext.NET Examples | Ext.NET API Docs | ExtJS API Docs | Twitter | Jobs

Similar Threads

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

Posting Permissions