RadChart showing currrent page of RadGrid

[Harry Anderson]

I have a RadGrid that draws its data from a SP that is effectively the hours user load on a system by day sorted newest to oldest.

Date,0000,0100,0200,...2200,2300
2/10/2010, 12,45,65,....32,10
2/9/2010, 9,56,123,....65,23


I set the Page Size to 7  to effectively show me the last 7 days of data in the grid.  I ahve created a RadChart above the grid and would like it to display each of the 7 days  on the chart with the X-Axis being the Hour of the Day, and the legend reflecting the data.

aspx page

<asp:Content ID="Content2" runat="Server" ContentPlaceHolderID="Main">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    </telerik:RadScriptManager>

    <script type="text/javascript" language="javascript">
        function onRequestStart(sender, args) {
            if (args.get_eventTarget().indexOf("imgbtn_xls") >= 0 ||
                    args.get_eventTarget().indexOf("imgbtn_doc") >= 0) {

                args.set_enableAjax(false);
            }
        }
    </script>

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ReportGrid">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="ReportGrid" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <div class="boxlist" style="width: 1020px; left: -2px; top: 5px;">
        <table width="100%">
            <tr>
                <th class="shaded" width="100%" colspan="2">
                    <%=(string)Session["myPageName"] %>
                </th>
            </tr>
            <tr>
                <td>
                </td>
                <th style="text-align: right;">
                    <input type="button" value="Admin Home" onclick="location.href='Admin_Home.aspx'" />
                </th>
            </tr>
        </table>
        <table width="100%">
            <tr>
                <th>
                    Page Hits by Day
                </th>
            </tr>
            <tr>
            <td>
            <telerik:RadChart ID="RadChart1" runat="server" Height="350px" Width="1010px" Skin="default"
             Legend-Visible="false"
            ChartTitle-TextBlock-Text="Page Statistics by Day (7 day view)" DefaultType="Line">




<Legend Visible="False">
<Appearance Visible="False"></Appearance>
</Legend>


        </telerik:RadChart>

            </td>
            </tr>
            <tr>
                <td style="text-align: right;">
                    <table>
                        <tr>
                            <td>
                                <asp:ImageButton ID="imgbtn_xls" runat="server" AlternateText="Export to Excel" ImageUrl="~/images/xls.png"
                                    OnClick="imgbtn_xls_Click" />
                            </td>
                            <td>
                                <asp:ImageButton ID="imgbtn_doc" runat="server" AlternateText="Export to Word" ImageUrl="~/images/doc.png"
                                    OnClick="imgbtn_doc_Click" />
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td>
                    <telerik:RadGrid ID="grdApplicationStatistics" runat="server" ExportSettings-IgnorePaging="true"
                        HeaderStyle-Font-Bold="true" Font-Names="tahoma" PageSize="7" AllowPaging="true"
                        Width="1010px" Skin="Default" EnableEmbeddedSkins="false" OnPageIndexChanged="grdApplicationStatistics_PageIndexChanged">
                        <ExportSettings IgnorePaging="true" FileName="PageStatsbyDay" OpenInNewWindow="true"
                            ExportOnlyData="false">
                        </ExportSettings><PagerStyle Mode="NextPrev" />

                        <ClientSettings EnableRowHoverStyle="true">
                            <Resizing AllowRowResize="True" EnableRealTimeResize="True" ResizeGridOnColumnResize="True"
                                AllowColumnResize="True"></Resizing>
                            <Selecting AllowRowSelect="true" />
                        </ClientSettings>
                        <MasterTableView PageSize="7">
                        </MasterTableView>
                    </telerik:RadGrid>
                </td>
            </tr>
        </table>
    </div>
</asp:Content>

codebehind page

using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Configuration;

using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using Telerik.Web.UI;
using Telerik.Charting;

namespace XXXXXXXXXX.XXXXXX{
    /// <summary>
    /// Summary description for Stats.
    /// </summary>
    public partial class PTOPageStatsbyDay : PTOBasePage
    {

