Chart issue with time values in X axis

Thread is closed for posting
6 posts, 0 answers
  1. john
    john avatar
    32 posts
    Member since:
    Nov 2010

    Posted 19 Dec 2011 Link to this post

    Hello,

    I'm experiencing some issues with RadChart when using time values in X axis.

    I'm trying to develop a sample web for displaying measures that are periodically registered from a source. These measures are displayed using both a grid and a chart. I read the measures from the last minute and I show its values in the grid (date/time of the measure and its value), and in the chart (x axis show the time and y axis shows the value of the measures).

    For example, supposing that every 5 seconds we have a new measure, we will show 13 measures in a full minute. with a timer, I'm reading the measures and updating the grid and the chart with the values of the last minute. The problem is that, sometimes, the chart is not displaying all the measures (only displays 11 values, while the grid displays 13 values).
    The measures list object is the same for the grid and the chart (I use DataSource and DataBind() for both), and the chart sometimes doesn't work fine.

    What is happening with this? Do you know if there is a known issue for causing this situation?

    Here's the code from a similar app that reproduces the issue using random values:
        public class Measure
        {
            private DateTime mtime; //time of measurement
            public DateTime Mtime
            {
                get { return mtime; }
                set { mtime = value; }
            }
     
            private double numericMtime; //for chart representation
            public double NumericMtime
            {
                get { return numericMtime; }
                set { numericMtime = value; }
            }
     
            private double value; //value of measurement
            public double Value
            {
                get { return this.value; }
                set { this.value = value; }
            }
     
            public Measure(DateTime dt, double v)
            {
                mtime = dt;
                numericMtime = dt.ToOADate();
                value = v;
            }
        }
     
     
     
    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                GenerateMeasures();
     
                myTimer.Interval = 10 * 1000;
                myTimer.Enabled = true;
     
                startBtn.Enabled = false;
                stopBtn.Enabled = true;
            }
        }
     
        protected void myTimer_Tick(object sender, EventArgs e)
        {
            GenerateMeasures();
        }
     
        private void GenerateMeasures()
        {
            DateTime start, end;
            start = DateTime.Now;
            end = start.AddSeconds(60); //full period
     
            double interval = 5; //interval between measures
     
            //generate new random measures list
            Random r = new Random();
            Measure m;
            List<Measure> measureList = new List<Measure>();
            DateTime tcont = start;
            while (tcont <= end)
            {
                m = new Measure(tcont, r.Next(5, 95));
                measureList.Add(m);
     
                tcont = tcont.AddSeconds(interval);
            }
     
            //set data to grid
            myGrid.DataSource = measureList;
            myGrid.DataBind();
     
            //config chart (x axis)
            double tenSencondsStep = (1.0 / (24.0 * 60.0 * 60.0))*10.0;
            myChart.PlotArea.XAxis.AutoScale = false;
            myChart.PlotArea.XAxis.AddRange(measureList[0].NumericMtime, measureList[measureList.Count - 1].NumericMtime, tenSencondsStep);
             
            //set data to chart
            myChart.DataSource = measureList;
            myChart.DataBind();
        }
     
        protected void startBtn_Click(object sender, EventArgs e)
        {
            myTimer.Enabled = true;
     
            startBtn.Enabled = false;
            stopBtn.Enabled = true;
        }
     
        protected void stopBtn_Click(object sender, EventArgs e)
        {
            myTimer.Enabled = false;
     
            startBtn.Enabled = true;
            stopBtn.Enabled = false;
        }
    }


    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>
     
    <%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Charting" tagprefix="telerik" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <head runat="server">
        <title></title>
        <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
            </Scripts>
        </telerik:RadScriptManager>
        <script type="text/javascript">
            //Put your JavaScript code here.
        </script>
        <asp:Timer ID="myTimer" runat="server" Interval="5000" ontick="myTimer_Tick">
        </asp:Timer>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        </telerik:RadAjaxManager>
        <div>
     
            <table style="width:100%;">
                <tr>
                    <td style="width: 260px;">
                        <telerik:RadGrid ID="myGrid" runat="server"
                            AllowSorting="True" AutoGenerateColumns="False" Height="350px"
                            GridLines="None" Width="250px">
                            <ClientSettings>
                                <Scrolling AllowScroll="True" />
                            </ClientSettings>
                            <MasterTableView NoMasterRecordsText="No measures." GridLines="None"
                                TableLayout="Fixed">
                                <RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">
                                </RowIndicatorColumn>
                                <ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column">
                                </ExpandCollapseColumn>
                                <Columns>
                                    <telerik:GridBoundColumn DataField="Mtime"
                                        DataFormatString="{0:dd/MM HH:mm:ss}" HeaderText="Date/Time"
                                        UniqueName="Mtime">
                                        <HeaderStyle HorizontalAlign="Left" Width="70px"  Font-Size="7.9pt" Wrap="False" />
                                        <ItemStyle HorizontalAlign="Left" Width="70px" Font-Size="7.9pt" Wrap="False" />
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="Value"
                                        DataFormatString="{0:0.#}" HeaderText="Value" UniqueName="Value">
                                        <HeaderStyle HorizontalAlign="Center" Width="35px"  Font-Size="7.9pt"/>
                                        <ItemStyle HorizontalAlign="Center" Width="35px"  Font-Size="7.9pt" ForeColor="80, 80, 80"/>
                                    </telerik:GridBoundColumn>
                                </Columns>
                                <EditFormSettings>
                                    <EditColumn FilterControlAltText="Filter EditCommandColumn column">
                                    </EditColumn>
                                </EditFormSettings>
                            </MasterTableView>
                            <FilterMenu EnableImageSprites="False">
                            </FilterMenu>
                            <HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default"
                                EnableImageSprites="True">
                            </HeaderContextMenu>
                        </telerik:RadGrid>
                    </td>
     
                    <td>
                        <telerik:RadChart ID="myChart" runat="server" DefaultType="Line" 
                            Skin="LightGreen" Width="650px" Height="450px">
                                    <Appearance>
                                        <FillStyle MainColor="Transparent">
                                        </FillStyle>
                                        <Border Color="DarkGreen" Visible="False" />
                                    </Appearance>
                                    <Series>
                                        <telerik:ChartSeries DataXColumn="NumericMtime"
                                            DataYColumn="Value" Name="Measure" Type="Line">
                                            <Appearance>
                                                <FillStyle FillType="Solid" MainColor="230,126,0">
                                                    <FillSettings>
                                                        <ComplexGradient>
                                                            <telerik:GradientElement Color="243, 206, 119" />
                                                            <telerik:GradientElement Color="236, 190, 82" Position="0.5" />
                                                            <telerik:GradientElement Color="210, 157, 44" Position="1" />
                                                        </ComplexGradient>
                                                    </FillSettings>
                                                </FillStyle>
                                                <LabelAppearance Visible="False">
                                                </LabelAppearance>
                                                <PointMark Visible="True" Dimensions-AutoSize="False" Dimensions-Height="5px" Dimensions-Width="5px">
                                                    <FillStyle MainColor="196,108,0"  FillType="Solid">
                                                    </FillStyle>
                                                </PointMark>
                                                <TextAppearance TextProperties-Color="112, 93, 56">
                                                </TextAppearance>
                                                <Border Color="176, 100, 75" />
                                            </Appearance>
                                        </telerik:ChartSeries>
                                    </Series>
                                    <Legend Visible="False">
                                        <Appearance Corners="Round, Round, Round, Round, 6" Overflow="Row"
                                            Position-AlignedPosition="Top">
                                            <ItemTextAppearance TextProperties-Color="113, 94, 57"                                                               
                                                TextProperties-Font="Segoe UI, 8pt">
                                            </ItemTextAppearance>
                                            <Border Color="225, 217, 201" />
                                            <Shadow Blur="50" />
                                        </Appearance>
                                    </Legend>
                                    <PlotArea>
                                        <EmptySeriesMessage>
                                            <TextBlock Text="No measures.">
                                                <Appearance TextProperties-Color="Gray"
                                                    TextProperties-Font="Segoe UI, 9pt">
                                                </Appearance>
                                            </TextBlock>
                                        </EmptySeriesMessage>
                                        <XAxis AutoScale="True" LayoutMode="Normal">
                                            <Appearance Color="226, 218, 202" MajorTick-Color="88, 138, 77"
                                                ValueFormat="ShortDate" CustomFormat="HH:mm:ss">
                                                <MajorGridLines Color="177, 207, 170" />
                                                <LabelAppearance RotationAngle="90" Dimensions-AutoSize="True" Dimensions-Height="100px" Dimensions-Width="100px">
                                                </LabelAppearance>
                                                <TextAppearance TextProperties-Color="57, 78, 38"
                                                    TextProperties-Font="Segoe UI, 8pt"
                                                    Dimensions-Margins="1px, 1px, 1px, 20px">
                                                </TextAppearance>
                                            </Appearance>
                                            <AxisLabel Visible="False">
                                                <TextBlock>
                                                    <Appearance TextProperties-Color="112, 93, 56">
                                                    </Appearance>
                                                </TextBlock>
                                            </AxisLabel>
                                        </XAxis>
                                        <YAxis IsZeroBased="False" AutoScale="True" >
                                            <Appearance Color="226, 218, 202" MajorTick-Color="88, 138, 77"
                                                MinorTick-Color="114, 100, 61">
                                                <MajorGridLines Color="177, 207, 170" />
                                                <MinorGridLines Color="231, 225, 212" />
                                                <TextAppearance TextProperties-Color="57, 78, 38"
                                                    TextProperties-Font="Segoe UI, 8pt">
                                                </TextAppearance>
                                            </Appearance>
                                            <AxisLabel Visible="True">
                                                <Appearance Visible="True">
                                                </Appearance>
                                                <TextBlock Visible="False">
                                                    <Appearance TextProperties-Color="112, 93, 56">
                                                    </Appearance>
                                                </TextBlock>
                                            </AxisLabel>
                                        </YAxis>
     
                                    <Appearance>
                                    <FillStyle MainColor="254, 255, 228" SecondColor="Transparent"></FillStyle>
     
                                    <Border Color="226, 218, 202"></Border>
                                    </Appearance>
     
                                    </PlotArea>
                                    <ChartTitle Visible="False">
                                    <Appearance Visible="False">
                                    <FillStyle MainColor=""></FillStyle>
                                    </Appearance>
     
                                    <TextBlock>
                                    <Appearance TextProperties-Color="77, 153, 4"></Appearance>
                                    </TextBlock>
                                    </ChartTitle>
                                </telerik:RadChart>
     
                    </td>
                </tr>
                <tr>
                    <td style="width: 260px">
                         </td>
     
                    <td>
                         </td>
                </tr>
                <tr>
                    <td style="width: 260px">
                        <telerik:RadButton ID="startBtn" runat="server" onclick="startBtn_Click"
                            Text="Start">
                        </telerik:RadButton>
     <telerik:RadButton ID="stopBtn" runat="server" onclick="stopBtn_Click" Text="Stop">
                        </telerik:RadButton>
                    </td>
     
                    <td>
                         </td>
                </tr>
            </table>
     
        </div>
        </form>
    </body>
    </html>

    Regards,
    John.
  2. john
    john avatar
    32 posts
    Member since:
    Nov 2010

    Posted 22 Dec 2011 Link to this post

    Please, anyone could help me with this issue?
    Thanks in advance...
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ves
    Admin
    Ves avatar
    2879 posts

    Posted 22 Dec 2011 Link to this post

    Hi John,

    You can find a similar example here.

    Kind regards,
    Ves
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  5. john
    john avatar
    32 posts
    Member since:
    Nov 2010

    Posted 22 Dec 2011 Link to this post

    Hi, Ves.

    Have you read my post and/or tried the code I wrote? I know how to use your chart control with time values in X axis (I've read the documentation and tried your samples).
    The problem is that the chart control doesn't work correctly, because sometimes doesn't show all the data that is assigned as datasource.

    Could you try the sample I post and tell me what is happening? Maybe is an error of my implementation, but I think there is a bug in the chart when using time values in x axis.

    Regards,
    John.
  6. Ves
    Admin
    Ves avatar
    2879 posts

    Posted 23 Dec 2011 Link to this post

    Hi John,

    Please, accept my apologies for not providing the best possible answer. This seems to be a double precision issue. Sometimes the value of

    measureList[0].NumericMtime + 6*tenSencondsStep // the value that should correspond to the last axis tick

    is larger than
    measureList[measureList.Count - 1].NumericMtime // the actual value used as range end


    by a tiny little bit, which is alas enough for the chart not to create the last item. Please, use the former value as max value for X axis:

    myChart.PlotArea.XAxis.AddRange(measureList[0].NumericMtime, measureList[0].NumericMtime + 6*tenSencondsStep, tenSencondsStep);


    Best regards,
    Ves
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  7. john
    john avatar
    32 posts
    Member since:
    Nov 2010

    Posted 26 Dec 2011 Link to this post

    Thanks for your response. Using that method for assigning min and max values for x axis solves the issue.

    Anyway, I think the chart should work as expected. If the function AddRange() supports a max value, this value should be included in the representation of the chart (and not discarded by double precission problems).

    Regards,
    John.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017