Secondary Y axis

2 posts, 0 answers
  1. Brendan
    Brendan avatar
    1 posts
    Member since:
    Feb 2017

    Posted 06 Feb 2017 Link to this post

    I am trying to find the best way to add a secondary Y axis for a line series. An example of this would be a Fahrenheit secondary Y axis for a Celsius primary Y axis. The best way I have figured out so far is to create a dummy series that is not visible and that shares the same X axis and color as the primary axis. The minimum and maximum values are then set based on the ActualRange of the primary axis. This is not ideal because the secondary axis ticks aren't being generated on round numbers.

    Is there a better way to do this?

    Is there an event that I can use to update the secondary Y axis minimum and maximum when the ActualRange of the primary axis changes?

    // Create data table with test data
    DataTable dataTable = new DataTable();
    dataTable.Columns.Add(new DataColumn("Date", typeof(DateTime) ));
    dataTable.Columns.Add(new DataColumn("Temp", typeof(float) ));
    dataTable.Rows.Add(new DateTime(2016, 2, 1), 245.0f);
    dataTable.Rows.Add(new DateTime(2016, 3, 1), 248.0f);
    dataTable.Rows.Add(new DateTime(2016, 4, 1), 238.0f);
    // Create line series for test data
    LineSeries lineSeries1 = new LineSeries();
    lineSeries1.Name = "Temperature";
    lineSeries1.Spline = false;
    lineSeries1.ValueMember = "Temp";
    lineSeries1.CategoryMember = "Date";
    lineSeries1.DataSource = dataTable;
    // dummy line series for secondary axis
    LineSeries dummyLineSeries = new LineSeries();
    dummyLineSeries.Name = "Dummy Temperature";
    dummyLineSeries.Spline = false;
    dummyLineSeries.IsVisible = false;
    dummyLineSeries.BorderColor = lineSeries1.BorderColor;
    // X Axis definition
    DateTimeCategoricalAxis DTcategoricalAxis1 = new DateTimeCategoricalAxis();
    DTcategoricalAxis1.PlotMode = AxisPlotMode.OnTicks;
    DTcategoricalAxis1.LabelFormat = "{0:MMMyy}";
    DTcategoricalAxis1.Title = "Month-Year";
    DTcategoricalAxis1.AxisType = Telerik.Charting.AxisType.First;
    // Primary Y Axis definition
    LinearAxis linearAxis1 = new LinearAxis();
    linearAxis1.Title = "Temperature (°C)";
    linearAxis1.AxisType = Telerik.Charting.AxisType.Second;
    // Secondary Y Axis definition
    LinearAxis linearAxis2 = new LinearAxis();
    linearAxis2.Title = "Temperature (°F)";
    linearAxis2.AxisType = Telerik.Charting.AxisType.Second;
    linearAxis2.HorizontalLocation = AxisHorizontalLocation.Right;
    // Add Axes to the line series
    lineSeries1.HorizontalAxis = DTcategoricalAxis1;
    lineSeries1.VerticalAxis = linearAxis1;
    dummyLineSeries.HorizontalAxis = DTcategoricalAxis1;
    dummyLineSeries.VerticalAxis = linearAxis2;
    // Add line series to chart
    radChartView1.Series.AddRange( lineSeries1, dummyLineSeries);
    // Force secondary axis range to match adjusted
    linearAxis2.Minimum = linearAxis1.ActualRange.Minimum * 1.8 + 32.0;
    linearAxis2.Maximum = linearAxis1.ActualRange.Maximum * 1.8 + 32.0;
  2. Hristo
    Hristo avatar
    1522 posts

    Posted 07 Feb 2017 Link to this post

    Hi Brendan,

    Thank you for writing.

    The approach as seen from your code snippet is valid. Considering the labels along the Fahrenheit, axis you can specify a format rounding up the numbers by setting the LabelFormat property: 
    LinearAxis linearAxis2 = new LinearAxis();
    linearAxis2.Title = "Temperature (°F)";
    linearAxis2.LabelFormat = "{0:0}";
    linearAxis2.AxisType = Telerik.Charting.AxisType.Second;
    linearAxis2.HorizontalLocation = AxisHorizontalLocation.Right;

    Regarding your other question, I can suggest updating the Minimum and Maximum of the axis whenever you change the data in the chart. This operation will trigger an update and if necessary the ActualRange of the first axis will also be updated.

    I hope this helps. Should you have further questions please do not hesitate to write back.

    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top