[CLOSED] chart isn't shown

**tactime10** · Oct 15, 2012, 5:24 PM

Hi,
I created my page with chart click enabled, now when I click on column of first chart, I create from codebehind
new chart that I would to show but I don't see nothing

I run the code below into the last version of firefox

<%@ 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) {
            this.panel1.Hidden = false;
            var store = this.yieldChart.GetStore();
            store.DataSource = DataValue();
            store.DataBind();
        }
        
        
        public void SetUpChartLevels(Chart chartAnalysisLevel) {
            chartAnalysisLevel.Height = 500;
            chartAnalysisLevel.Theme = "CustomThemeAnalysis";
            chartAnalysisLevel.Animate = true;
            chartAnalysisLevel.Shadow = true;
            
            Store storeAnalysisLevel = new Store();
            storeAnalysisLevel.ID = "storeAnalysisLevel";
            storeAnalysisLevel.Reader.Add(new Ext.Net.ArrayReader());
            
            ModelField modelFieldDefectiveness = new ModelField("defectiveness");
            ModelField modelFieldFirstPass = new ModelField("firstPass");
            ModelField modelFieldFirstFail = new ModelField("firstFail");
            ModelField modelFieldPartNumber = new ModelField("partNumber");
            
            Model model = new Model();
            model.Fields.Add(modelFieldDefectiveness);
            model.Fields.Add(modelFieldFirstPass);
            model.Fields.Add(modelFieldFirstFail);
            model.Fields.Add(modelFieldPartNumber);
            
            storeAnalysisLevel.Model.Add(model);
            
            NumericAxis numericAxisDefectiveness = new NumericAxis();
            numericAxisDefectiveness.Fields = new string[]{"defectiveness"};
            numericAxisDefectiveness.Position = Position.Left;
            numericAxisDefectiveness.Minimum = 0;
            
            NumericAxis numericFirstPass = new NumericAxis();
            numericFirstPass.Fields = new string[]{"firstFail","firstPass"};
            numericFirstPass.Position = Position.Right;
            numericFirstPass.Minimum = 0;
            numericFirstPass.Hidden = true;
            
            CategoryAxis categoryAxis = new CategoryAxis();
            categoryAxis.Position = Position.Bottom;
            categoryAxis.Fields = new string[]{"partNumber"};
            AxisLabel axisLabel = new AxisLabel();
            RotateAttribute rotate = new RotateAttribute();
            rotate.Degrees = 270;
            axisLabel.Rotate = rotate;
            axisLabel.Renderer.Handler = "return Ext.String.ellipsis(value, 15, false);";
            categoryAxis.Label = axisLabel;
            
            chartAnalysisLevel.Axes.Add(numericAxisDefectiveness);
            chartAnalysisLevel.Axes.Add(categoryAxis);
                        
            ColumnSeries columnSeries = new ColumnSeries();
            columnSeries.Axis = Position.Left;
            columnSeries.Highlight = true;
            columnSeries.XField = new string[]{"partNumber"};
            columnSeries.YField = new string[]{"defectiveness"};
            
            columnSeries.Listeners.ItemMouseUp.Handler = "App.direct.OnItemMouseUp()";
            
            LineSeries lineSeriesFirstFail = new LineSeries();
            lineSeriesFirstFail.Axis = Position.Right;
            lineSeriesFirstFail.Highlight = true;
            lineSeriesFirstFail.Smooth = 3;
            lineSeriesFirstFail.XField = new string[]{"partNumber"};
            lineSeriesFirstFail.YField = new string[]{"firstFail"};
            lineSeriesFirstFail.ShowMarkers = true;
            
            LineSeries lineSeriesFirstPass = new LineSeries();
            lineSeriesFirstPass.Axis = Position.Right;
            lineSeriesFirstPass.Highlight = true;
            lineSeriesFirstPass.Smooth = 3;
            lineSeriesFirstPass.XField = new string[]{"partNumber"};
            lineSeriesFirstPass.YField = new string[]{"firstPass"};
            lineSeriesFirstPass.ShowMarkers = true;
            
            chartAnalysisLevel.Series.Add(columnSeries);
            
            chartAnalysisLevel.Store.Add(storeAnalysisLevel);
        }
        
        public List<object> CreateItems() {
            List<object> listDefectivenessItems = new List<object> ();
            
            listDefectivenessItems.Add(new object[]{"50,6","25","24","partnumber1"});
            listDefectivenessItems.Add(new object[]{"40,6","20","24","partnumber2"});
            listDefectivenessItems.Add(new object[]{"55,3","26","22","partnumber3"});
            listDefectivenessItems.Add(new object[]{"22,6","12","28","partnumber4"});
            listDefectivenessItems.Add(new object[]{"32,1","18","56","partnumber5"});
            listDefectivenessItems.Add(new object[]{"12,0","10","34","partnumber6"});
            return listDefectivenessItems;
        }
        
        [DirectMethod]
        public void OnItemMouseUp() {
            FormPanel formPanelLevel = new FormPanel();
            formPanelLevel.ID = "formPanelLevel";
            formPanelLevel.Border = false;
            formPanelLevel.Height = 600;
            formPanelLevel.MarginSpec = "0 5 5 5";
            formPanelLevel.Frame = true;
            formPanelLevel.BodyPadding = 5;
            formPanelLevel.Hidden = false;
            formPanelLevel.Collapsed = false;
            formPanelLevel.Collapsible = false;
            HBoxLayoutConfig hBoxLayoutConfig = new HBoxLayoutConfig();
            hBoxLayoutConfig.Align = HBoxAlign.Stretch;
            formPanelLevel.LayoutConfig.Add(hBoxLayoutConfig);
            
            formPanelLevel.Show();
            formPanelLevel.AddTo(panelContentLevels);
            this.panelContentLevels.Show();
            
            Ext.Net.Panel panelLevels = new Ext.Net.Panel();
            panelLevels.Flex = 1;
            panelLevels.ID = "panelLevels";
            panelLevels.Layout = "FitLayout";
            panelLevels.Title = "Chart";
            
            Chart chartAnalysisLevel = new Chart();
            chartAnalysisLevel.ID = "chartAnalysisLevel";
            SetUpChartLevels(chartAnalysisLevel);
            panelLevels.Items.Add(chartAnalysisLevel);
            
            Ext.Net.Label labelError = new Ext.Net.Label();
            labelError.ID = "labelError";
            chartAnalysisLevel.GetStore().DataSource = CreateItems();
            chartAnalysisLevel.DataBind();
            
            panelLevels.AddTo(formPanelLevel);
            panelLevels.Show();
        }