        protected void Page_Load(object sender, System.EventArgs e)
        {
            Session["myPageName"] = "PTO Page Stats by Day";
            this.Master._pageLabel = (string)Session["myPageName"];
            Session["HelpPage"] = "";

            //label_myPageName.Text = (string)Session["myPageName"];

            if (!IsPostBack)
            {
                User user = (User)Session["USER"];
                //Insure that the user has proper credentials for this page.
                if (!user.Sys_Role.Equals("S"))
                {
                    Response.Redirect((String)ConfigurationManager.AppSettings["SYS_NOAUTH_PAGE"]);
                    Application["i"] = null;
                }
                getData();
            }
            grdApplicationStatistics.MasterTableView.RenderColumns[1].Display = false;

        }
        protected void getData()
        {

            DataAccess da = new DataAccess();

            DateTime dt = DateTime.Now;
            // Get year, month, and day
            int year = dt.Year;
            DataSet ds = da.Report_PageStatisticsbyDay(year);
            grdApplicationStatistics.DataSource = ds;
            grdApplicationStatistics.DataBind();

            RadChart1.DataSource = ds;
            int curIndex = grdApplicationStatistics.CurrentPageIndex;
            int myStart = (curIndex-1)*grdApplicationStatistics.PageSize;
            int myEnd = (curIndex) * grdApplicationStatistics.PageSize;
            int myCntr = 0;
            foreach (ChartSeries series in RadChart1.Series)
            {
                series.Appearance.LabelAppearance.Visible = false;
                series.Visible = false;
                if (myCntr >=myStart && myCntr<=myEnd)
                    series.Visible = true;
            }
            myCntr++;


            RadChart1.DataBind();

        }
        protected void grdApplicationStatistics_PageIndexChanged(object source, Telerik.Web.UI.GridPageChangedEventArgs e)
        {
            getData();
        }
        protected void imgbtn_xls_Click(object sender, System.EventArgs e)
        {
            grdApplicationStatistics.AllowPaging = false;
            grdApplicationStatistics.ExportSettings.IgnorePaging = true;
            getData();
            grdApplicationStatistics.MasterTableView.ExportToExcel();
        }

        protected void imgbtn_doc_Click(object sender, System.EventArgs e)
        {
            grdApplicationStatistics.AllowPaging = false;
            grdApplicationStatistics.ExportSettings.IgnorePaging = true;

            getData();
            grdApplicationStatistics.MasterTableView.ExportToWord();
        }
        #region Web Form Designer generated code
        override protected void OnInit(EventArgs e)
        {
            //
            // CODEGEN: This call is required by the ASP.NET Web Form Designer.
            //
            InitializeComponent();
            base.OnInit(e);
        }

        /// <summary>
        /// Required method for Designer support - do not modify
        /// the contents of this method with the code editor.
        /// </summary>
        private void InitializeComponent()
        {

        }
        #endregion
    }
}

1) How do I get the RADChart to chart the data so that I have 7 series (one for each day displayed on the radgrid), and allow the 24 fields to be charted in the series.
2) Handle going to the next page and refreshing the RadChart to the RadGrid Display

I have been trying (with very little luck) for far too many hours to lick this, any help would be greatly appreciated..


Thanks
Harry Anderson
[e-mail]

[Harry Anderson]

Solved Question 1

