2 Y axis with common x-axis (date)

[senthil kumar]

Hi Team

My requirement is like this: I would like to display 2 kinds of data on the Y-axis, the only difference in the data is the values. one set of values cover 500 to 13000 and the 2nd set of values upto 2 million. What happens is the 1set data series is shown almost like a straight line. My interest is in showing the correlation between the set1 and set2

.

I have looked at the forum and KB articles. They show 2 charts in the same chart area but with range in different values. Like below

Questions:

1. Is it possible to show both the set1 and set2 in the same graph area?

2. If it is not possible to do that, is there any other way to achieve the result?

[Muneesh Kumar G]

Hi Senthil, 

 

Greetings from Syncfusion, 

 

We have analyzed your query. Please find the below response for your queries. 

 

Query 1:  Is it possible to show both the set1 and set2 in the same graph area? 

 

We are having the multiple axis support to plot multiple series in single graph. As per your requirement, you have prepared a sample with multiple axis chart.  

 

For more information about multiple axis, kindly find the below code snippet, 

https://help.syncfusion.com/windowsforms/chart/chart-axes#multiple-axes 

 

Please find the below code snippet to achieve this requirement, 

//Create multiple axis here. 

ChartAxis axis = this.chart.PrimaryYAxis; 

ChartAxis axis1 = new ChartAxis(ChartOrientation.Vertical);            

ChartAxisLayout layout1 = new ChartAxisLayout(); 

ChartAxisLayout layout2 = new ChartAxisLayout(); 

chart.Axes.Add(axis1); 

layout1.Axes.Add(axis1);             

layout2.Axes.Add(axis); 

chart.ChartArea.YLayouts.Add(layout1); 

chart.ChartArea.YLayouts.Add(layout2); 

 

// Binding series to axis here 

ChartSeries Series1 = new ChartSeries("Series1", ChartSeriesType.Line); 

Series1.Points.Add(0, 500); 

.. .. 

.. .. 

 

Series1.YAxis = axis; 

ChartSeries Series2 = new ChartSeries("Series2 ", ChartSeriesType.Line); 

Series2.Points.Add(0, 7000000); 

.. .. 

.. .. 

Series2.YAxis = axis1; 

 

 

Screenshot: 

 

 

Sample for your reference, can be found from below link, 

http://www.syncfusion.com/downloads/support/directtrac/general/ze/multipleAxes-370825045 

 

Query 2: If it is not possible to do that, is there any other way to achieve the result? 

 

And, we are having scale breaks supports in Chart. This support helps you, if you add points with large difference in values. To enable breaks, you need to set the ChartAxis.MakeBreaks property to true and set the break mode.  

 

For more information on chart breaks, kindly find the below documentation link, 

https://help.syncfusion.com/windowsforms/chart/chart-axes#chart-breaks 

 

Please find the below code snippet to achieve this chart breaks, 

 

ChartSeries series = new ChartSeries("series1", ChartSeriesType.Line); 

series.Points.Add(1, 1330); 

series.Points.Add(2, 1148); 

series.Points.Add(3, 303); 

series.Points.Add(4, 237); 

this.chart.Series.Add(series); 

 

ChartSeries series1 = new ChartSeries("series2", ChartSeriesType.Line); 

series1.Text = series1.Name; 

series1.Points.Add(1, 133000); 

series1.Points.Add(2, 114800); 

series1.Points.Add(3, 310300); 

series1.Points.Add(4, 213700); 

this.chart.Series.Add(series1); 

 

// Enable the break mode  

this.chart.PrimaryYAxis.BreakRanges.BreaksMode = ChartBreaksMode.Auto; 

this.chart.PrimaryYAxis.BreakInfo.LineType = ChartBreakLineType.Straight;  

 

Screenshot: 

 

Sample for your difference, can be found from below link, 

http://www.syncfusion.com/downloads/support/directtrac/general/ze/chartBreak-1304155355 

 

Hope it helps you.  

 

Thanks, 

Muneesh Kumar G.   

 

[senthil kumar]

Dear Mr Muneesh Kumar

