Showing time in Y Axis of RadChart

[Gopi]

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.

[Peshito]

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