How to make a diagram / statistics

Hey there,


is there an easy way to create a diagram for a statistic in an app or do I have to use 20000000 views to depict the individual pillars?


Thanks!

Accepted Reply

There is an easy way.


You create a view.

And draw the content inside.


What I do practically to create a View for graph.

- Subclass UIView

- in the draw func, draw the graphic as needed to display input data


Just to illustrate, here is an example of a view to display a curve


import UIKit

class ChartView: UIView {

    override func draw(_ rect: CGRect) {
        var x: Double = 0
        var startx : Double = 0
        var y: Double = 0
        var starty: Double = 0
        let scaleX = Double((rect.width - 10) / 60)  // vs 5 Tenir compte de la largeur de la vue pour 60 points
        let scaleY = Double((rect.height - 40) / 2)  // vs 100 Tenir compte de la largeur de la vue pour 60 points

        let aPath = UIBezierPath()
        var index = 0
        while x < 60.0 {
            x += 1
            index += 1
            let val = cos(x * .pi / 20.0)
            y = scaleY * (1 - val) // 100 - 100 * cos(x * .pi / 20.0)
            let startPoint = CGPoint(x: startx, y: starty)
            let destPoint = CGPoint(x: scaleX * x, y: y)  // 5

            aPath.move(to: startPoint)
            aPath.addLine(to: destPoint)
            UIColor.red.setStroke()
            aPath.stroke()

            if index % 4 == 1 {
                let textToDraw = String(format: "%.2f", val) // cos(x * .pi / 20.0))  // Need to adapt this
                textToDraw.draw(at: destPoint)
            }
            startx = scaleX*x // Move to next point  vs 5
            starty = y
        }
       
        aPath.close()
    }


I create a view in IB and give it this class.

Replies

There is an easy way.


You create a view.

And draw the content inside.


What I do practically to create a View for graph.

- Subclass UIView

- in the draw func, draw the graphic as needed to display input data


Just to illustrate, here is an example of a view to display a curve


import UIKit

class ChartView: UIView {

    override func draw(_ rect: CGRect) {
        var x: Double = 0
        var startx : Double = 0
        var y: Double = 0
        var starty: Double = 0
        let scaleX = Double((rect.width - 10) / 60)  // vs 5 Tenir compte de la largeur de la vue pour 60 points
        let scaleY = Double((rect.height - 40) / 2)  // vs 100 Tenir compte de la largeur de la vue pour 60 points

        let aPath = UIBezierPath()
        var index = 0
        while x < 60.0 {
            x += 1
            index += 1
            let val = cos(x * .pi / 20.0)
            y = scaleY * (1 - val) // 100 - 100 * cos(x * .pi / 20.0)
            let startPoint = CGPoint(x: startx, y: starty)
            let destPoint = CGPoint(x: scaleX * x, y: y)  // 5

            aPath.move(to: startPoint)
            aPath.addLine(to: destPoint)
            UIColor.red.setStroke()
            aPath.stroke()

            if index % 4 == 1 {
                let textToDraw = String(format: "%.2f", val) // cos(x * .pi / 20.0))  // Need to adapt this
                textToDraw.draw(at: destPoint)
            }
            startx = scaleX*x // Move to next point  vs 5
            starty = y
        }
       
        aPath.close()
    }


I create a view in IB and give it this class.

Thanks, I'll try!