re-creating chart in source code causes data to be crunched in upper left corner

  1. #1

    re-creating chart in source code causes data to be crunched in upper left corner

    Please note that I specified a chart in aspx code like so, which works beautifully:

                                               <ext:Panel ID="pnlChart1" runat="server" Title="Technical Driver #1" Width="800"
                                                    Height="280" Layout="FitLayout">
                                                    <TopBar>
                                                        <ext:Toolbar ID="Toolbar2" runat="server">
                                                            <Items>
                                                                <ext:Button ID="Button1" runat="server" Text="Reload Data" Icon="ArrowRefresh" OnDirectClick="ReloadData" />
                                                                <ext:Button ID="Button2" runat="server" Text="Save Chart" Icon="Disk" Handler="saveChart" />
                                                            </Items>
                                                        </ext:Toolbar>
                                                    </TopBar>
                                                    <Items>
                                                        <ext:Chart ID="Chart1" runat="server" StyleSpec="background:#fff;" Shadow="true"
                                                            StandardTheme="Category1" Animate="true">
                                                            <LegendConfig Position="Right" />
                                                            <Store>
                                                                <ext:Store ID="Store1" runat="server" Data="<%# LineChartData.GenerateData(Convert.ToInt32(ddlTechnicalDriverCond.SelectedItem.Value), Convert.ToInt32(ddlFieldCond.SelectedItem.Value), Convert.ToInt32(ddlProjectCond.SelectedItem.Value)) %>"
                                                                    AutoDataBind="true">
                                                                    <Model>
                                                                        <ext:Model ID="Model3" runat="server">
                                                                            <Fields>
                                                                                <ext:ModelField Name="Name" />
                                                                                <ext:ModelField Name="Normal" />
                                                                                <ext:ModelField Name="Optimistic" />
                                                                                <ext:ModelField Name="Pessimistic" />
                                                                            </Fields>
                                                                        </ext:Model>
                                                                    </Model>
                                                                </ext:Store>
                                                            </Store>
                                                            <Axes>
                                                                <ext:NumericAxis Fields="Normal,Optimistic,Pessimistic" Title="Number of Hits" MinorTickSteps="1"
                                                                    Minimum="0">
                                                                    <GridConfig>
                                                                        <Odd Opacity="1" Fill="#ddd" Stroke="#bbb" StrokeWidth="0.5" />
                                                                    </GridConfig>
                                                                </ext:NumericAxis>
                                                                <ext:CategoryAxis Position="Bottom" Fields="Name" Title="Year" />
                                                            </Axes>
                                                            <Series>
                                                                <ext:LineSeries Axis="Left" XField="Name" YField="Normal">
                                                                    <HighlightConfig Size="7" Radius="7" />
                                                                    <MarkerConfig Type="Cross" Size="4" Radius="4" StrokeWidth="0" />
                                                                </ext:LineSeries>
                                                                <ext:LineSeries Axis="Left" Smooth="3" XField="Name" YField="Optimistic">
                                                                    <HighlightConfig Size="7" Radius="7" />
                                                                    <MarkerConfig Type="Circle" Size="4" Radius="4" StrokeWidth="0" />
                                                                </ext:LineSeries>
                                                                <ext:LineSeries Axis="Left" Smooth="3" Fill="true" XField="Name" YField="Pessimistic">
                                                                    <HighlightConfig Size="7" Radius="7" />
                                                                    <MarkerConfig Type="Square" Size="4" Radius="4" StrokeWidth="0" />
                                                                </ext:LineSeries>
                                                            </Series>
                                                            <Plugins>
                                                                <ext:VerticalMarker ID="VerticalMarker2" runat="server" Buffer="200">
                                                                    <XLabelRenderer Handler="return Ext.util.Format.date(value + 1, 'Y');" />
                                                                </ext:VerticalMarker>
                                                            </Plugins>
                                                        </ext:Chart>
                                                    </Items>
                                                </ext:Panel>
    The problem is that now I need to simply change the numeric axis title from "Number of Hits" to values like "Number of Barrels" or "Mcf" but when I do that the data is all bunched up in the upper left hand corner. So basically, I am attempting to re-create the chart in code with a new title. Here is the code that I use to re-generate the chart:

            private Chart RecreateChart1(Store store)
            {
                Chart aChart = new Chart();
                aChart.ID = "Chart1";
                aChart.Region = Region.Center;
                aChart.Legend = true;
    
                aChart.Shadow = true;
                aChart.StyleSpec = "background:#fff;";
                this.pnlChart1.Items.Add(aChart);
                aChart.Store.Add(store);
    
                aChart.Axes.Clear();
                NumericAxis axis = new NumericAxis();
                CategoryAxis caxis = new CategoryAxis();
                List<string> lstNumericFields = new List<string>();
    
                lstNumericFields.Add("Normal");
                lstNumericFields.Add("Optimistic");
                lstNumericFields.Add("Pessimistic");
                axis.Fields = lstNumericFields.ToArray();
    
                axis.Title = strTechnicalDriver1Unit;
                axis.Minimum = 0;
                axis.MinorTickSteps = 1;
                axis.Position = Position.Left;
    
                List<string> lstCategoryFields = new List<string>();
                lstCategoryFields.Add("Name");
                caxis.Fields = lstCategoryFields.ToArray();
                caxis.Title = "Year";
    
                aChart.Series.Clear();
                LineSeries lineSeries1 = new LineSeries();
                lineSeries1.SeriesID = "LineSeries1";
                lineSeries1.Axis = Position.Left;
    
                lineSeries1.HighlightConfig = new SpriteAttributes { Size = 7, Radius = 7 };
                lineSeries1.MarkerConfig = new SpriteAttributes { Type = SpriteType.Cross, Size = 4, Radius = 4, StrokeWidth = 0 };
                lineSeries1.XField = new string[] { "Name" };
                lineSeries1.YField = new string[] { "Normal" };
    
                aChart.Series.Add(lineSeries1);
                LineSeries lineSeries2 = new LineSeries();
                lineSeries2.SeriesID = "lineSeries2";
                lineSeries2.Axis = Position.Left;
    
                lineSeries2.HighlightConfig = new SpriteAttributes { Size = 7, Radius = 7 };
                lineSeries2.MarkerConfig = new SpriteAttributes { Type = SpriteType.Circle, Size = 4, Radius = 4, StrokeWidth = 0 };
                lineSeries2.XField = new string[] { "Name" };
                lineSeries2.YField = new string[] { "Optimistic" };
    
                aChart.Series.Add(lineSeries2);
                LineSeries lineSeries3 = new LineSeries();
                lineSeries3.SeriesID = "lineSeries2";
                lineSeries3.Axis = Position.Left;
    
                lineSeries3.HighlightConfig = new SpriteAttributes { Size = 7, Radius = 7 };
                lineSeries3.MarkerConfig = new SpriteAttributes { Type = SpriteType.Square, Size = 4, Radius = 4, StrokeWidth = 0 };
                lineSeries3.XField = new string[] { "Name" };
                lineSeries3.YField = new string[] { "Pessimistic" };
    
                aChart.Series.Add(lineSeries3);
                aChart.Axes.Add(axis);
                aChart.Axes.Add(caxis);
                aChart.Animate = true;
    
                return aChart;
            }
    
            protected void ReloadData(object sender, DirectEventArgs e)
            {
                Store store = this.Chart1.GetStore();
    
                store.DataSource = LineChartData.GenerateData(Convert.ToInt32(ddlTechnicalDriverCond.SelectedItem.Value), Convert.ToInt32(ddlFieldCond.SelectedItem.Value), Convert.ToInt32(ddlProjectCond.SelectedItem.Value));
                store.DataBind();
                this.Chart1 = RecreateChart1(store);
                this.Chart1.Render();
            }
    
                public static List<LineChartData> GenerateData(int _IdTechnicalDriver, int _IdField, int _IdProject)
                {
                    DataClass.clsTechnicalDriverData oTechnicalDriver1 = new DataClass.clsTechnicalDriverData();
                    DataTable dt = oTechnicalDriver1.LoadList("IdProject = '" + _IdProject + "' AND IdField = '" + _IdField + "' AND IdTechnicalDriver = '" + _IdTechnicalDriver + "'", "");
                    List<LineChartData> data = new List<LineChartData>(dt.Rows.Count);
                    Int32 intYear = DateTime.Now.Year;
    
                    foreach (DataRow objRow in dt.Rows)
                    {
                        string strDriver1Baseline = objRow["Normal"].ToString() != "" ? objRow["Normal"].ToString() : null;
                        string strDriver1Optimistic = objRow["Optimistic"].ToString() != "" ? objRow["Optimistic"].ToString() : null;
                        string strDriver1Pessimistic = objRow["Pessimistic"].ToString() != "" ? objRow["Pessimistic"].ToString() : null;
    
                        data.Add(new LineChartData
                        {
                            Name = Convert.ToString(intYear),
                            Normal = Convert.ToDouble(strDriver1Baseline),
                            Optimistic = Convert.ToDouble(strDriver1Optimistic),
                            Pessimistic = Convert.ToDouble(strDriver1Pessimistic)
                        });
                        intYear++;
                    }
    
                    return data;
              }
    Please see the attached screen shots for details. Does anyone have any suggestions? What am I missing? TIA.
    Attached Thumbnails FailingChart.jpg   GoodChart.jpg  
  2. #2
    Please use ReRender instead Render
    Vladimir Shcheglov
    Sr. Developer
  3. #3
    What a sense to rerender the chart? If you change store's data only then rerendering is not required
    Vladimir Shcheglov
    Sr. Developer
  4. #4

    Re: Chart: changing Fields of Axis runtime dynamically

    Hi Vladimir,

    Thank you so much for the quick reply. Please note that I was just making it too complicated. All I needed to do to change the horizontal axis label was the following:

    private void RecreateChart1(Store store)
    {
        NumericAxis axis = Chart1.Axes[0] as NumericAxis;
        axis.Title = "Barrels";
        this.Chart1.Axes.RemoveAt(0);
        this.Chart1.Axes.Add(axis);    
    }
    Where I also changed the line this.Chart1.Render(); to this.Chart1.ReRender(); as you suggested.
    Last edited by rmoore; Nov 29, 2013 at 7:19 PM. Reason: corrected spacing

Similar Threads

  1. [CLOSED] Chart: Creating in behind code and listeners
    By cwolcott in forum 2.x Premium Help
    Replies: 4
    Last Post: Nov 26, 2013, 12:06 PM
  2. Replies: 1
    Last Post: Oct 11, 2013, 3:02 PM
  3. Replies: 6
    Last Post: Apr 18, 2012, 12:00 PM
  4. Replies: 2
    Last Post: Feb 01, 2012, 6:56 AM
  5. Replies: 0
    Last Post: Jun 25, 2009, 1:44 PM

Tags for this Thread

Posting Permissions