This is a migrated thread and some comments may be shown as answers.

AdditionalYAxes on a RadHTMLChart

4 Answers 230 Views

General Discussions

This is a migrated thread and some comments may be shown as answers.

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

Accepted

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.

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>