You have been of great help. Thanks.

Senthil

[Muneesh Kumar G]

Hi Senthil,  

 

Thanks for the update. 

  

We are glad to know that the given solution works. Please let us know if you need any further assistance. 

 

Thanks, 

Muneesh Kumar G.   

 

[senthil kumar]

Dear Mr Muneesh

 Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
        'TODO: This line of code loads data into the 'DsIdxFII.vwTbl_IDX_Nifty50' table. You can move, or remove it, as needed.
        Me.VwTbl_IDX_Nifty50TableAdapter.Fill(Me.DsIdxFII.vwTbl_IDX_Nifty50)

        GetMinDate() ' function to get min date of the table
        GetMaxDate() 'function to get the max date of the table

        Me.Chart1.PrimaryXAxis.DateTimeRange = New ChartDateTimeRange(minDate, maxDate, 5, ChartDateTimeIntervalType.Auto) ' min & max dates used here

        Me.Chart1.PrimaryYAxis.ForceZero = False

        Me.Chart1.PrimaryYAxis.BreakRanges.BreaksMode = ChartBreaksMode.Auto
        Me.Chart1.PrimaryYAxis.BreakInfo.LineType = ChartBreakLineType.Straight

        Chart1.Series(0).Style.DisplayShadow = False
        Chart1.Series(1).Style.DisplayShadow = False
        Chart1.Series(2).Style.DisplayShadow = False

    End Sub

This code worked yesterday in my test project but fails to work in a new project today. The dataset comes from a SQL table via data designer and the chart also comes via the Wizard designer. Unfortunately I deleted the test project but can assure that it worked correctly. The low range series were within 600 to 13000 and the higher series range was 50,000 to 200,000 but today I am not seeing the same.

Is there anything more I should look.

Regards

Senthil

[Muneesh Kumar G]

Hi Senthil, 

Thanks for the update. We have analyzed your query and we would like to inform you that automatic range breaks in axis feature depends upon the BreakAmount property of range breaks. Default value of this property is 0.2 (20% of total range). 

For example, if axis range is from 0 to 200000, then 20 percentage of the total range is 40000. Here, the maximum value of point in low range series is 13000 and minimum value of point in high range series is 50000 and the difference between two data sets value is 37000 which is less than the 20 percentage of total range (200000). 

So, range break will not be applied in this scenario by default. We can achieve the desired result by changing the default value of BreakAmount property. 

Based on this scenario, we have prepared a simple sample with BreakAmount property set to 0.15 (15% of total range). The sample can be downloaded from the following link 

http://www.syncfusion.com/downloads/support/forum/141842/ze/Range_breaks1767129599 

Please refer the following code snippet to achieve this 

[C#] 

 

            //Set break amount to 15% of total range 

            this.chart.PrimaryYAxis.BreakRanges.BreakAmount = 0.15; 

 

            //Break axis range automatically 

            this.chart.PrimaryYAxis.BreakRanges.BreaksMode = ChartBreaksMode.Auto; 

 

[Chart with range breaks applied for 15% break amount] 

 

 

Please let us know if you have any concern. 

Regards, 

Muneesh Kumar G. 

[senthil kumar]

Thanks Mr Muneesh for your quick reply. I calculated my range and applied the value but got a chart like this

The Y-axis suddenly has -ve values! 

I tried changing the value from 0.05 to 0.2 but there is no change. The correct range value is 0.08.

[senthil kumar]

Hi

I have prepared a test solution using Access database. I have not used the min and max date due to errors in converting the sqlconnection to oledbconnection.

Please see if you can make the break to work on the Y-axis. The code is in vb.net.

Thanks and regards

Senthil

Attachment: TestSeries_cd03ae72.rar

[senthil kumar]

Looks like the BreakAmount should be calculated correctly. A value of 0.04 gave the required break correctly.

thanks for the help.

[Muneesh Kumar G]

Hi Senthil, 

 

Glad that the issue has been resolved and please get back to us if you need any other assistance.  

    

Thanks,    

Muneesh Kumar G.