Released 5 years ago , Last update 5 years ago

ScrollPlotControl provides users with an intuitive and easy to use data-frame picker tool. Featuring 2D data visualization it allows users to scroll the borders of the interval to get a specific statistic in between the selected values.

This component provides controls and gestures for adjusting the range, position and zoom level of 2D chart data. Control buttons got snap to grid feature embedded. The component includes charting tools to provide the complete and finished solution.

The component is fully customizable, so you could assign any kind of data to be displayed on the plot. The component supports horizontal graph scrolling and native pinch-to-zoom scaling.


  • Data visualization
  • Gestures support: scroll to pan, pinch-to-zoom, drag;
  • Portrait and landscape orientation support;
  • No 3rd party libraries, uses ARC.

Manual installation

  • Add the QuartzCore framework by clicking on your Project File -> Build Phases -> Link Binary With Libraries
  • Add ScrollPlotControl.h and ScrollPlotControl.m to your project.
  • Provide a ScrollPlotControlDelegate implementation (see below) or use delegates provided in demo (add DayScrollPlotControlDataSource.h, DayScrollPlotControlDataSource.m, MonthScrollPlotControlDataSource.h, MonthScrollPlotControlDataSource.m, YearScrollPlotControlDataSource.h, YearScrollPlotControlDataSource.m to your project)
  • #import "ScrollPlotControl.h" to use it in a class
  • Instantiate ScrollPlotControl with help of initWithFrame:andScrollPlotControlDataSource: and add control to parent view

To observe changes in values of selected interval you could use addTarget:actiond:forControlEvents: message.

ScrollPlotControlDelegate implementation instructions


Method returns number of points on horizontal axis at the moment of ScrollPlotControl creation. After that user could increase or decrease number of points using pinch gesture. At the moment of ScrollPlotControl creation Zero x-coordinate point is assigned to the far right grid edge. Afterwards user could scroll values using pan gesture. The interval is not limited.


Method provides titles for values on OX-axis.


Method returns respective values for each point. Depending on these values control forms a grid height. So the very top point matches maximal value and the very bottom matches minimum value. When user scrolls window min-max points is recalculated and control changes its own appearance.

Control customization

You could change control appearance by editing the entire code. So the padding could be changed by editing the kTopPadding, kBottomPadding, kLeftPadding, kRightPadding constant values. Zoom-in/zoom-out limit settings are also available. So you could set the minimum and maximum amount of columns by changing kMinNumOfColumns and kMaxNumOfColumns constant values. Spot-buttons appearance also could be changed. Just replace the spot.png and spot_pressed.png files in the Resources folder.


14 day 14-day money-back guarantee


Application License

  • Perpetual license

  • unlimited applications

  • Can distribute binary products only

  • Commercial use


Developer License + Support

  • Perpetual license

  • Unlimited projects

  • Can distribute code and binary products

  • Commercial use

  • 6 months support

3 licenses, starting from From » $49.99 View Licenses

Get A Quote

What do you need?
  • Custom development
  • Integration
  • Customization / Reskinning
  • Consultation
When do you need it?
  • Soon
  • Next week
  • Next month
  • Anytime

Thanks for getting in touch!

Your quote details have been received and we'll get back to you soon.

Or enter your name and Email
No comments have been posted yet.