none
Chart Control not displaying RRS feed

  • Question

  • Hello

    I have a bar chart that presents data fine but sometimes when you load the page it does not initially display until you pick a date range to initiate the chart update method, sometimes it does display initially.

    Anybody know what may cause this?

    Jason


    Jason Munsterteiger

    Tuesday, February 18, 2020 5:37 PM

All replies

  • Hi Jason Munsterteiger,

    Thank you for posting here.

    According to your description, I need more information to make a test.

    Could you provide some related code here? It will help us to analyze your problem.

    We are waiting for your update.

    Best Regards,

    Xingyu Zhao


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Wednesday, February 19, 2020 2:14 AM
    Moderator
  • Thank you for the reply! While copying this code here, I saw that my UpdateChart() method was being called from within an If statement in my Page_Load method. I moved it out of the If statement scope and will see if that makes a difference. Any input you have will be valuable to me.

    This is the markup:

                                

    <td class="tdcenter">
                     <asp:Chart ID="Chart1" runat="server" DataKey="HITID"  Height="600px" Width="800px" BackColor="Gainsboro" BorderlineColor="Transparent" OnClick="Chart1_Click">
                        <series>
                                <asp:Series Name="Series1" PostBackValue="#SERIESNAME, #VALX" BorderWidth="0" IsValueShownAsLabel="True" Legend="Legend1" LegendText="Completed" XValueType="String" YValueType="Int32" Label="#VAL">
                                    <SmartLabelStyle IsMarkerOverlappingAllowed="True" IsOverlappedHidden="False" Enabled="False" />
                                    </asp:Series>
                                <asp:Series Name="Series2" PostBackValue="#SERIESNAME, #VALX" BorderWidth="0" ChartArea="ChartArea1" IsValueShownAsLabel="True" Label="#VAL" Legend="Legend1" LegendText="Auto Completed"  XValueType="String" YValueType="Int32">
                                    <SmartLabelStyle IsMarkerOverlappingAllowed="True" IsOverlappedHidden="False" Enabled="False" />
                                </asp:Series>

                        </series>
                        <chartareas>
                            <asp:ChartArea Name="ChartArea1" AlignmentOrientation="Vertical">
                                </asp:ChartArea>
                         </chartareas>
                         <Legends>
                             <asp:Legend DockedToChartArea="ChartArea1" LegendStyle="Column" Name="Legend1" TitleBackColor="224, 224, 224" Alignment="Center" Docking="Top" Font="Microsoft Sans Serif, 8.25pt, style=Bold" IsDockedInsideChartArea="False" IsTextAutoFit="False" TitleFont="Microsoft Sans Serif, 9.75pt, style=Bold">
                             </asp:Legend>
                         </Legends>
                         <Titles>
                             <asp:Title Name="Title1" Text="Referral Specialist Completion Report" Font="Microsoft Sans Serif, 11pt, style=Bold">
                             </asp:Title>
                         </Titles>
                         <BorderSkin PageColor="BlanchedAlmond" SkinStyle="FrameTitle1" />
                     </asp:Chart>

                </td>

    This is the C# code behind:

            

     protected void UpdateChart()
        {
            //Create our Data Table
            DataTable chartDataTable = new DataTable();
            DataTable chartDataTableAutoCompleted = new DataTable();

            //Setup SQL Connection String
            string ConnectionString = ConfigurationManager.ConnectionStrings["TOG"].ConnectionString;
            //Instantiate SQL Connection
            using (SqlConnection connection = new SqlConnection(ConnectionString))
            {
                //Setup Dates for our SQL Command
                DateTime ReportUpperBound = DateTime.ParseExact(ReportUBLabel.Text.ToString(), "d", null);
                DateTime ReportLowerBound = DateTime.ParseExact(ReportLBLabel.Text.ToString(), "d", null);

                //Setup SQL Command
                SqlCommand command = new SqlCommand("proc_ReferralsSpecialistCompletedReport", connection);
                command.Parameters.AddWithValue("@SpecialistList", "3");
                command.Parameters.AddWithValue("@ReportLowerBound", ReportLowerBound.ToShortDateString());
                command.Parameters.AddWithValue("@ReportUpperBound", ReportUpperBound.ToShortDateString());
                command.CommandType = CommandType.StoredProcedure;
                SqlDataAdapter da = new SqlDataAdapter(command);
                //Open out SQL Connection
                try
                {
                    connection.Open();
                    da.Fill(chartDataTable);

                }
                catch (SqlException)
                {
                    throw;
                }
                finally
                {
                    if (connection.State == ConnectionState.Open)
                        connection.Close();
                }



                Chart1.DataSource = chartDataTable;
                Chart1.Legends[0].Enabled = true;
                Chart1.Series[0].XValueMember = "ReferralSpecialist";
                Chart1.ChartAreas["ChartArea1"].AxisX.LabelStyle.Font = new System.Drawing.Font("Arial Unicode MS", 12f, System.Drawing.FontStyle.Regular);
                Chart1.ChartAreas["ChartArea1"].AxisX.LabelStyle.Angle = 45;
                Chart1.ChartAreas["ChartArea1"].AxisX.Interval = 1;
                Chart1.ChartAreas["ChartArea1"].AxisX.MajorGrid.Enabled = false;
                Chart1.Series[0].YValueMembers = "OrderCount";
                Chart1.Series[1].XValueMember = "ReferralSpecialist";
                Chart1.Series[1].YValueMembers = "AutoCompletedCount";
                Chart1.DataBind();


            }

        }

    UpdateChart() is called from:

        protected void Page_Load(object sender, EventArgs e)
        {
            //Add required <head> Javascript files
            string[] JavaScriptFiles = { "/Scripts/jquery-3.4.1.js", "/Scripts/jquery-ui.js", "/Scripts/Chart.js" };
            int index = 1;

            foreach(var JavaScriptFile in JavaScriptFiles)
            {
                var ScriptTag = new HtmlGenericControl { TagName = "script" };
                ScriptTag.Attributes.Add("type", "text/javascript");
                ScriptTag.Attributes.Add("language", "javascript");
                ScriptTag.Attributes.Add("src", ResolveUrl(JavaScriptFile));
                this.Page.Header.Controls.AddAt(index, ScriptTag);
                index++;
            }

            //Add required <head> CSS files
            string[] ContentFiles = { "/Content/jquery-ui.css" };

            foreach (var ContentFile in ContentFiles)
            {
                var ScriptTag = new HtmlGenericControl { TagName = "link" };
                ScriptTag.Attributes.Add("rel", "stylesheet");
                ScriptTag.Attributes.Add("type", "text/css");
                ScriptTag.Attributes.Add("href", ResolveUrl(ContentFile));
                this.Page.Header.Controls.Add(ScriptTag);
            }

            //Add datepicker widget functions

            string BeginJavaScriptText = "<script>" + System.Environment.NewLine;
            string EndJavaScriptText = "</script>";

            string LowerBoundTextBoxFunction = "   $( function() {" + System.Environment.NewLine;
            LowerBoundTextBoxFunction = LowerBoundTextBoxFunction + "     $( '#TopPageContent_LowerBoundTextBox' ).datepicker();" + System.Environment.NewLine + "   } );";

            string UpperBoundTextBoxFunction = "   $( function() {" + System.Environment.NewLine;
            UpperBoundTextBoxFunction = UpperBoundTextBoxFunction + "     $( '#TopPageContent_UpperBoundTextBox' ).datepicker();" + System.Environment.NewLine + "   } );";

            string TotalJavaScriptText = BeginJavaScriptText + LowerBoundTextBoxFunction + System.Environment.NewLine + System.Environment.NewLine + UpperBoundTextBoxFunction + EndJavaScriptText;

            Page.Header.Controls.Add(new LiteralControl(TotalJavaScriptText));

            string qsReportLowerBound = Request.QueryString["lb"];
            string qsReportUpperBound = Request.QueryString["ub"];

            string CurrentURL = "/Referrals/ReferralsSpecialistCompletionReport.aspx";

            if (Session.Contents.Count == 0)
                Response.Redirect(ResolveUrl("/default.aspx?lnk=" + CurrentURL));
            else
            {
                Page.Title = "Referrals Specialist Completetion Report";

                HITIISLibrary.LogHITActivity(Int32.Parse(Session["HITID"].ToString()), Page.Title.ToString(), string.Empty, Request.Url.AbsoluteUri.ToString());
                
                if (!IsPostBack)
                {
                    DateTime Today = DateTime.Today;
                    DateTime ReportUpperBound;
                    DateTime ReportLowerBound;
                    DateTime ReportUB;
                    DateTime ReportLB;
                    
                    if (string.IsNullOrEmpty(qsReportLowerBound) && string.IsNullOrEmpty(qsReportUpperBound))
                    {
                        ReportUB = Today.AddDays(1);
                        ReportUpperBound = Today;

                        ReportLB = ReportUpperBound.AddDays(-6);
                        ReportLowerBound = ReportUpperBound.AddDays(-5);
                    }
                    else
                    {
                        ReportUpperBound = DateTime.Parse(qsReportUpperBound);
                        ReportUB = ReportUpperBound.AddDays(1);

                        ReportLowerBound = DateTime.Parse(qsReportLowerBound);
                        ReportLB = ReportLowerBound.AddDays(-1);
                    }
                    
                    ReportLBLabel.Text = ReportLB.ToShortDateString();
                    ReportLowerBoundLabel.Text = ReportLowerBound.ToShortDateString();
                    LowerBoundTextBox.Text = ReportLowerBound.ToShortDateString();

                    ReportUBLabel.Text = ReportUB.ToShortDateString();
                    ReportUpperBoundLabel.Text = ReportUpperBound.ToShortDateString();
                    UpperBoundTextBox.Text = ReportUpperBound.ToShortDateString();
                    
                    // UpdateChart() was here, just moved it outside the if statement.
                }
                
                
            }

            UpdateChart();

        }


    Jason Munsterteiger

    Thursday, February 20, 2020 9:42 PM
  • Moving the UpdateChart() method out of the IF statement into the current position shown in the previous post did not fix it.  Upon loading the page, the chart shows the element but it is a gray window.

    After selecting a date or refreshing the page a time or two, it will display data. 

    Thanks,

    Jason


    Jason Munsterteiger

    Thursday, February 20, 2020 10:05 PM
  • Hi Jason Munsterteiger,

    Thanks for your feedback.

    Since your code is related to ASP.NET, it will be more appropriate to ask your question in ASP.NET Forums for more efficient responses. 

    Thank you for your understanding.

    Best Regards,

    Xingyu Zhao


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.


    Friday, February 21, 2020 10:46 AM
    Moderator