</script>
<script type="text/javascript">
    var onMouseUp = function (item) {
            App.direct.OnItemMouseUp();
    };
</script>
    
<body>
    <form Method=post Runat="server">
        <ext:ResourceManager Id="resourceManager" runat="server" />
            <br/>
            <h3>Example</h3>
            <br/>
            <ext:Panel id="panelFilter" runat="server" MarginSpec="0 5 5 0" Border="false"
                       AutoHeight="false" Header="false" Collapsible="false" CollapseMode="Mini" BodyPadding="5" >
                <Items>
                    <ext:FieldSet Id="fieldSetFilterLeadtime" runat="server" Title="Filter" Collapsible="true" Layout="AnchorLayout" 
                                  ButtonAlign="Right" BodyPadding="5">
                        <Items>
                            <ext:Panel runat="server" Layout="HBoxLayout" Border="false" AutoHeight="true" Header="false">
                                <Defaults>
                                    <ext:Parameter Name="margins" Value="5 0 0 0" Mode="Value" />
                                </Defaults>
                                <LayoutConfig>
                                    <ext:HBoxLayoutConfig Align="Middle" />
                                </LayoutConfig>
                                <Items>
                                    <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>
                                </Items>
                            </ext:Panel>
                        </Items>
                    </ext:FieldSet>
                </Items>
            </ext:Panel>
            <ext:ChartTheme 
                ID="CustomThemeID" 
                runat="server" 
                ThemeName="CustomTheme" 
                Colors="url(#blueColor),url(#greenColor),url(#redColor),url(#orangeColor)">
            </ext:ChartTheme>
        <ext:ChartTheme 
            ID="CustomThemeAnalysisID" 
            runat="server" 
            ThemeName="CustomThemeAnalysis" 
            Colors="url(#orangeColor),url(#redColor),url(#greenColor),url(#blueColor)">
        </ext:ChartTheme>
            
            <ext:FormPanel ID="panel1" runat="server" Title="Items found" MarginSpec="0 5 5 5"
                           Frame="true" BodyPadding="5" Hidden="true" Icon="ApplicationFormMagnify" > 
                <LayoutConfig>
                    <ext:VBoxLayoutConfig Align="Stretch" />
                </LayoutConfig>
                <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:FormPanel runat="server" Border="false" Height="600" >
                        <LayoutConfig>
                            <ext:HBoxLayoutConfig Align="Stretch" />
                        </LayoutConfig>
                        <Items>
                            <ext:Panel runat="server" Border="true" Layout="FitLayout" Flex="1" Title="Monitor">
                                <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="#38B8BF" StrokeWidth="3" />
                                                    <Label Contrast="true" Display="Under" Field="yield" Color="#000" TextAnchor="middle" />
                                                    <Listeners>
                                                        <ItemMouseUp Fn="onMouseUp" />
                                                    </Listeners>
                                                </ext:ColumnSeries>
                                                <ext:LineSeries Highlight="true" Axis="Right" Smooth="3" XField="period" YField="pnFirstOk" >
                                                    <MarkerConfig Type="Circle" Size="4" Radius="4" StrokeWidth="0" />
                                                    
                                                    <Label Contrast="false" Display="InsideEnd" Field="pnFirstOk" Color="#319915" TextAnchor="Middle" />
                                                </ext:LineSeries>
                                                <ext:LineSeries Highlight="true" Axis="Right" Smooth="3" XField="period" YField="pnFirstKo" >
                                                    <MarkerConfig Type="Circle" Size="4" Radius="4" StrokeWidth="0" />
                                                    
                                                    <Label Contrast="false" Display="InsideEnd" Field="pnFirstKo" Color="#CC1700" TextAnchor="Middle" />
                                                </ext:LineSeries>
                                                <ext:LineSeries Highlight="true" Axis="Right" Smooth="3" XField="period" YField="pnTotalPass" >
                                                    <MarkerConfig Type="Circle" Size="4" Radius="4" StrokeWidth="0" />
                                                    
                                                    <Label Contrast="false" Display="InsideEnd" Field="pnTotalPass" Color="#C97C00" TextAnchor="Middle" />
                                                </ext:LineSeries>
                                            </Series>
                                    </ext:Chart>
                                </Items>
                            </ext:Panel>
                        </Items>
                    </ext:FormPanel>
                                <ext:Panel runat="server" ID="panelContentLevels" Border="false" Hidden="true">
                                    <%--<Items>
                                        <ext:FormPanel ID="formPanelLevels" runat="server" Border="false" Height="600" MarginSpec="0 5 5 5"
                                               Frame="true" BodyPadding="5" Hidden="true" Collapsed="false" Collapsible="false" >
                                            <LayoutConfig>
                                                <ext:HBoxLayoutConfig Align="Stretch" />
                                            </LayoutConfig>
                                        </ext:FormPanel>
                                    </Items> --%>
                                </ext:Panel>
                </Items>
            </ext:FormPanel>
    </form>
