Change x-axis labels programmatically

Thread is closed for posting
5 posts, 1 answers
  1. Aaron Abdis
    Aaron Abdis avatar
    24 posts
    Member since:
    Mar 2005

    Posted 18 Oct 2011 Link to this post

    Please check this chart for reference: http://dl.dropbox.com/u/19767586/radchart-xaxis-labels-tochange.png

    Note how the x-axis labels, which also serve as the column headers for the datatable, go 1, 2, 3, ... 10.

    I need to change these so they show month names. That is, Jan, Feb, Mar, ... Oct.
    (the data fluctuates, showing all months 1 - current). I am generating/adding the dataseries to the graph in code.
    There are about a dozen different ChartSeries.
    cs = New TC.ChartSeries(mr("NAME"), Telerik.Charting.ChartSeriesType.Line)
    For Each lr As DataRow In ls.Rows
        i = New TC.ChartSeriesItem(CDbl(lr("LOANS")), MonthName(lr("MONTH")))
        i.Name = MonthName(lr("MONTH")) '// TRIED WITH AND WITHOUT THIS LINE
        i.Label.Visible = False
     
        cs.AddItem(i)
    Next
    chartMilestoneLoans.AddChartSeries(cs)

    I found this question, and based on the answer there, tried this
    chartMilestoneLoans.PlotArea.XAxis.Clear()
    chartMilestoneLoans.PlotArea.XAxis.AddRange(1, Now.Month, 1)
    For lc As Integer = 0 To (Now.Month - 1)
        chartMilestoneLoans.PlotArea.XAxis(lc).TextBlock.Text = MonthName(lc + 1)
    Next

    This doesn't throw any errors, ... but it also doesn't change the labels as expected.
    How can i replace the numbers with the month names?
  2. Evgenia
    Admin
    Evgenia avatar
    1407 posts

    Posted 21 Oct 2011 Link to this post

    Hello Aaron,

    The purpose of the Name property of the ChartSeriesItem is to be used as Legend Name in cases where you'd like to see each Items Names in the Legend rather than Series Names. You can find more about thishere. To achieve your scenario I'll suggest you this approach:
    You may set your XValues to be DateTimes but formatted so that you see only the Month name. For the purpose have in mind that XValue requires its values to be of float type. That's why DateTime values should be converted to their OLE Automation equivalents using ToOADate(). RadChart.XAxis.Appearance.ValueFormat property provides means to format X axis labels. In this case it is set to ShortDate and the CustomFormat to "MMM".
    You can set custom axis range after setting AutoScale property of the axis to false. With the step of 30 days you'll be able to see months per Axis Item Label.

    The attached project demonstrates the above described approach. Feel free to use/customize it so that it meets your requirements.

    I hope it helps.

    Best wishes,
    Evgenia
    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Aaron Abdis
    Aaron Abdis avatar
    24 posts
    Member since:
    Mar 2005

    Posted 21 Oct 2011 Link to this post

    Okay... thanks for the sample project. I got the month names showing below now.
    One problem though... the datatable is no longer showing anything beyond Jan and Feb!

    All the data is clearly still there as the actual chart itself is still correct...
    it just is not showing up below in the datatable for some reason!  :-O 

    Here is how it looks now, with the missing data:
    http://dl.dropbox.com/u/19767586/radchart-data-table-missing-data.png

    Here is the chart markup:
    <telerik:radchart id="chartMilestoneLoans" runat="server" defaulttype="Line" height="500px" width="800px">
        <charttitle>
            <appearance position-alignedposition="Top">
            </appearance>
            <textblock text="Pipeline Summary"></textblock></charttitle>
        <appearance>
            <border color="#9CAAC1" visible="True" />
        </appearance>
        <legend visible="False">
        </legend>
        <plotarea>
            <datatable visible="True">
            </datatable>
            <emptyseriesmessage visible="True">
                <appearance visible="True">
                </appearance>
            </emptyseriesmessage>
            <yaxis>
                <appearance>
                    <labelappearance rotationangle="-90">
                    </labelappearance>
                </appearance>
                <axislabel visible="True">
                    <appearance visible="True">
                    </appearance>
                    <textblock text="Loans">
                    </textblock>
                </axislabel>
            </yaxis>
            <appearance dimensions-margins="18%, 10px, 195px, 150px">
            </appearance>
        </plotarea>
    </telerik:radchart>

    And here is my current code binding the chart:
    Private Sub BindChart()
        chartMilestoneLoans.Skin = Telerik.SkinCharts
        chartMilestoneLoans.ChartTitle.TextBlock.Text = User.Broker & " Pipeline Summary for " & Now.Year
     
        chartMilestoneLoans.Clear()
     
        Dim ms = dbo.ExecuteDT(<s>SELECT NAME, DATEFIELD FROM portal.MILESTONES WHERE DATEFIELD IS NOT NULL ORDER BY NAME</s>)
        Dim df, SQL As String, ls As DataTable, cs As TC.ChartSeries, i As TC.ChartSeriesItem
     
        chartMilestoneLoans.AutoLayout = True
     
        chartMilestoneLoans.PlotArea.XAxis.Appearance.ValueFormat = Telerik.Charting.Styles.ChartValueFormat.ShortDate
        chartMilestoneLoans.PlotArea.XAxis.LayoutMode = Telerik.Charting.Styles.ChartAxisLayoutMode.Inside
        chartMilestoneLoans.PlotArea.XAxis.Appearance.CustomFormat = "MMM"
        chartMilestoneLoans.PlotArea.XAxis.AutoScale = False
        chartMilestoneLoans.PlotArea.XAxis.AddRange(DateTime.Parse(Now.Year & "-01-01").ToOADate(), DateTime.Parse(Now.Year & "-" & Now.Month + 1 & "-01").ToOADate(), 31)
     
        For Each mr As DataRow In ms.Rows
            df = mr("DATEFIELD")
            SQL = <s>SELECT VAL MONTH, ISNULL(COUNT(L.Loan_Number),0) LOANS
                        FROM system.NUMBERS N
                        LEFT JOIN encompass.LOANS L ON DATEPART(MONTH, L.<%= df %>) = N.VAL AND DATEPART(YEAR, L.<%= df %>) = DATEPART(YEAR, getdate())
                            AND L.SystemId = <%= SystemId %> AND L.Broker_Id = <%= User.BrokerId %>
                        WHERE N.VAL BETWEEN 1 AND DATEPART(MONTH, getdate())                          
                        GROUP BY N.VAL</s>
            ls = dbo.ExecuteDT(SQL)
     
            cs = New TC.ChartSeries(mr("NAME"), Telerik.Charting.ChartSeriesType.Line)
            For Each lr As DataRow In ls.Rows
                i = New TC.ChartSeriesItem(CDate(lr("MONTH") & "/01/" & Now.Year).ToOADate, CDbl(lr("LOANS")))
                i.Label.Visible = False
     
                cs.AddItem(i)
            Next
     
            chartMilestoneLoans.AddChartSeries(cs)
        Next
    End Sub
  5. Answer
    Evgenia
    Admin
    Evgenia avatar
    1407 posts

    Posted 26 Oct 2011 Link to this post

    Hi Aaron,

    The way DataTable shows its data is connected with the strict mode of the chart. Since you have provided your own XValues the strict mode is disabled and the DataTable gets "confused" - you see missing data.
    Here is a woraround. You can remove/comment the XValue binding so that your XValues are the default consequtive numbers 1,2,3 ... etc. Then you can use this approach for manually setting Axis Labels.

    Greetings,
    Evgenia
    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
  6. Aaron Abdis
    Aaron Abdis avatar
    24 posts
    Member since:
    Mar 2005

    Posted 26 Oct 2011 Link to this post

    Thanks! Here is my final code for setting the x-axis labels. Works PERFECT!

    chartMilestoneLoans.PlotArea.XAxis.AutoScale = False
    chartMilestoneLoans.PlotArea.XAxis.AddRange(1, Now.Month, 1)
    For lc As Integer = 1 To Now.Month
        chartMilestoneLoans.PlotArea.XAxis(lc - 1).TextBlock.Text = MonthName(lc)
    Next
    
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017