How do I draw Bar-Chart using danielgindi/Charts library with Swift 3.0

Question

Problem Statement : Unable to run due to some errors in implementation of Bar-Chart using 'danielgindi/Charts library' in swift 3.0 syntax errors.

Actual Error in Swift 3.0:

After correcting above error, it gives another error in next line, as shown below.

Coding Stuff:

import Charts

class ChartViewController: UIViewController {

    @IBOutlet var barChartView: BarChartView!

    var months: [String]!
    var dataEntries: [BarChartDataEntry] = []


    override func viewDidLoad() {
        super.viewDidLoad()

        months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
        let unitsSold = [20.0, 4.0, 6.0, 3.0, 12.0, 16.0, 4.0, 18.0, 2.0, 4.0, 5.0, 4.0]
        setChart(dataPoints: months, values: unitsSold)

    }

    func setChart(dataPoints: [String], values: [Double]) {
        barChartView.noDataText = "You need to provide data for the chart."

        for i in 0..<dataPoints.count {
            let dataEntry = BarChartDataEntry(x: Double(i), yValues: [values[i]])
            dataEntries.append(dataEntry)
        }

        let chartDataSet = BarChartDataSet(values: dataEntries, label: "Units Sold")

        let chartData = BarChartData(xVals: months, dataSet: chartDataSet)

        barChartView.data = chartData
    }

Please help me, how do I resolve such errors in swift 3.0

Answer 1

import UIKit
import Charts

class ViewController: UIViewController, ChartViewDelegate {

    @IBOutlet weak var barChartView: BarChartView!
    weak var axisFormatDelegate: IAxisValueFormatter?

    var months: [String]!
    var unitsSold = [Double]()

 override func viewDidLoad() {
            super.viewDidLoad()

            barChartView.delegate = self
            axisFormatDelegate = self
            months  = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
            unitsSold  = [20.0, 54.0, 6.0, 30.0, 92.0, 16.0,114.0]
            setChart(dataPoints: months, values: unitsSold)
        } 
             func setChart(dataPoints: [String], values: [Double]) {

                barChartView.noDataText = "You need to provide data for the chart."

                // Prevent from setting an empty data set to the chart (crashes)
                guard dataPoints.count > 0 else { return }

                var dataEntries = [BarChartDataEntry]()

                for i in 0..<dataPoints.count {
                    let entry = BarChartDataEntry(x: Double(i), y: values[i], data: months as AnyObject?)
                    dataEntries.append(entry)
                }

                let chartDataSet = BarChartDataSet(entries: dataEntries, label: "Units Sold")
                chartDataSet.drawValuesEnabled = false
                chartDataSet.colors = [UIColor.red]
                chartDataSet.colors = [UIColor.lightGray]
                chartDataSet.highlightColor = UIColor.orange.withAlphaComponent(0.3)
                chartDataSet.highlightAlpha = 1
                let chartData = BarChartData(dataSet: chartDataSet)
                barChartView.data = chartData
                let xAxisValue = barChartView.xAxis
                xAxisValue.valueFormatter = axisFormatDelegate

                //   chartDataSet.colors = ChartColorTemplates.colorful()    //multiple colors

                //Animation bars
                barChartView.animate(xAxisDuration: 0.0, yAxisDuration: 1.0, easingOption: .easeInCubic)

                // X axis configurations
                barChartView.xAxis.granularityEnabled = true
                barChartView.xAxis.granularity = 1
                barChartView.xAxis.drawAxisLineEnabled = true
                barChartView.xAxis.drawGridLinesEnabled = false
                barChartView.xAxis.labelFont = UIFont.systemFont(ofSize: 15.0)
                barChartView.xAxis.labelTextColor = UIColor.black
                barChartView.xAxis.labelPosition = .bottom

                // Right axis configurations
                barChartView.rightAxis.drawAxisLineEnabled = false
                barChartView.rightAxis.drawGridLinesEnabled = false
                barChartView.rightAxis.drawLabelsEnabled = false

                // Other configurations
                barChartView.highlightPerDragEnabled = false
                barChartView.chartDescription?.text = ""
                barChartView.legend.enabled = false
                barChartView.pinchZoomEnabled = false
                barChartView.doubleTapToZoomEnabled = false
                barChartView.scaleYEnabled = false

                barChartView.drawMarkers = true

                let l = barChartView.legend
                l.horizontalAlignment = .left
                l.verticalAlignment = .bottom
                l.orientation = .horizontal
                l.drawInside = false
                l.form = .circle
                l.formSize = 9
                l.font = UIFont(name: "HelveticaNeue-Light", size: 11)!
                l.xEntrySpace = 4

                // On tapped bar marker before adding BalloonMarker.swift
                let marker =  BalloonMarker(color: UIColor.orange, font: UIFont.boldSystemFont(ofSize: 13), textColor: UIColor.white, insets: UIEdgeInsets(top: 7.0, left: 7.0, bottom: 15.0, right: 7.0))
                marker.chartView = barChartView
                barChartView.marker = marker
            }
}
    extension ViewController: IAxisValueFormatter {