</Body>
</Html>

Can you help me?
Thanks

**Daniil** · Oct 15, 2012, 6:14 PM

Hi @tactime10,

I launched the page and can see the chart after clicking the Button.

Do you use the latest sources? If not, please update and retest.
http://svn.ext.net/premium/branches/2.1/

P.S. Please always simplify code samples removing anything that is not required to reproduce the problem.

**tactime10** · Oct 16, 2012, 10:03 AM

Hi,

I use version 2.1.0.20528 of Ext.Net.

I update the last version but I see the version of Ext.Net.dll as 2.1.0.19276 it's correct?

Thanks

**Daniil** · Oct 16, 2012, 10:11 AM

A minor dll revision depends on time when you build the assembly. So, it doesn't identify the version exactly, but SVN revision does.

**tactime10** · Oct 16, 2012, 10:41 AM

I update Ext.Net at the SVN revision 4422 but into my page I have the same problem.

**Daniil** · Oct 16, 2012, 12:57 PM

Please clarify these things:

1. Exact steps to reproduce
2. A screenshot how you see a result
3. A browser version

**tactime10** · Oct 16, 2012, 1:48 PM

1. I posted again my code because I simplified the code that reproduce the 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,monitorViewer.PnFirstOk,monitorViewer.PnFirstKo,monitorViewer.PnTotalPass};
				
				periodArray[i] = itemArray;
			}
			return periodArray;
		}
		
		public void Page_Load() {
	        this.panel1.Hidden = false;
	        var store = this.yieldChart.GetStore();
	        store.DataSource = DataValue();
	        store.DataBind();
		}
		
		public void SetUpChartLevels(Chart chartAnalysisLevel) {
			chartAnalysisLevel.Height = 500;
			chartAnalysisLevel.Theme = "CustomThemeAnalysis";
			chartAnalysisLevel.Animate = true;
			chartAnalysisLevel.Shadow = true;
			
			Store storeAnalysisLevel = new Store();
			storeAnalysisLevel.ID = "storeAnalysisLevel";
			storeAnalysisLevel.Reader.Add(new Ext.Net.ArrayReader());
			
			ModelField modelFieldDefectiveness = new ModelField("defectiveness");
			ModelField modelFieldFirstPass = new ModelField("firstPass");
			ModelField modelFieldFirstFail = new ModelField("firstFail");
			ModelField modelFieldPartNumber = new ModelField("partNumber");
			
			Model model = new Model();
			model.Fields.Add(modelFieldDefectiveness);
			model.Fields.Add(modelFieldFirstPass);
			model.Fields.Add(modelFieldFirstFail);
			model.Fields.Add(modelFieldPartNumber);
			
			storeAnalysisLevel.Model.Add(model);
			
			NumericAxis numericAxisDefectiveness = new NumericAxis();
			numericAxisDefectiveness.Fields = new string[]{"defectiveness"};
			numericAxisDefectiveness.Position = Position.Left;
			numericAxisDefectiveness.Minimum = 0;
			
			NumericAxis numericFirstPass = new NumericAxis();
			numericFirstPass.Fields = new string[]{"firstFail","firstPass"};
			numericFirstPass.Position = Position.Right;
			numericFirstPass.Minimum = 0;
			numericFirstPass.Hidden = true;
			
			CategoryAxis categoryAxis = new CategoryAxis();
			categoryAxis.Position = Position.Bottom;
			categoryAxis.Fields = new string[]{"partNumber"};
			AxisLabel axisLabel = new AxisLabel();
			RotateAttribute rotate = new RotateAttribute();
			rotate.Degrees = 270;
			axisLabel.Rotate = rotate;
			axisLabel.Renderer.Handler = "return Ext.String.ellipsis(value, 15, false);";
			categoryAxis.Label = axisLabel;
			
			chartAnalysisLevel.Axes.Add(numericAxisDefectiveness);
			chartAnalysisLevel.Axes.Add(categoryAxis);
						
			ColumnSeries columnSeries = new ColumnSeries();
			columnSeries.Axis = Position.Left;
			columnSeries.Highlight = true;
			columnSeries.XField = new string[]{"partNumber"};
			columnSeries.YField = new string[]{"defectiveness"};
			
			columnSeries.Listeners.ItemMouseUp.Handler = "App.direct.OnItemMouseUp()";
			
			LineSeries lineSeriesFirstFail = new LineSeries();
			lineSeriesFirstFail.Axis = Position.Right;
			lineSeriesFirstFail.Highlight = true;
			lineSeriesFirstFail.Smooth = 3;
			lineSeriesFirstFail.XField = new string[]{"partNumber"};
			lineSeriesFirstFail.YField = new string[]{"firstFail"};
			lineSeriesFirstFail.ShowMarkers = true;
			
			LineSeries lineSeriesFirstPass = new LineSeries();
			lineSeriesFirstPass.Axis = Position.Right;
			lineSeriesFirstPass.Highlight = true;
			lineSeriesFirstPass.Smooth = 3;
			lineSeriesFirstPass.XField = new string[]{"partNumber"};
			lineSeriesFirstPass.YField = new string[]{"firstPass"};
			lineSeriesFirstPass.ShowMarkers = true;
			
			chartAnalysisLevel.Series.Add(columnSeries);
			
			chartAnalysisLevel.Store.Add(storeAnalysisLevel);
		}
		
		public List<object> CreateItems() {
			List<object> listDefectivenessItems = new List<object> ();
			
			listDefectivenessItems.Add(new object[]{"50,6","25","24","partnumber1"});
			listDefectivenessItems.Add(new object[]{"40,6","20","24","partnumber2"});
			listDefectivenessItems.Add(new object[]{"55,3","26","22","partnumber3"});
			listDefectivenessItems.Add(new object[]{"22,6","12","28","partnumber4"});
			listDefectivenessItems.Add(new object[]{"32,1","18","56","partnumber5"});
			listDefectivenessItems.Add(new object[]{"12,0","10","34","partnumber6"});
			return listDefectivenessItems;
		}
		
		[DirectMethod]
		public void OnItemMouseUp() {
			FormPanel formPanelLevel = new FormPanel();
			formPanelLevel.ID = "formPanelLevel";
			formPanelLevel.Border = false;
			formPanelLevel.Height = 250;
			formPanelLevel.MarginSpec = "0 5 5 5";
			formPanelLevel.Frame = true;
			formPanelLevel.BodyPadding = 5;
			formPanelLevel.Hidden = false;
			formPanelLevel.Collapsed = false;
			formPanelLevel.Collapsible = false;
			HBoxLayoutConfig hBoxLayoutConfig = new HBoxLayoutConfig();
			hBoxLayoutConfig.Align = HBoxAlign.Stretch;
			formPanelLevel.LayoutConfig.Add(hBoxLayoutConfig);
			
			formPanelLevel.Show();
			formPanelLevel.AddTo(panelContentLevels);
			this.panelContentLevels.Show();
			
			Ext.Net.Panel panelLevels = new Ext.Net.Panel();
			panelLevels.Flex = 1;
			panelLevels.ID = "panelLevels";
			panelLevels.Layout = "FitLayout";
			panelLevels.Title = "Chart";
			
			Chart chartAnalysisLevel = new Chart();
			chartAnalysisLevel.ID = "chartAnalysisLevel";
			SetUpChartLevels(chartAnalysisLevel);
			panelLevels.Items.Add(chartAnalysisLevel);
			
			Ext.Net.Label labelError = new Ext.Net.Label();
			labelError.ID = "labelError";
			chartAnalysisLevel.GetStore().DataSource = CreateItems();
			chartAnalysisLevel.DataBind();
			
			panelLevels.AddTo(formPanelLevel);
			panelLevels.Show();
		}

