Showing time in Y Axis of RadChart

Thread is closed for posting
2 posts, 0 answers
  1. Gopi
    Gopi avatar
    1 posts
    Member since:
    Feb 2012

    Posted 15 Feb 2012 Link to this post

    Hi,
    Is there any way to show the time data which is in the format of HH:mm and hours value can be greater than 24 hours, means the value can be 30:45, 50:34 etc. Actually I am dealing with an Transcription project and need to show the cumalative lenths of the audio files in the Y Axis. I changed the ValueFormat Property of the Y Axis to "ShortTime" but it is Accepting up to 23:59 only.

    And one more problem is the value is not plotted correctly , when I used ValueFormat as "ShortTime" on X- Axis

    I changed the X-Axis  ValueFormat Property  to "ShortTime" and gave the datetime field as datasource. But for 3:15 PM it is plotting the point at 11:00 AM.

    ASPX:
       <form id="form1" runat="server">
        <div>
            <telerik:RadScriptManager runat="server" ID="RadScriptManager">
            </telerik:RadScriptManager>
            <telerik:RadChart ID="RadChart1" runat="server" Width="1100px" Height="500px" AutoTextWrap="true"
                Skin="LightBlue" OnItemDataBound="RadChart1_ItemDataBound" 
                Legend-Visible="false">
                <PlotArea>
                    <XAxis AutoScale="false">
                        <Appearance ValueFormat="ShortTime">
                            <MajorGridLines Width="0" Color="153, 187, 208"></MajorGridLines>
                            <LabelAppearance RotationAngle="45" Position-AlignedPosition="Top">
                            </LabelAppearance>
                            <TextAppearance TextProperties-Color="72, 124, 160">
                            </TextAppearance>
                        </Appearance>
                    </XAxis>
                    <YAxis AutoScale="true">
                        <Appearance Color="153, 187, 208" MinorTick-Color="153, 187, 208" MajorTick-Color="153, 187, 208">
                            <MajorGridLines Color="153, 187, 208"></MajorGridLines>
                            <MinorGridLines Color="153, 187, 208"></MinorGridLines>
                            <TextAppearance TextProperties-Color="72, 124, 160">
                            </TextAppearance>
                        </Appearance>
                    </YAxis>
                </PlotArea>
                <Series>
                    <telerik:ChartSeries Type="Line" DataYColumn="Volume">
                        <Appearance LegendDisplayMode="SeriesName">
                            <PointMark Visible="True" Border-Width="2" Border-Color="DarkKhaki" Dimensions-AutoSize="true">
                                <Border Color="DarkKhaki" Width="2"></Border>
                            </PointMark>
                            <FillStyle MainColor="186, 207, 141" FillType="solid">
                                <FillSettings>
                                    <ComplexGradient>
                                        <telerik:GradientElement Color="243, 206, 119"></telerik:GradientElement>
                                        <telerik:GradientElement Color="236, 190, 82" Position="0.5"></telerik:GradientElement>
                                        <telerik:GradientElement Color="210, 157, 44" Position="1"></telerik:GradientElement>
                                    </ComplexGradient>
                                </FillSettings>
                            </FillStyle>
                            <TextAppearance TextProperties-Color="112, 93, 56">
                            </TextAppearance>
                            <Border Color="223, 170, 40"></Border>
                        </Appearance>
                    </telerik:ChartSeries>
                </Series>
            </telerik:RadChart>
            <telerik:RadToolTipManager ID="RadToolTipManager1" runat="server" Skin="Telerik"
                Width="200px" Animation="Slide" Position="TopCenter" EnableShadow="true" ToolTipZoneID="RadChart1"
                AutoTooltipify="true">
            </telerik:RadToolTipManager>
        </div>
        </form>


    .CS
    protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                const double hourStep = 1 / 24.0;
                double xStartTime = new DateTime(2008, 1, 1, 7, 0, 0, 0).ToOADate();
                double xEndTime = new DateTime(2008, 1, 1, 19, 0, 0, 0).ToOADate();
                
                RadChart1.PlotArea.XAxis.AddRange(xStartTime, xEndTime, hourStep);


                //double yStartTime = new DateTime(2008, 1, 1, 7, 0, 0, 0).ToOADate();
                //double yEndTime = new DateTime(2008, 1, 1, 19, 0, 0, 0).ToOADate();
                //RadChart1.PlotArea.YAxis.AddRange(yStartTime, yEndTime, hourStep);


                RadChart1.DataSource = GetSampleData();
                RadChart1.DataBind();
            }
        }
        private DataTable GetSampleData()
        {
            DataTable oDt = new DataTable();
            oDt.Columns.Add("Time", typeof(DateTime));
            oDt.Columns.Add("Volume",typeof(int));
            oDt.AcceptChanges();


            DataRow oDr = oDt.NewRow();
            oDr["Time"] = "8:00";
            oDr["Volume"] = "97";
            oDt.Rows.Add(oDr);


            oDr = oDt.NewRow();
            oDr["Time"] = "8:30";
            oDr["Volume"] = "78";
            oDt.Rows.Add(oDr);


            oDr = oDt.NewRow();
            oDr["Time"] = "9:30";
            oDr["Volume"] = "51";
            oDt.Rows.Add(oDr);
            oDt.AcceptChanges();


            oDr = oDt.NewRow();
            oDr["Time"] = "11:00";
            oDr["Volume"] = "23";
            oDt.Rows.Add(oDr);
            oDt.AcceptChanges();


            oDr = oDt.NewRow();
            oDr["Time"] = "15:59";
            oDr["Volume"] = "55";
            oDt.Rows.Add(oDr);
            oDt.AcceptChanges();
            return oDt;
        }




        protected void RadChart1_ItemDataBound(object sender, ChartItemDataBoundEventArgs e)
        {
            e.SeriesItem.ActiveRegion.Tooltip += "<b>Time:</b> " + ((DataRowView)e.DataItem)["Time"].ToString() + "\n <b>Volume:</b> " + e.SeriesItem.YValue;
        }


    I am attaching the graph obtained by above code. Is this a bug?
    Is there any solution for the above 2 problems. Please suggest some code.
  2. Peshito
    Admin
    Peshito avatar
    497 posts

    Posted 20 Feb 2012 Link to this post

    Hello,

    What you are trying to achieve is not supported out of the box. You can use either one of the chart's ValueFormats, or you could specify a custom format as well by using the CustomFormat property. More information about custom formats can be found here.

    Regarding your other issue, the values are not plotted correctly because of the column type used in your data table. You will need to change it from DateTime to double and also change your values from
    oDr["Time"] = "8:00";
    into
    oDr["Time"] = new DateTime(2008, 1, 1, 8, 0, 0, 0).ToOADate();

    Finally in order to plot the data points correctly, you will also have to specify the DataXColumn = "Time"

    Greetings,
    Peshito
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top