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

Secondary Y axis

1 Answer 226 Views
ChartView
This is a migrated thread and some comments may be shown as answers.
Brendan
Top achievements
Rank 1
Brendan asked on 07 Feb 2017, 04:20 AM

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;

1 Answer, 1 is accepted

Sort by
0
Hristo
Telerik team
answered on 07 Feb 2017, 10:59 AM
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.

Regards,
Hristo
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.
Tags
ChartView
Asked by
Brendan
Top achievements
Rank 1
Answers by
Hristo
Telerik team
Share this question
or