</script>
<script type="text/javascript">
    var onMouseUp = function (item) {
			App.direct.OnItemMouseUp();
    };
</script>
    
<body>
	<form Method=post Runat="server">
		<ext:ResourceManager Id="resourceManager" runat="server" />
			<br/>
			<h3>Example</h3>
			<br/>
	        <ext:ChartTheme 
	            ID="CustomThemeID" 
	            runat="server" 
	            ThemeName="CustomTheme" 
	            Colors="url(#blueColor),url(#greenColor),url(#redColor),url(#orangeColor)">
	        </ext:ChartTheme>
	        <ext:ChartTheme 
	            ID="CustomThemeAnalysisID" 
	            runat="server" 
	            ThemeName="CustomThemeAnalysis" 
	            Colors="url(#orangeColor),url(#redColor),url(#greenColor),url(#blueColor)">
	        </ext:ChartTheme>
	        
	        <ext:FormPanel ID="panel1" runat="server" Title="Items found" MarginSpec="0 5 5 5"
	            		   Frame="true" BodyPadding="5" Hidden="true" Icon="ApplicationFormMagnify" > 
				<LayoutConfig>
					<ext:VBoxLayoutConfig Align="Stretch" />
				</LayoutConfig>
                <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:FormPanel runat="server" Border="false" Height="250" >
	                    <LayoutConfig>
	                        <ext:HBoxLayoutConfig Align="Stretch" />
	                    </LayoutConfig>
	                    <Items>
			                <ext:Panel runat="server" Border="true" Layout="FitLayout" Flex="1" Title="Monitor">
			                    <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="#38B8BF" StrokeWidth="3" />
								                    <Label Contrast="true" Display="Under" Field="yield" Color="#000" TextAnchor="middle" />
													<Listeners>
														<ItemMouseUp Fn="onMouseUp" />
													</Listeners>
								                </ext:ColumnSeries>
												<ext:LineSeries Highlight="true" Axis="Right" Smooth="3" XField="period" YField="pnFirstOk" >
				    								<MarkerConfig Type="Circle" Size="4" Radius="4" StrokeWidth="0" />
				    								
								                    <Label Contrast="false" Display="InsideEnd" Field="pnFirstOk" Color="#319915" TextAnchor="Middle" />
						                    	</ext:LineSeries>
												<ext:LineSeries Highlight="true" Axis="Right" Smooth="3" XField="period" YField="pnFirstKo" >
                    								<MarkerConfig Type="Circle" Size="4" Radius="4" StrokeWidth="0" />
                    								
								                    <Label Contrast="false" Display="InsideEnd" Field="pnFirstKo" Color="#CC1700" TextAnchor="Middle" />
						                    	</ext:LineSeries>
												<ext:LineSeries Highlight="true" Axis="Right" Smooth="3" XField="period" YField="pnTotalPass" >
                    								<MarkerConfig Type="Circle" Size="4" Radius="4" StrokeWidth="0" />
                    								
								                    <Label Contrast="false" Display="InsideEnd" Field="pnTotalPass" Color="#C97C00" TextAnchor="Middle" />
						                    	</ext:LineSeries>
								            </Series>
							        </ext:Chart>
							    </Items>
							</ext:Panel>
					    </Items>
					</ext:FormPanel>
					<ext:Panel runat="server" ID="panelContentLevels" Border="false" Hidden="true" Height="250">
	                </ext:Panel>
			    </Items>
			</ext:FormPanel>
    </form>
