AdditionalYAxes on a RadHTMLChart

5 posts, 1 answers
  1. Joseph
    Joseph avatar
    29 posts
    Member since:
    Jun 2014

    Posted 30 Oct 2014 Link to this post

    I'm trying to add a lineseries on an existing RadhtmlChart that is a columnseries.  Image attached - this is as far as I got following your page Multiple Y-axes demo.  The Columnseries values and lineseires values are different that is why i created a AdditionalAxis (sample below).  I'm populating the data via datatable to RadHTMLChart.Datasource()
    1.  how do i populate seperate Y axis
    2.  how to show the lineseries.
    Please advice, thank you.

    <telerik:RadHtmlChart runat="server" Width="700px" Height="500px" ID="DashboardMonthlyChart" Skin="Vista">
            <PlotArea>
                <Series>
                    <telerik:ColumnSeries DataFieldY="TotalClicks" Name="Total Clicks" Stacked="True">
                        <LabelsAppearance Visible="false"></LabelsAppearance>
                        <TooltipsAppearance Color="White" />
     
                    </telerik:ColumnSeries>
                    <telerik:ColumnSeries DataFieldY="TotalCalls" Name="Total Calls">
                        <LabelsAppearance Visible="false"></LabelsAppearance>
                        <TooltipsAppearance Color="White" />
     
                    </telerik:ColumnSeries>
                    <telerik:LineSeries AxisName="AdditionalAxis" Name="Cost Per Contact">
                        <LabelsAppearance Visible="false"></LabelsAppearance>
                        <TooltipsAppearance Color="White" />
                    </telerik:LineSeries>
                </Series>
     
                <XAxis DataLabelsField="Month">
     
                    <LabelsAppearance RotationAngle="75" Step="1">
                    </LabelsAppearance>
     
                    <TitleAppearance Text="">
                    </TitleAppearance>
                    <AxisCrossingPoints>
                        <telerik:AxisCrossingPoint Value = "0" />
                        <telerik:AxisCrossingPoint Value = "12" />
                    </AxisCrossingPoints>
     
                </XAxis>
     
                <YAxis>
     
                    <TitleAppearance Text="">
                    </TitleAppearance>
     
                </YAxis>
                <AdditionalYAxes>
                    <telerik:AxisY Name="AdditionalAxis" Color="Red" Width="3">
                        <TitleAppearance Text = "Cost Per Contact">
                            <TextStyle Color="Black" />
                        </TitleAppearance>
                        <LabelsAppearance>
                            <TextStyle Color="Black" />
                        </LabelsAppearance>
                    </telerik:AxisY>
                </AdditionalYAxes>
     
            </PlotArea>
     
            <Legend>
     
                <Appearance Visible="true" Position="Top">
                </Appearance>
     
            </Legend>
        </telerik:RadHtmlChart>
    Private Sub LoadDashboardDetails()
            Dim dtPerformance As DataTable
            Dim IYPPerformanceInfo As XElement = Nothing
     
            '//Rerence WCF service. 
            Dim oypmservice As New CL_ADOMDService.WCFAdomdServiceClient
            '//Data returned as XElement
            IYPPerformanceInfo = oypmservice.GetIYPDashboardByMonth(Session("AcctNum"), ViewState("PubInitID"), ViewState("StartDate"), ViewState("EndDate"), True)
     
            ''//Convert XElement to Datatable
            dtPerformance = clMisc.GetDataTableFromXMLElement(IYPPerformanceInfo)
     
     
     
            '//Store data in Session
            Dim dtPerformanceRows As DataTable
            dtPerformanceRows = dtPerformance.Select("Month<>'GroupHeader'").CopyToDataTable
     
            dtPerformanceRows.Columns.Add(New DataColumn("MonthNumber", GetType(Date)))
     
            For Each dr In dtPerformanceRows.Rows
                dr("MonthNumber") = CDate(dr("Month")) 'Split(dr("Month").ToString.Trim, " ")(0)
            Next
     
            ViewState("IYPDashboard") = dtPerformanceRows
            'testgrid.DataSource = dtPerformanceRows
            'testgrid.DataBind()
     
            If dtPerformance IsNot Nothing Then
     
                If dtPerformanceRows.Columns.Contains("Total Clicks") = False Then
                    dtPerformanceRows.Columns.Add("Total Clicks", GetType(Integer))
                End If
     
                If dtPerformanceRows.Columns.Contains("Total Calls") = False Then
                    dtPerformanceRows.Columns.Add("Total Calls", GetType(Integer))
                End If
     
                If dtPerformanceRows.Columns.Contains("Cost Per Contact") = False Then
                    dtPerformanceRows.Columns.Add("Cost Per Contact", GetType(Double))
                End If
     
                LoadDetailChart()
                DashboardDetailsListView.DataSource = dtPerformanceRows.Select("", "MonthNumber Asc").CopyToDataTable
                DashboardDetailsListView.DataBind()
            End If
     
            DashboardMonthlyChart.ChartTitle.Text = ViewState("PubName")
     
            DashboardMonthlyChart.PlotArea.XAxis.AxisCrossingPoints(1).Value = Decimal.Parse(12)
            DashboardMonthlyChart.ChartTitle.Appearance.TextStyle.Bold = True
            DashboardMonthlyChart.ChartTitle.Appearance.Align = Telerik.Web.UI.HtmlChart.ChartTitleAlign.Left
            DashboardMonthlyChart.Legend.Appearance.TextStyle.Margin = "8"
            DashboardMonthlyChart.PlotArea.XAxis.MajorGridLines.Visible = False
            DashboardMonthlyChart.PlotArea.XAxis.MinorGridLines.Visible = False
            DashboardMonthlyChart.PlotArea.YAxis.MajorGridLines.Visible = True
            DashboardMonthlyChart.PlotArea.YAxis.MinorGridLines.Visible = False
     
        End Sub
     
        Private Sub LoadDetailChart()
            Dim dtMonthlyDetail As DataTable
            dtMonthlyDetail = ViewState("IYPDashboard")
            Dim dtChartData As DataTable
     
            Dim ColumnNames() As String
     
            Dim dc As DataColumn
     
            ColumnNames = "Month,Total Clicks,Total Calls,Total Contacts,Cost Per Contact,MonthNumber".Split(",")
     
     
     
            Dim view As DataView
            view = New DataView(dtMonthlyDetail)
            dtChartData = view.ToTable(True, ColumnNames).Select("", "MonthNumber Asc").CopyToDataTable
     
            For Each dc In dtChartData.Columns
                dc.ColumnName = dc.ColumnName.Replace(" ", "")
            Next
     
            DashboardMonthlyChart.DataSource = dtChartData
            DashboardMonthlyChart.DataBind()
     
     
        End Sub

  2. Answer
    Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 04 Nov 2014 Link to this post

    Hi Joseph,

    From the provided code snippet it seems that you haven't set the DataFieldY property of the LineSeries. For example:
    ASPX:
    <telerik:RadHtmlChart runat="server" Width="700px" Height="500px" ID="DashboardMonthlyChart" Skin="Vista">
        <PlotArea>
            <Series>
                <telerik:ColumnSeries DataFieldY="TotalClicks" Name="Total Clicks" Stacked="True">
                    <LabelsAppearance Visible="false"></LabelsAppearance>
                    <TooltipsAppearance Color="White" />
                </telerik:ColumnSeries>
                <telerik:ColumnSeries DataFieldY="TotalCalls" Name="Total Calls">
                    <LabelsAppearance Visible="false"></LabelsAppearance>
                    <TooltipsAppearance Color="White" />
                </telerik:ColumnSeries>
                <telerik:LineSeries  DataFieldY="Total3" AxisName="AdditionalAxis" Name="Cost Per Contact">
                    <LabelsAppearance Visible="false"></LabelsAppearance>
                    <TooltipsAppearance Color="White" />
                </telerik:LineSeries>
            </Series>
            <XAxis DataLabelsField="Month">
                <LabelsAppearance RotationAngle="75" Step="1">
                </LabelsAppearance>
                <TitleAppearance Text="">
                </TitleAppearance>
                <AxisCrossingPoints>
                    <telerik:AxisCrossingPoint Value="0" />
                    <telerik:AxisCrossingPoint Value="12" />
                </AxisCrossingPoints>
            </XAxis>
            <YAxis>
                <TitleAppearance Text="">
                </TitleAppearance>
            </YAxis>
            <AdditionalYAxes>
                <telerik:AxisY Name="AdditionalAxis" Color="Red" Width="3">
                    <TitleAppearance Text="Cost Per Contact">
                        <TextStyle Color="Black" />
                    </TitleAppearance>
                    <LabelsAppearance>
                        <TextStyle Color="Black" />
                    </LabelsAppearance>
                </telerik:AxisY>
            </AdditionalYAxes>
        </PlotArea>
        <Legend>
            <Appearance Visible="true" Position="Top">
            </Appearance>
        </Legend>
    </telerik:RadHtmlChart>

    VB:
    Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
        DashboardMonthlyChart.DataSource = GetData()
        DashboardMonthlyChart.DataBind()
    End Sub
     
    Protected Function GetData() As DataTable
        Dim tbl As New DataTable()
        tbl.Columns.Add(New DataColumn("TotalClicks"))
        tbl.Columns.Add(New DataColumn("TotalCalls"))
        tbl.Columns.Add(New DataColumn("Total3"))
        tbl.Columns.Add(New DataColumn("Month"))
     
        tbl.Rows.Add(New Object() {50, 26, 1138, "Month1"})
        tbl.Rows.Add(New Object() {10, 22, 2233, "Month2"})
     
        Return tbl
    End Function


    Regards,
    Danail Vasilev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Joseph
    Joseph avatar
    29 posts
    Member since:
    Jun 2014

    Posted 04 Nov 2014 in reply to Danail Vasilev Link to this post

    Hi Danail,

    Thanks for your reply.  I did that and still no line.  Attached is a sample data, you will notice that Cost Per Contact has a totally different values as the column values.  Please advice.

    <Series>
                    <telerik:ColumnSeries DataFieldY="TotalClicks" Name="Total Clicks" Stacked="True">
                        <LabelsAppearance Visible="false"></LabelsAppearance>
                        <TooltipsAppearance Color="White" />
     
                    </telerik:ColumnSeries>
                    <telerik:ColumnSeries DataFieldY="TotalCalls" Name="Total Calls">
                        <LabelsAppearance Visible="false"></LabelsAppearance>
                        <TooltipsAppearance Color="White" />
     
                    </telerik:ColumnSeries>
                    <telerik:LineSeries DataFieldY="CostPerContact" AxisName="AdditionalAxis" Name="Cost Per Contact">
                        <LabelsAppearance Visible="true"></LabelsAppearance>
                        <TooltipsAppearance Color="White" />
                    </telerik:LineSeries>
                    <%--<telerik:ColumnSeries DataFieldY="TotalContacts" Name="Total Contacts">
                                     <LabelsAppearance Visible ="false"></LabelsAppearance>
                                    <TooltipsAppearance Color="White" />
     
                                </telerik:ColumnSeries>--%>
                </Series>
  5. Joseph
    Joseph avatar
    29 posts
    Member since:
    Jun 2014

    Posted 04 Nov 2014 Link to this post

    Should i use PlotArea.AdditionalYAxes.AddRange?  If yes, I'm unable to find samples in how to use that.  Thank You again
  6. Joseph
    Joseph avatar
    29 posts
    Member since:
    Jun 2014

    Posted 04 Nov 2014 Link to this post

    I figured it out, Thank you, it was the $ on the data.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017