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

Setting location of additional Y Axis programmatically

5 Answers 252 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Daniel
Top achievements
Rank 1
Daniel asked on 07 Apr 2014, 02:34 AM
Hello,

I understand that the Q1 2014 version of the radHTMLChart allows the location of an additional Y axis can be specified.

The documentation describes how to specify the AxisCrossingPoint through aspx, but my chart is created programmatically.

Attached is a screen shot of how the graph currently looks. I would like to move the additional Y axis (the one that runs 0 - 6) to the right hand side of the graph.
My code is below.

Thanks to anybody who can assist.

Daniel

public void SetupSlotsReleasedChart(RadHtmlChart radChart)
{
    DataTable dtDataTable = new DataTable();
    ResultData oResultData = new ResultData();
    InternetHomeController oController = new InternetHomeController();
 
    // Get Tenant KPI Data for a specific Tenant KPI ID (for Homepage Graph)
    oResultData = oController.GetKPIGraphData(ref dtDataTable);
 
    // Set the Chart Title and Set the X Axis and Y Axis Labels
    radChart.ChartTitle.Text = "Slots Released";
    radChart.PlotArea.XAxis.TitleAppearance.Text = "Month";
    radChart.PlotArea.YAxis.TitleAppearance.Text = "No. Hourly Slots";
 
    // The "Total Slots Value" will be the bar graph
    ColumnSeries totalSlotsValueColumnSeries = new ColumnSeries();
 
    // The "Total Slots Failed Value" will be the bar graph
    ColumnSeries totalSlotsFailedValueColumnSeries = new ColumnSeries();
 
    // Add and additional Y axis to be used for the Slots Released Percentageand Slots Released Target value series
    AxisY axisY = new AxisY();
    axisY.Name = "Percentage_Axis";
    radChart.PlotArea.AdditionalYAxes.Add(axisY);
 
    // The "Slots Released Percentage Value" will be a line graph
    LineSeries slotsValueLineSeries = new LineSeries();
    // This series will use the additional Y axis created above
    slotsValueLineSeries.AxisName = "Percentage_Axis";
     
    // The "Slots Released Target Value" will be a line graph
    LineSeries slotsTargetValueLineSeries = new LineSeries();
    // This series will use the additional Y axis created above
    slotsTargetValueLineSeries.AxisName = "Percentage_Axis";
     
    // Do not show the number values on the line graphs
    slotsValueLineSeries.LabelsAppearance.Visible = false;
    slotsTargetValueLineSeries.LabelsAppearance.Visible = false;
 
    // Display Legend on graph for the Value and Target series
    slotsValueLineSeries.Name = "Slots Released %";
    slotsTargetValueLineSeries.Name = "Target";
 
    // Display Legend on graph for the Total Slots and Total Slots Failed values (bar chart)
    totalSlotsValueColumnSeries.Name = "Total Slots";
    totalSlotsFailedValueColumnSeries.Name = "Total Slots Failed";
 
    foreach (DataRow row in dtDataTable.Rows)
    {
        // Populate the Total Slots Value bar graph series
        totalSlotsValueColumnSeries.SeriesItems.Add(Decimal.Parse(row["SRTotalSlotsValue"].ToString()));
 
        // Populate the Total Slots Failed Value bar graph series
        totalSlotsFailedValueColumnSeries.SeriesItems.Add(Decimal.Parse(row["SRTotalSlotsFailedValue"].ToString()));
 
        // Populate the Slots Released Percentage Value line graph series
        slotsValueLineSeries.SeriesItems.Add(Decimal.Parse(row["SRValue"].ToString()));
 
        // Populate the Slots Released Target line graph series
        slotsTargetValueLineSeries.SeriesItems.Add(Int32.Parse(row["SRTargetValue"].ToString()));
 
        // Set the labels on the X Axis
        AxisItem xAxisItem = new AxisItem(row["MonthDesc"].ToString());
        radChart.PlotArea.XAxis.Items.Add(xAxisItem);
    }
 
    // Add the Total Slots Value bar graph to the plot area
    radChart.PlotArea.Series.Add(totalSlotsValueColumnSeries);
 
    // Add the Total Slots Failed Value bar graph to the plot area
    radChart.PlotArea.Series.Add(totalSlotsFailedValueColumnSeries);
 
    // Add the Slots Released Percentage Value line graph to the plot area
    radChart.PlotArea.Series.Add(slotsValueLineSeries);
 
    // Add the Delay in Communication Target line graph series to the plot area
    radChart.PlotArea.Series.Add(slotsTargetValueLineSeries);
}

5 Answers, 1 is accepted

Sort by
0
Accepted
Stamo Gochev
Telerik team
answered on 09 Apr 2014, 06:08 AM
Hi Daniel,

What you can do in order to show the second Y axis to the right side of the chart is to populate the AxisCrossingPoints collection of the X axis. As you have 9 items for each of the series, setting a value equal or greater than 9 should work:
//set a crossing point for the main Y axis
radChart.PlotArea.XAxis.AxisCrossingPoints.Add(0);
//set the crossing point for the additional Y axis
//in your case the MAX_SERIES_ITEMS_COUNT constant is equal to 9
radChart.PlotArea.XAxis.AxisCrossingPoints.Add(MAX_SERIES_ITEMS_COUNT);
I also attach a sample page where I have created two ColumnSeries and set an additional Y axis to the right side of the chart.

Regards,
Stamo Gochev
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
Daniel
Top achievements
Rank 1
answered on 22 Apr 2014, 01:21 AM
Hello Stamo,

Thanks for the code. It worked perfectly.

Regards,
Daniel
0
Jamie
Top achievements
Rank 1
answered on 08 Jun 2016, 05:17 PM

Sorry this is an old post.

I can get this to work fine with a Line Chart but if I use a Scatter Line (the type I wish to use) I can not move the second Y Axis by using radChart.PlotArea.XAxis.AxisCrossingPoints it just appears on the left and won't move regardless of which value I enter.

Is this function only available to certain chart types?

0
Stamo Gochev
Telerik team
answered on 13 Jun 2016, 07:14 AM
Hello Jamie,

This functionality is not limited to a specific series type, so it should work with scatter series.

Since we are not aware of the problem that you are describing, can you send me a sample page that demonstrates the issue, so I can investigate it? The exact chart configuration is important, so your effort in providing me a sample will be highly appreciated.

Regards,
Stamo Gochev
Telerik
Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
0
VINIT
Top achievements
Rank 1
answered on 04 Apr 2017, 07:02 AM

 

Hi Stamo,

Thnaks a lot !!!

 

Tags
Chart (HTML5)
Asked by
Daniel
Top achievements
Rank 1
Answers by
Stamo Gochev
Telerik team
Daniel
Top achievements
Rank 1
Jamie
Top achievements
Rank 1
VINIT
Top achievements
Rank 1
Share this question
or