</Body>
</Html>

The page built with two charts, into the first as you can see into the page is enabled the click on the columns. if you click one column I want to show the second chart built from codebehind into the DirectMethod "OnItemMouseUp" but I don't see the columns for the last chart,

2. instead after click on the column of the first chart, I see this

Click image for larger version.

Name: Cattura1.JPG
Views: 94
Size: 80.3 KB
ID: 4931

3. I run the page with last version of firefox

I hope clear now. Thanks

**geoffrey.mcgill** · Oct 16, 2012, 4:14 PM

Your listDefectivenessItems List is creating new object with String values, and they should be numbers. If you remove all the quotes, your sample renders correctly.

Examples

public List<object> CreateItems() {    List<object> listDefectivenessItems = new List<object> ();
             
    listDefectivenessItems.Add(new object[]{50.6,25,24,"partnumber1"});
    listDefectivenessItems.Add(new object[]{40.6,20,24,"partnumber2"});
    listDefectivenessItems.Add(new object[]{55.3,26,22,"partnumber3"});
    listDefectivenessItems.Add(new object[]{22.6,12,28,"partnumber4"});
    listDefectivenessItems.Add(new object[]{32,1,18,56,"partnumber5"});
    listDefectivenessItems.Add(new object[]{12.0,10,34,"partnumber6"});
    return listDefectivenessItems;
}