Question 2 on Paging, is quasi functioning.  Open the page I get the chart of the first page of data.  Now go to next page, still shows 1st page of data, goto next page and now shows 2 page of data.  The Chart and the grid are out of sync by 1 page.  Code is attached, any suggestions would be nice...

        protected void Page_Load(object sender, System.EventArgs e)
        {
            Session["myPageName"] = "PTO Page Stats by Day";
            this.Master._pageLabel = (string)Session["myPageName"];
            Session["HelpPage"] = "";

            //label_myPageName.Text = (string)Session["myPageName"];

            if (!IsPostBack)
            {
                User user = (User)Session["USER"];
                //Insure that the user has proper credentials for this page.
                if (!user.Sys_Role.Equals("S"))
                {
                    Response.Redirect((String)ConfigurationManager.AppSettings["SYS_NOAUTH_PAGE"]);
                    Application["i"] = null;
                }
                getData();
                updateChart(1);
            }
            grdApplicationStatistics.MasterTableView.RenderColumns[1].Display = false;

        }
        protected void getData()
        {

            DataAccess da = new DataAccess();

            DateTime dt = DateTime.Now;
            // Get year, month, and day
            int year = dt.Year;
            DataSet ds = da.Report_PageStatisticsbyDay(year);
            grdApplicationStatistics.DataSource = ds;
            grdApplicationStatistics.DataBind();
            RadChart1.DataSource = grdApplicationStatistics.DataSource;
        }
        protected void updateChart(int startPage)
        {

            RadChart1.PlotArea.XAxis.AutoScale = false;
            RadChart1.PlotArea.XAxis.AddRange(1, 24, 1);
            RadChart1.PlotArea.XAxis.AxisLabel.TextBlock.Text = "Hour of the day";
            RadChart1.PlotArea.XAxis.AxisLabel.Visible = true;
            RadChart1.PlotArea.YAxis.AxisLabel.TextBlock.Text = "Hit Count";
            RadChart1.PlotArea.YAxis.AxisLabel.Visible = true;

            RadChart1.PlotArea.XAxis[0].TextBlock.Text = "0000";
            RadChart1.PlotArea.XAxis[1].TextBlock.Text = "0100";
            RadChart1.PlotArea.XAxis[2].TextBlock.Text = "0200";
            RadChart1.PlotArea.XAxis[3].TextBlock.Text = "0300";
            RadChart1.PlotArea.XAxis[4].TextBlock.Text = "0400";
            RadChart1.PlotArea.XAxis[5].TextBlock.Text = "0500";
            RadChart1.PlotArea.XAxis[6].TextBlock.Text = "0600";
            RadChart1.PlotArea.XAxis[7].TextBlock.Text = "0700";
            RadChart1.PlotArea.XAxis[8].TextBlock.Text = "0800";
            RadChart1.PlotArea.XAxis[9].TextBlock.Text = "0900";
            RadChart1.PlotArea.XAxis[10].TextBlock.Text = "1000";
            RadChart1.PlotArea.XAxis[11].TextBlock.Text = "1100";
            RadChart1.PlotArea.XAxis[12].TextBlock.Text = "1200";
            RadChart1.PlotArea.XAxis[13].TextBlock.Text = "1300";
            RadChart1.PlotArea.XAxis[14].TextBlock.Text = "1400";
            RadChart1.PlotArea.XAxis[15].TextBlock.Text = "1500";
            RadChart1.PlotArea.XAxis[16].TextBlock.Text = "1600";
            RadChart1.PlotArea.XAxis[17].TextBlock.Text = "1700";
            RadChart1.PlotArea.XAxis[18].TextBlock.Text = "1800";
            RadChart1.PlotArea.XAxis[19].TextBlock.Text = "1900";
            RadChart1.PlotArea.XAxis[20].TextBlock.Text = "2000";
            RadChart1.PlotArea.XAxis[21].TextBlock.Text = "2100";
            RadChart1.PlotArea.XAxis[22].TextBlock.Text = "2200";
            RadChart1.PlotArea.XAxis[23].TextBlock.Text = "2300";

            int myRowStart = startPage * grdApplicationStatistics.PageSize;
            int myRowEnd = (myRowStart + grdApplicationStatistics.PageSize);

            int seriesID = RadChart1.Series.Count; ;
            RadChart1.RemoveAllSeries();
            RadChart1.Series.ClearItems();
            RadChart1.Series.ClearDataBoundState();
            int myCurrentPage = grdApplicationStatistics.CurrentPageIndex;
            foreach (GridDataItem grdRow in grdApplicationStatistics.MasterTableView.Items)
            {
                //if (grdRow.RowIndex >= myRowStart && grdRow.RowIndex <= myRowEnd)
                //{
                    ChartSeries mySeries = new ChartSeries();
                    mySeries.Type = ChartSeriesType.Spline;
                    mySeries.Name = grdRow["date"].Text.ToString();
                    mySeries.AddItem(Convert.ToInt16(grdRow["0000"].Text.ToString()));
                    mySeries.AddItem(Convert.ToInt16(grdRow["0100"].Text.ToString()));
                    mySeries.AddItem(Convert.ToInt16(grdRow["0200"].Text.ToString()));
                    mySeries.AddItem(Convert.ToInt16(grdRow["0300"].Text.ToString()));
                    mySeries.AddItem(Convert.ToInt16(grdRow["0400"].Text.ToString()));
                    mySeries.AddItem(Convert.ToInt16(grdRow["0500"].Text.ToString()));
                    mySeries.AddItem(Convert.ToInt16(grdRow["0600"].Text.ToString()));
                    mySeries.AddItem(Convert.ToInt16(grdRow["0700"].Text.ToString()));
                    mySeries.AddItem(Convert.ToInt16(grdRow["0800"].Text.ToString()));
                    mySeries.AddItem(Convert.ToInt16(grdRow["0900"].Text.ToString()));
                    mySeries.AddItem(Convert.ToInt16(grdRow["1000"].Text.ToString()));
                    mySeries.AddItem(Convert.ToInt16(grdRow["1100"].Text.ToString()));
                    mySeries.AddItem(Convert.ToInt16(grdRow["1200"].Text.ToString()));
                    mySeries.AddItem(Convert.ToInt16(grdRow["1300"].Text.ToString()));
                    mySeries.AddItem(Convert.ToInt16(grdRow["1400"].Text.ToString()));
                    mySeries.AddItem(Convert.ToInt16(grdRow["1500"].Text.ToString()));
                    mySeries.AddItem(Convert.ToInt16(grdRow["1600"].Text.ToString()));
                    mySeries.AddItem(Convert.ToInt16(grdRow["1700"].Text.ToString()));
                    mySeries.AddItem(Convert.ToInt16(grdRow["1800"].Text.ToString()));
                    mySeries.AddItem(Convert.ToInt16(grdRow["1900"].Text.ToString()));
                    mySeries.AddItem(Convert.ToInt16(grdRow["2000"].Text.ToString()));
                    mySeries.AddItem(Convert.ToInt16(grdRow["2100"].Text.ToString()));
                    mySeries.AddItem(Convert.ToInt16(grdRow["2200"].Text.ToString()));
                    mySeries.AddItem(Convert.ToInt16(grdRow["2300"].Text.ToString()));
                    mySeries.Appearance.LabelAppearance.Visible = false;

                    RadChart1.Series.Add(mySeries);
                //}//end if (grdRow.RowIndex >= myRowStart && grdRow.RowIndex <= myRowEnd)
            }
            RadChart1.Legend.Visible = true;
            RadChart1.AutoLayout = true;

            //RadChart1.DataBind();


        }
        protected void grdApplicationStatistics_PageIndexChanged(object source, Telerik.Web.UI.GridPageChangedEventArgs e)
        {
            getData();
            updateChart(e.NewPageIndex);
        }
        protected void imgbtn_xls_Click(object sender, System.EventArgs e)
        {
            grdApplicationStatistics.AllowPaging = false;
            grdApplicationStatistics.ExportSettings.IgnorePaging = true;
            getData();
            grdApplicationStatistics.MasterTableView.ExportToExcel();
        }

        protected void imgbtn_doc_Click(object sender, System.EventArgs e)
        {
            grdApplicationStatistics.AllowPaging = false;
            grdApplicationStatistics.ExportSettings.IgnorePaging = true;

            getData();
            grdApplicationStatistics.MasterTableView.ExportToWord();
        }
        #region Web Form Designer generated code
        override protected void OnInit(EventArgs e)
        {
            //
            // CODEGEN: This call is required by the ASP.NET Web Form Designer.
            //
            InitializeComponent();
            base.OnInit(e);
        }

        /// <summary>
        /// Required method for Designer support - do not modify
        /// the contents of this method with the code editor.
        /// </summary>
        private void InitializeComponent()
        {

        }
        #endregion
    }

