AdamM AdamM - 1 year ago 502
Swift Question

XCode dynamic live update line chart

I am trying to create a line chart in which I will continuously plot data so the graph can be observed in real time updating, will be plotting around 5 points or so a second. The kind of graph I am looking for will look something like the graph shown here


I have been playing about with several different charting frameworks such as iOS charts, but I can't seem to get the exact graph I am looking for where live updates can be charted with an evolving X-Axis.

Using iOS charts, I managed to create a sort of evolving graph, example code below.

@IBOutlet weak var chartView: LineChartView!
var xAxisArray : [String]?
var yAxisArray : [Double]?
var date : NSDate?
var dateFormatter : NSDateFormatter?

override func viewDidLoad() {

self.title = "Live Graph"

let stringArray = NSMutableArray()
let numberArray = NSMutableArray()

dateFormatter = NSDateFormatter()
dateFormatter!.dateFormat = "HH:mm:ss"
date = NSDate()

//Insert random values into chart
for(var i = 0; i < 40; i++)
date = date!.dateByAddingTimeInterval(0.3)
let stringDate = dateFormatter?.stringFromDate(date!)
let randomNum = self.randomBetweenNumbers(0.0005, secondNum: 0.0015)

xAxisArray = stringArray as NSArray as? [String]
yAxisArray = numberArray as NSArray as? [Double]


NSTimer.scheduledTimerWithTimeInterval(0.2, target: self, selector: "updateChart", userInfo: nil, repeats: true)

func configureChart()
//Chart config
chartView.descriptionText = ""
chartView.noDataTextDescription = "Add Data"
chartView.drawGridBackgroundEnabled = false
chartView.dragEnabled = true
chartView.rightAxis.enabled = false
chartView.doubleTapToZoomEnabled = false
chartView.legend.enabled = false

//Configure xAxis
let chartXAxis = chartView.xAxis as ChartXAxis
chartXAxis.labelPosition = .Bottom

//configure yAxis

chartView.zoom(1.0, scaleY: 1.0, x: 0.0, y: 0.0)

func randomBetweenNumbers(firstNum: CGFloat, secondNum: CGFloat) -> CGFloat{
return CGFloat(arc4random()) / CGFloat(UINT32_MAX) * abs(firstNum - secondNum) + min(firstNum, secondNum)

func updateChart()
let mutableArray = NSMutableArray()
for(var i = 1; i < xAxisArray?.count; i++)

date = date!.dateByAddingTimeInterval(1.0)
let str = dateFormatter!.stringFromDate(date!)

xAxisArray = mutableArray as NSArray as? [String]

let numberArray = NSMutableArray()
for(var i = 1; i < yAxisArray?.count; i++)

let randomNum = self.randomBetweenNumbers(0.0005, secondNum: 0.0015)
let convertToDouble = Double(randomNum)


yAxisArray = numberArray as NSArray as? [Double]



func setData()
// 1 - creating an array of data entries
var yVals1 : [ChartDataEntry] = [ChartDataEntry]()
for var i = 0; i < xAxisArray!.count; i++ {
yVals1.append(ChartDataEntry(value: yAxisArray![i], xIndex: i))

// 2 - create a data set with our array
let set1: LineChartDataSet = LineChartDataSet(yVals: yVals1, label: "")

set1.axisDependency = .Left // Line will correlate with left axis values
set1.setColor(UIColor.blueColor().colorWithAlphaComponent(0.5)) // our line's opacity is 50%
set1.setCircleColor(UIColor.blueColor()) // our circle will be dark red
set1.lineWidth = 2.0
set1.circleRadius = 6.0 // the radius of the node circle
set1.fillAlpha = 65 / 255.0
set1.fillColor = UIColor.blueColor()
set1.highlightColor = UIColor.whiteColor()
set1.drawCircleHoleEnabled = true
set1.drawFilledEnabled = true

//3 - create an array to store our LineChartDataSets
var dataSets : [LineChartDataSet] = [LineChartDataSet]()

//4 - pass our months in for our x-axis label value along with our dataSets
let data: LineChartData = LineChartData(xVals: xAxisArray, dataSets: dataSets)

//5 - finally set our data = data

//Clear text color

But if you try it out, you can see it is fairly jerky, plus every x axis label updates, I was hoping to have the X axis continue to evolve and just have it animate off the screen as the plotting continues like the one shown in the example.

Does anyone know any charting software that would allow me to replicate this type of graph, or if this effect can be achieved using iOS charts?

Thanks in advance



I am trying to achieve this type of plotting example

Just hopefully a lot smoother,

Answer Source

Now this can be done using iOS charts:

override func viewDidLoad() {

    self.lineChartView.delegate = self
    let set_a: LineChartDataSet = LineChartDataSet(yVals: [ChartDataEntry](), label: "a")
    set_a.drawCirclesEnabled = false

    let set_b: LineChartDataSet = LineChartDataSet(yVals: [ChartDataEntry](), label: "b")
    set_b.drawCirclesEnabled = false
    set_b.setColor(UIColor.greenColor()) = LineChartData(xVals: [String](), dataSets: [set_a, set_b])

    timer = NSTimer.scheduledTimerWithTimeInterval(0.010, target:self, selector: #selector(ViewController.updateCounter), userInfo: nil, repeats: true)

// add point
var i = 0
func updateCounter() { reading_a[i], xIndex: i), dataSetIndex: 0) reading_b[i], xIndex: i), dataSetIndex: 1)
    self.lineChartView.setVisibleXRange(minXRange: CGFloat(1), maxXRange: CGFloat(50))  
    i = i + 1
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download