        func stringForValue(_ value: Double, axis: AxisBase?) -> String {
            return months[Int(value)]
        }
    }

1. Install pod file
2. Assign barchartview class to chart view in storyboad
3. Follow setchart() method
4. For ballon marker add BallonMarker.swift file to your project library for this file chartsDemo->Components-> BallonMarker.swift

I have implemented a demo for that

This will Support Swift 4.2 and above

Check this link : https://github.com/vijay1864/Barchart-Demo-with-Charts-Library

This Demo was Made with help of danielgindi Charts Library

https://github.com/danielgindi/Charts

Answer 2

For Line chart We can have following

import UIKit
import Charts

class LineChartVC: UIViewController , ChartViewDelegate{
    @IBOutlet var lineChartView: LineChartView!

    var months: [String]!


    override func viewDidLoad() {
        super.viewDidLoad()
        self.lineChartSetUp()

    }

}

    extension LineChartVC{


        func  lineChartSetUp(){

            self.lineChartView.delegate = self
            self.lineChartView.chartDescription?.enabled = false//true

            self.lineChartView.dragEnabled = true
            self.lineChartView.setScaleEnabled(true)
            self.lineChartView.pinchZoomEnabled = true
            self.lineChartView.drawGridBackgroundEnabled = false


            // x-axis limit line
            /*
             let llXAxis = ChartLimitLine(limit: 10.0, label: "Index 10")
             llXAxis.lineWidth = 4.0
             llXAxis.lineDashLengths = [(10.0), (10.0), (0.0)]
             llXAxis.labelPosition = ChartLimitLine.LabelPosition.rightBottom//ChartLimitLabelPositionRightBottom
             llXAxis.valueFont = UIFont.systemFont(ofSize: 10.0)
             //[_chartView.xAxis addLimitLine:llXAxis];

             self.lineChartView.xAxis.gridLineDashLengths = [10.0, 10.0]
             self.lineChartView.xAxis.gridLineDashPhase = 0.0


             let ll1 = ChartLimitLine(limit: 150.0, label: "Upper Limit")
             ll1.lineWidth = 4.0
             ll1.lineDashLengths = [5.0, 5.0]
             ll1.labelPosition = ChartLimitLine.LabelPosition.rightTop //ChartLimitLabelPositionRightTop
             ll1.valueFont = UIFont.systemFont(ofSize: 10.0)

             let ll2 = ChartLimitLine(limit: -30.0, label: "Lower Limit")
             ll2.lineWidth = 4.0
             ll2.lineDashLengths = [5.0, 5.0]
             ll2.labelPosition = ChartLimitLine.LabelPosition.rightBottom//ChartLimitLabelPositionRightBottom
             ll2.valueFont = UIFont.systemFont(ofSize: 10.0)

             let leftAxis: YAxis? =  self.lineChartView.leftAxis
             leftAxis?.removeAllLimitLines()

             //         leftAxis?.addLimitLine(ll1)
             //         leftAxis?.addLimitLine(ll2)
             //         leftAxis?.axisMaximum = 200.0
             //         leftAxis?.axisMinimum = -50.0

             //        leftAxis?.axisMaximum = 100.0
             //        leftAxis?.axisMinimum = 0.0
             //
             leftAxis?.gridLineDashLengths = [5.0, 5.0]
             leftAxis?.drawZeroLineEnabled = false
             leftAxis?.drawLimitLinesBehindDataEnabled = true

             self.lineChartView.rightAxis.enabled = false
             //[_chartView.viewPortHandler setMaximumScaleY: 2.f];
             //[_chartView.viewPortHandler setMaximumScaleX: 2.f];
             */
            let marker = BalloonMarker(color: UIColor(white: 180 / 255.0, alpha: 1.0), font: UIFont.systemFont(ofSize: 12.0), textColor: UIColor.white, insets: UIEdgeInsetsMake(8.0, 8.0, 20.0, 8.0))
            marker.chartView = self.lineChartView
            marker.minimumSize = CGSize(width: 80.0, height: 40.0)
            self.lineChartView.marker = marker
            self.lineChartView.legend.form = Legend.Form(rawValue: 5)!

            months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
            let unitsSold = [20.0, 4.0, 6.0, 3.0, 12.0, 16.0, 4.0, 18.0, 2.0, 4.0, 5.0, 4.0]

            self.setChart(months, values: unitsSold)

        }



