Setting location of additional Y Axis programmatically

5 posts, 1 answers
  1. Daniel
    Daniel avatar
    2 posts
    Member since:
    Jun 2011

    Posted 06 Apr 2014 Link to this post

    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);
    }
  2. Answer
    Stamo Gochev
    Admin
    Stamo Gochev avatar
    157 posts

    Posted 09 Apr 2014 Link to this post

    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.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Daniel
    Daniel avatar
    2 posts
    Member since:
    Jun 2011

    Posted 21 Apr 2014 in reply to Stamo Gochev Link to this post

    Hello Stamo,

    Thanks for the code. It worked perfectly.

    Regards,
    Daniel
  5. Jamie
    Jamie avatar
    2 posts
    Member since:
    Aug 2014

    Posted 08 Jun Link to this post

    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?

  6. Stamo Gochev
    Admin
    Stamo Gochev avatar
    157 posts

    Posted 12 Jun Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017