**geoffrey.mcgill** · Oct 16, 2012, 4:17 PM

As well, with future samples posted to the forums, please simplify as much as possible. Remove all code that is not directly related to the problem.

Here's a simplified version of your sample above.

Example

<%@ Page Language="C#" %> 
<script runat="server">
    public void Page_Load()
    {
        if (!X.IsAjaxRequest)
        {
            var store = this.Chart1.GetStore();
            
            store.DataSource = new object[] {
                new object[] { 95.97, "Period 1" },
                new object[] { 96.68, "Period 2" }
            };
         
            store.DataBind();
        }
    }
         
    [DirectMethod]
    public void Chart1_Click() 
    {
        Chart chart = new Chart
        {
            ID = "Chart2",
            Height = 250,
            Width = 500,
            Axes = { 
                new NumericAxis
                {
                    Fields = new string[] { "defectiveness" }
                },
                new CategoryAxis
                {
                    Position = Position.Bottom,
                    Fields = new string[] { "partNumber" }
                }
            },
            Series = { 
                new ColumnSeries
                {
                    Axis = Position.Left,
                    XField = new string[] { "partNumber" },
                    YField = new string[] { "defectiveness" }
                }
            },
            Store = { 
                new Store
                {
                    ID = "strChartLevels",
                    Reader = { 
                        new ArrayReader()
                    },
                    Model = {
                        new Model{   
                            Fields = { 
                                new ModelField("defectiveness"),
                                new ModelField("partNumber")
                            }
                        }
                    }
                }
            }
        };


        var store = chart.GetStore();
        
        store.DataSource = new object[] {
            new object[] { 50.6, "Part 1" },
            new object[] { 40.6, "Part 2" }
        };
        
        store.DataBind();


        this.Container1.Show();
        chart.AddTo(this.Container1);
    }
