We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Determine zoom Level when VisibleRangeChanged event triggers

Thread ID:

Created:

Updated:

Platform:

Replies:

116558 Jun 9,2014 11:04 AM Jul 7,2014 08:23 AM Windows Forms 3
loading
Tags: Chart
Vaughn Miller
Asked On June 9, 2014 11:04 AM

I have a chart that will be showing about a years worth of data. In it's initial state I want the Primary X Axis to have labels as month/year.
When I zoom in then I want to show the labels as month/day.
Also, the data points have labels to show their value. I want to turn the data point labels off when it's zoomed out, and turn them on when you zoom in and can see the individual points.

What property of the VisibleRangeChanged event can I access to determine if I need to change the label properties?

Rekha J [Syncfusion]
Replied On June 12, 2014 12:54 AM

Hi Andy,

Thanks for using Syncfusion products.

We have analyzed requirement provided by you, and we suggest you to use “DateTimeFormat” property of chart control for changing the format of the axis labels in chart using “VisibleRangeChanged” event of chart control.

Please refer the following code snippet to achieve this:

<code>

[CS]

   //adding VisibleRangeEvent in chartControl

            this.chartControl1.VisibleRangeChanged += new EventHandler(this.chartControl1_VisibleRangeChanged);

 

private  void chartControl1_VisibleRangeChanged(object sender, EventArgs e)

        {

            //change the labelformat after zooming

          this.chartControl1.PrimaryXAxis.DateTimeFormat = "MM/dd";

        }

</code>

Please let us know if you have any concern.

Regards,

Rekha.


Vaughn Miller
Replied On July 1, 2014 01:48 PM

Sorry, I didn't know I had a reply. 

Is there any part of VisibleRangeChanged that tells you what the zoom level is?
Meaning, it should trigger when they zoom in, but it will also trigger when they zoom out. 
I'd like to be able to determine if they are all the way zoomed out and hide the labels, or if they are really really zoomed in. and I want to show the whole MM/DD/YYYY format, or somewhere in the middle.

Rekha J [Syncfusion]
Replied On July 7, 2014 08:23 AM

Hi Andy,

Thanks for your patience.

Query 1: Is there any part of VisibleRangeChanged that tells you what the zoom level is

We can use “ZoomFactorX” property of chart control to find the chart is zoomed or not but we couldn’t find the exact zoom level of chart.

Please refer the code snippet to achieve this.

<code>

[CS]

if (chart.ZoomFactorX ==1)

           {

               chart.Series[0].Style.DisplayText = false;

             

           }

</code>

Query 2: I'd like to be able to determine if they are all the way zoomed out and hide the labels.

We can use “ZoomFactorX” property of chart to check whether the chart is zoomed or not. The value of “ZoomFactorX” property of chart is less than one means, the chart is in zoomed state. We suggest you to set “DisplayText” property of Chart series to “false” for hide the datapoint labels.

Please refer the code snippet to achieve this.

<code>

[CS]

//disable the datapoint labels while zoom out

           if (chart.ZoomFactorX ==1)

           {

      //hide the datapoint labels

               chart.Series[0].Style.DisplayText = false;

      //set the format of PrimaryXAxis labels

               chart.PrimaryXAxis.DateTimeFormat = "MM/yyyy";

             

           }

</code>

 Query 3: I want to show the whole MM/DD/YYYY format, or somewhere in the middle.

We can customize format of axis labels by using “DateTimeFormat” property of Chart axis and also we can customize datapoint labels by using “Text” property of Chart Series.

Please refer the code snippet to achieve this.

<code>

[CS]

            //create event for perform zooming operation

            chart.VisibleRangeChanged += new EventHandler(chart_VisibleRangeChanged);

  private void chart_VisibleRangeChanged(object sender, EventArgs e)

        

{

           //Maximum value of x axis while zooming

           var x1 = chart.PrimaryXAxis.VisibleRange.Max;

            //Mimimum value of x axis while zooming

           var y1 = chart.PrimaryXAxis.VisibleRange.Min;

            //convert double value to DateTime value

           DateTime dt = DateTime.FromOADate(x1);

           DateTime dt1 = DateTime.FromOADate(y1);

            //Subtract the start date with end date in range

           TimeSpan span = dt.Subtract(dt1);

            //used to find the days

           var day = span.Days;

if (day <= 15)

           {

               chart.PrimaryXAxis.DateTimeFormat = "dd/MMM/yyyy";

               chart.PrimaryXAxis.DateTimeInterval.Type = ChartDateTimeIntervalType.Days;

               chart.Series[0].Style.DisplayText = true;

             

             

           }

           else if (day <= 60)

           {

               chart.PrimaryXAxis.DateTimeFormat = "dd/MMM";

               chart.PrimaryXAxis.DateTimeInterval.Type = ChartDateTimeIntervalType.Weeks;

               chart.Series[0].Style.DisplayText = true;

            

 

           }

           else if (day <= 180)

           {

               chart.PrimaryXAxis.DateTimeFormat = "MMM";

               chart.PrimaryXAxis.DateTimeInterval.Type = ChartDateTimeIntervalType.Months;

               chart.Series[0].Style.DisplayText = true;

             

 

           }

           else if (day > 180)

           {

               chart.PrimaryXAxis.DateTimeFormat = "MMM/yyyy";

               chart.PrimaryXAxis.DateTimeInterval.Type = ChartDateTimeIntervalType.Months;

               chart.Series[0].Style.DisplayText = true;

             

           }

           //disable the datapoint labels while zoom out

           if (chart.ZoomFactorX ==1)

           {

               chart.Series[0].Style.DisplayText = false;

               chart.PrimaryXAxis.DateTimeFormat = "MM/yyyy";

             

           }

            //Customize format of datapoint labels

           for (var i = 0; i < series.Points.Count; i++)

           {

               chart.Series[0].Styles[i].Text = "XValue:"+series.Points[i].DateX.ToString(chart.PrimaryXAxis.DateTimeFormat)+ +"\n"+"YValue:"+series.Points[i].YValues[0].ToString();

               chart.Series[0].Styles[i].TextOrientation = ChartTextOrientation.RegionUp;

 

           }

           }

</code>

We have created a simple sample and it can be downloaded in the following link.

http://www.syncfusion.com/downloads/support/directtrac/general/visiblerangechange-56556502.zip

Please refer the online documentation link for more information about VisibleRangeChanged event for zooming:

http://help.syncfusion.com/ug/windows%20forms/chart/default.htm#!Documents/visiblerangechangede.htm

Please refer the online documentation link for more information about “DateTimeFormat” property of Chart Axis:

http://help.syncfusion.com/ug/windows%20forms/chart/Documents/axislabeltextformatt.htm

Please refer the online documentation link for more information about customize the text of datapoint labels:

http://help.syncfusion.com/ug/windows%20forms/chart/Documents/textstyle.htm

Please let us know if you have any concern.

Regards,

Rekha.


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;