[CLOSED] chart display problem

Page 2 of 2 FirstFirst 12
  1. #11
    if I run the following 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:	52 
Size:	30.7 KB 
ID:	4701

    If I change the part of code as below

    		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:	59 
Size:	22.3 KB 
ID:	4702
    after clicked on button search

    Thank you so much
  2. #12
    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
    <ext:Store runat="server">
        <Reader>
            <ext:ArrayReader />
        </Reader>
    </ext:Store>
  3. #13
    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
    <%@ 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
    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
    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.
  5. #15
    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:	62 
Size:	55.8 KB 
ID:	4717

    <%@ 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
    What browser do you test with? It is not reproducible in Chrome, FireFox, IE9 on my side.
  7. #17
    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
    Yes, compatibility modes often causes problems. Please note they are not officially supported.
Page 2 of 2 FirstFirst 12

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