        func setChart(_ dataPoints: [String], values: [Double]) {

            var dataEntries: [ChartDataEntry] = []

            for i in 0..<dataPoints.count {

                let dataEntry = ChartDataEntry(x:Double(i) , y: values[i])
                dataEntries.append(dataEntry)

            }
            print(dataEntries )

            let data = LineChartData()
            let ds1 = LineChartDataSet(values: dataEntries, label: "Units Sold")
            ds1.colors = [UIColor.red]
            data.addDataSet(ds1)
            self.lineChartView.data = data



        }


        func chartValueSelected(chartView: ChartViewBase, entry: ChartDataEntry, dataSetIndex: Int, highlight: Highlight) {
            //        print("\(entry.value) in \(months[dataSetIndex])")
            print(entry )
        }




    }

Answer 3

I've had this issue as well. It was this line here:

let dataEntry = BarChartDataEntry(x: Double(i), yValues: [values[i]])

You cannot convert dataPoints: [String] to type Double.

My solution was to remove the Double. Then that did not satisfy my data types, so I made them all of type [Int] like so:

func setChart(dataPoints: [Int], values: [Int]) {

    self.noDataText = "You need to provide data for the chart."

    var dataEntries: [BarChartDataEntry] = []

    for i in 0..<dataPoints.count {
        let dataEntry = BarChartDataEntry(x: Double(i), y: Double(values[i]) )
        dataEntries.append(dataEntry)


    }

    let chartDataSet = BarChartDataSet(values: dataEntries, label: "Units Sold")
    let chartData = BarChartData(dataSet: chartDataSet)
    self.data = chartData

You can convert [Int] to Double, so that fixed my issue. I changed the variable months: [String] to

let months = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]

Answer 4

You can iterate month and units sold values as xVal and yVal.

  var barChartValues: [BarChartDataEntry] = []

    for (key,val) in self.barChartDataval.enumerated() {

        let xVal = Double(key)
        let yVal = Double(val.cost)
        let dataEntry = BarChartDataEntry(x: xVal, y: yVal!)
        barChartValues.append(dataEntry)

    }

    let chartDataSet = BarChartDataSet(values: barChartValues, label: "Expenses Summary")
    chartDataSet.colors = [Constants.k_COLORS.BLUE]
    var dataSets = [IChartDataSet]()
    dataSets.append(chartDataSet)

    let chartData = BarChartData(dataSets: dataSets)
    self.barChartView.data = chartData
    self.barChartView.chartDescription?.text = ""

    self.barChartView.animate(xAxisDuration: 2.0, yAxisDuration: 2.0, easingOption: .easeInBounce)