Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

AdditionalYAxes on a RadHTMLChart

4 Answers 110 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Joseph
Top achievements
Rank 1
Joseph asked on 30 Oct 2014, 10:22 PM
10-30-2014-3-14-44-pm.jpg
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

4 Answers, 1 is accepted

Sort by
0
Accepted
Danail Vasilev
Telerik team
answered on 04 Nov 2014, 08:29 AM
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.

 
0
Joseph
Top achievements
Rank 1
answered on 04 Nov 2014, 05:00 PM
10-29-2014-3-05-18-pm.jpg
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>
0
Joseph
Top achievements
Rank 1
answered on 04 Nov 2014, 05:18 PM
Should i use PlotArea.AdditionalYAxes.AddRange?  If yes, I'm unable to find samples in how to use that.  Thank You again
0
Joseph
Top achievements
Rank 1
answered on 04 Nov 2014, 07:09 PM
I figured it out, Thank you, it was the $ on the data.
Tags
General Discussions
Asked by
Joseph
Top achievements
Rank 1
Answers by
Danail Vasilev
Telerik team
Joseph
Top achievements
Rank 1
Share this question
or