Search code examples
shinobi

Shinobi Chart initial data zoomed out


is there way to set a starting zoom out value for shinobi charts?

I already tried setting back one date to starting date and adding a date to ending date for the SChartDateRange (X axis) but no resolve.

Thanks in advance!

Current Table & Axis Setup

 //properties
@IBOutlet weak var chartView: UIView!
private var chart:ShinobiChart?
private let chartDataSource = LineGraphModDataSource()


//methods
override func viewDidLoad()
{
super.viewDidLoad()

chart = ShinobiChart(frame: chartView.bounds)
chartView.addSubview(chart!)

self.setupChart()

}//eom

func setupChart()
{
    chart?.delegate = self
    chart?.licenseKey =  Constants.shared.getLicenseKey()
    chart?.title             = "Chart #9"
    chart?.autoresizingMask  = [.flexibleHeight , .flexibleWidth]
    chart?.datasource = chartDataSource

/* X axis - Dates */
let dateRange:SChartDateRange = chartDataSource.getInititalDateRange()
chart?.xAxis = SChartDateTimeAxis()
chart?.xAxis.range = dateRange
chart?.xAxis.axisPosition = SChartAxisPositionNormal
chart?.xAxis.title = "Dates"
chart?.xAxis.labelFormatString = "MM dd yy"
chart?.xAxis.majorTickFrequency = SChartDateFrequency.dateFrequency(withDay: 3)
chart?.xAxis.minorTickFrequency = SChartDateFrequency.dateFrequency(withDay: 1)

//style
    //major
chart?.xAxis.style.majorGridLineStyle.showMajorGridLines = true
chart?.xAxis.style.majorTickStyle.showTicks = true
chart?.xAxis.style.majorTickStyle.showLabels = true

    //minor
chart?.xAxis.style.minorTickStyle.showTicks = true
chart?.xAxis.style.minorTickStyle.showLabels = true

//axis movement
chart?.xAxis.enableGesturePanning = true
chart?.xAxis.enableGestureZooming = true
chart?.xAxis.enableMomentumPanning = true
chart?.xAxis.enableMomentumZooming = true

/* Y axis - Values */
chart?.yAxis = SChartNumberAxis()
chart?.yAxis.defaultRange = SChartRange(minimum: 0, andMaximum: 10)
chart?.yAxis.title = "Y axis"
chart?.yAxis.axisPosition = SChartAxisPositionReverse
chart?.yAxis.majorTickFrequency = 1
chart?.yAxis.minorTickFrequency = 1
chart?.yAxis.rangePaddingLow = 0.5
chart?.yAxis.rangePaddingHigh = 0.5


//style
chart?.yAxis.style.majorGridLineStyle.showMajorGridLines = true
chart?.yAxis.style.majorTickStyle.showTicks = true
chart?.yAxis.style.majorTickStyle.showLabels = true
chart?.yAxis.style.minorTickStyle.showTicks = true
chart?.yAxis.style.minorTickStyle.showLabels = true

//axis movement
chart?.yAxis.enableGesturePanning = true
chart?.yAxis.enableGestureZooming = true
chart?.yAxis.enableMomentumPanning = true
chart?.yAxis.enableMomentumZooming = true

}//eom

Current starting graph Current starting graph

Desired starting graph Desired starting graph


Solution

  • Was able to achieve this by specifying an initial data range when creating the chart.

    In addition to providing a data range, the date range must be expanded so the graph can seem zoomed out as soon it loads.

    For example, lets say that your initial date range:

    • 8/21/16
    • 8/25/16

    The first date on your range must be rolled back 1 day and the last day must be moved up 1 day. So the range would become:

    • 8/20/16
    • 8/26/16

      View Controller

      SChartDateRange * startingDateRange = [self.datasource getInitialDateRange];
      self.chart.xAxis = [[SChartDateTimeAxis alloc] initWithRange:startingDateRange];
      self.chart.xAxis.majorTickFrequency = [[SChartDateFrequency alloc]initWithDay:1];
      

      Datasource

      -(SChartDateRange *)getInitialDateRange {

       NSInteger lastIndex = [self.afterData count];
      lastIndex = lastIndex-1;
      
      NSDate * minDate = [self getDateFromIndex:0];
      NSDate * maxDate = [self getDateFromIndex:lastIndex];
      
      //expanding range by 1 day so its more visible on map
      NSInteger secondInDay = 86164;
      minDate = [minDate dateByAddingTimeInterval:-secondInDay];
      maxDate = [maxDate dateByAddingTimeInterval:secondInDay];
      
      SChartDateRange * range = [[SChartDateRange alloc]initWithDateMinimum:minDate andDateMaximum:maxDate];
      
      return range;
      

      }//eom