[Giuseppe]

Hello Harry,

Actually grdApplicationStatistics.MasterTableView.Items contains only the items from the current page (i.e. no additional checks for start/end range are necessary) but when PageIndexChanged server-side event is fired, the grdApplicationStatistics.MasterTableView.Items collection still holds the items from the "old" page and that is why you are observing the erroneous behavior. The Items collection is updated when the DataBound event is fired later in the lifecycle so you can achieve the desired effect like this:

ASPX:

<telerik:RadChart ID="RadChart1" runat="server" AutoLayout="true">
</telerik:RadChart>
<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" DataSourceID="SqlDataSource1"
    GridLines="None" OnDataBound="RadGrid1_DataBound">
    <MasterTableView AutoGenerateColumns="False" DataSourceID="SqlDataSource1">
        <RowIndicatorColumn>
            <HeaderStyle Width="20px"></HeaderStyle>
        </RowIndicatorColumn>
        <ExpandCollapseColumn>
            <HeaderStyle Width="20px"></HeaderStyle>
        </ExpandCollapseColumn>
        <Columns>
            <telerik:GridBoundColumn DataField="UnitPrice" DataType="System.Decimal" HeaderText="UnitPrice"
                SortExpression="UnitPrice" UniqueName="UnitPrice">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="ProductID" DataType="System.Int32" HeaderText="ProductID"
                SortExpression="ProductID" UniqueName="ProductID">
            </telerik:GridBoundColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString2 %>"
    SelectCommand="SELECT [UnitPrice], [ProductID] FROM [Order Details]" />

C#:

protected void RadGrid1_DataBound(object sender, EventArgs e)
{
    RadChart1.Series.Clear();

    ChartSeries series = new ChartSeries();

    foreach (GridDataItem grdRow in RadGrid1.MasterTableView.Items)
    {
        series.AddItem(Convert.ToDouble(grdRow["UnitPrice"].Text, CultureInfo.InvariantCulture));
    }

    RadChart1.Series.Add(series);
}

Hope this helps.


Kind regards,
Manuel
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Harry Anderson]

Thanks, that was very subtle.