Last active
August 20, 2018 00:09
-
-
Save ivnsch/f6e285eb0c86bb831510 to your computer and use it in GitHub Desktop.
Chart with autolayout
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // NOTE: you may have to set the module in the storyboard to "SwiftCharts", otherwise the view may not be recognized correctly, which leads to axis, labels and guidelines not showing | |
| class HelloWorld: UIViewController { | |
| private var chart: Chart? // arc | |
| @IBOutlet weak var chartView: ChartBaseView! | |
| private var didLayout: Bool = false | |
| override func viewDidLoad() { | |
| super.viewDidLoad() | |
| NotificationCenter.default.addObserver(self, selector: #selector(rotated), name: NSNotification.Name.UIDeviceOrientationDidChange, object: nil) | |
| } | |
| override func viewDidLayoutSubviews() { | |
| super.viewDidLayoutSubviews() | |
| if !self.didLayout { | |
| self.didLayout = true | |
| self.initChart() | |
| } | |
| } | |
| private func initChart() { | |
| // map model data to chart points | |
| let chartPoints: [ChartPoint] = [(2, 2), (4, 4), (6, 6), (8, 10), (12, 14)].map{ChartPoint(x: ChartAxisValueInt($0.0), y: ChartAxisValueInt($0.1))} | |
| let labelSettings = ChartLabelSettings(font: ExamplesDefaults.labelFont) | |
| // define x and y axis values (quick-demo way, see other examples for generation based on chartpoints) | |
| let xValues = stride(from: 0, through: 16, by: 2).map {ChartAxisValueInt($0, labelSettings: labelSettings)} | |
| let yValues = stride(from: 0, through: 16, by: 2).map {ChartAxisValueInt($0, labelSettings: labelSettings)} | |
| // create axis models with axis values and axis title | |
| let xModel = ChartAxisModel(axisValues: xValues, axisTitleLabel: ChartAxisLabel(text: "Axis title", settings: labelSettings)) | |
| let yModel = ChartAxisModel(axisValues: yValues, axisTitleLabel: ChartAxisLabel(text: "Axis title", settings: labelSettings.defaultVertical())) | |
| let chartFrame = self.chartView.frame | |
| // generate axes layers and calculate chart inner frame, based on the axis models | |
| let coordsSpace = ChartCoordsSpaceLeftBottomSingleAxis(chartSettings: ExamplesDefaults.chartSettings, chartFrame: chartFrame, xModel: xModel, yModel: yModel) | |
| let (xAxis, yAxis, innerFrame) = (coordsSpace.xAxis, coordsSpace.yAxis, coordsSpace.chartInnerFrame) | |
| // create layer with guidelines | |
| let guidelinesLayerSettings = ChartGuideLinesDottedLayerSettings(linesColor: UIColor.black, linesWidth: ExamplesDefaults.guidelinesWidth) | |
| let guidelinesLayer = ChartGuideLinesDottedLayer(xAxis: xAxis, yAxis: yAxis, innerFrame: innerFrame, settings: guidelinesLayerSettings) | |
| // view generator - this is a function that creates a view for each chartpoint | |
| let viewGenerator = {(chartPointModel: ChartPointLayerModel, layer: ChartPointsViewsLayer, chart: Chart) -> UIView? in | |
| let viewSize: CGFloat = Env.iPad ? 30 : 20 | |
| let center = chartPointModel.screenLoc | |
| let label = UILabel(frame: CGRect(x: center.x - viewSize / 2, y: center.y - viewSize / 2, width: viewSize, height: viewSize)) | |
| label.backgroundColor = UIColor.green | |
| label.textAlignment = NSTextAlignment.center | |
| label.text = "\(chartPointModel.chartPoint.y.description)" | |
| label.font = ExamplesDefaults.labelFont | |
| return label | |
| } | |
| // create layer that uses viewGenerator to display chartpoints | |
| let chartPointsLayer = ChartPointsViewsLayer(xAxis: xAxis, yAxis: yAxis, innerFrame: innerFrame, chartPoints: chartPoints, viewGenerator: viewGenerator) | |
| // create chart instance with frame and layers | |
| let chart = Chart( | |
| view: self.chartView!, | |
| layers: [ | |
| coordsSpace.xAxis, | |
| coordsSpace.yAxis, | |
| guidelinesLayer, | |
| chartPointsLayer | |
| ] | |
| ) | |
| self.chart = chart | |
| } | |
| func rotated() { | |
| for view in self.chartView.subviews { | |
| view.removeFromSuperview() | |
| } | |
| self.initChart() | |
| } | |
| } |
Hi! How can I add this: "@IBOutlet weak var chartView: ChartBaseView!" ? I not see ChartBaseView when i drag UIView to the class and I can't convert my UIView to ChartBaseView. Can somebody please help me? Thanks!
Hi, I tried to rewrite UIView to ChartBaseView to IBOutlet and I have the same problem as reivax (axis are missing). Did you resolve this? Thank you!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hey there - I'm using this sample code in my app and if I call initChart after the view is rendered (after getting some data from a server) only the curve layer is displayed (the axis are not) - any idea of what I'm doing wrong?
here is how you can repro the issue using latest sample code:
-> call view chartView and make it an outlet to the Detail class
results: click on any example, details view is shown - results: after 2 sec the graph is shown but the axis layers are not shown... self.chartView.setNeedsDisplay seems to have no effect - Any idea of what I'm missing? Thanks!