</script>
<html>
<head>
    <title>Ext.NET Example</title>
</head>     
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />


        <ext:Chart ID="Chart1" runat="server" Height="250" Width="500">
            <Store>
                <ext:Store runat="server" >
                    <Reader>
                        <ext:ArrayReader />
                    </Reader>
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="YieldValue"/>
                                <ext:ModelField Name="Period"/>
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <Axes>
                <ext:CategoryAxis Position="Bottom" Fields="Period" />
                <ext:NumericAxis Position="Left" Fields="YieldValue" />
            </Axes>
                <Series>
                    <ext:ColumnSeries XField="Period" YField="YieldValue">
                        <Listeners>
                            <ItemClick Handler="App.direct.Chart1_Click();" />
                        </Listeners>
                    </ext:ColumnSeries>
                </Series>
        </ext:Chart>
        
        <ext:Container ID="Container1" runat="server" Hidden="true" />
    </form>
</body>
</html>

**tactime10** · Oct 17, 2012, 10:45 AM

ok,

excuse me if the example code is too complex. However now it work.

thanks

Thread: [CLOSED] chart isn't shown

Thread Tools

Search Thread

Display

[CLOSED] chart isn't shown

Similar Threads

[CLOSED] [#13] labels LineSeries aren't shown into the chart

[CLOSED] Is it possible to put a tooltip on chart legend or chart axis?

Chart: Is it a bug? configuring CHART from code behind

[CLOSED] cursor not shown

TriggerField is not shown

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] chart isn't shown

[CLOSED] chart isn't shown

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us