Draw A Line And Bar Chart Using Swift Within 10 Lines Code

Within the entry of the era of big data, visualization can display the data in a more intuitive way, making the data more objective and convincing, so as to help users understand and analyze the data. Today we’ll take a look at how to draw a line chart using 10 lines code of Swift.

Technical Selection

In fact, there are few visual chart libraries on iOS. The famous one is Charts, but today I chose F2Native, mainly because of its rich chart types, supporting 7 types of charts, across iOS, MacOS, Android , and Webassembly platforms, and finally, it is realized the grammar of graphic theory, that can be combined to form ever-changing charts.

Development And Implementation

The code is submitted on GitHub, you can download it directly at the end. Then Let’s start.

We use CocoaPods to import this library, you need to install it first if it is not installed on your machine.

sudo gem install cocoapods

1. Create a project

We use Xcode to create a LineChart-Swift project, File -> new -> Project, select the App under the iOS Tab, and click Next

Next, We choose StoryBoard in Interface and Swift in Language, and click Next to complete the project creation

2. CocoaPod Setup

We use CocoaPod to import the F2Native. First, use the command line to enter the directory of the project.

cd /Users/weiqing.twq/Documents/LineChart-Swift

Create Podfile

pod init

Open the Podfile with an editor and input pod 'F2' (note here is called F2, not F2Native)

Install it

pod install

After the installation is completed, there will be a LineChart-Swift.xcworkspace file in the directory, double-click to open it (remember to close the Xcode window that opens automatically when you create it).

3. Prepare Data

Since the input data format of the engine is an NSArray, I prepared the following data and saved it as a data.json file.

[{ “genre”: “Sports”, “sold”: 275 }, 
{ “genre”: “Strategy”, “sold”: 115 }, 
{ “genre”: “Action”, “sold”: 120 }, 
{ “genre”: “Shooter”, “sold”: 350 }, 
{ “genre”: “Other”, “sold”: 150 }]

Drag data.json into the project

4. Coding

Import F2 in ViewController.swift

import F2

Draw the chart in viewDidLoad, the specific drawing steps have been annotated in the code

var canvasView:F2CanvasView?
var chart:F2Chart?
override func viewDidLoad() {
    super.viewDidLoad()
    
    //Step 1 init a canvas view to show chart
    self.canvasView = F2CanvasView.canvas(CGRect(x:0, y: 100, width: self.view.frame.width, height: 200))
    self.view.addSubview(self.canvasView!)
    
    //Step 2 prepare a chart for drawing
    self.chart = F2Chart.init(self.canvasView!.bounds.size, name: "LineChart")
    
    //Step 3 connect chart and canvasview
    self.chart!.canvas()(self.canvasView!).padding()(20, 20, 20, 20)
    
    //Step 4 setup the source data of chart
    let jsonPath = Bundle.main.path(forResource: "data", ofType: "json")
    guard let jsonString = try? String.init(contentsOfFile: jsonPath!) else {
        return
    }
    let jsonData = F2Utils.toJsonArray(jsonString)
    self.chart!.source()(jsonData)
    
    //Sete 5 draw a line in chart
    //The mapping of the x-axis data is the genre field, and the mapping of the y-axis data is the sold field
    self.chart!.line()().position()("genre*sold")
    
    //Step 6 draw chart and show on canvas view
    self.chart!.render()();
}

👏 👏 Congratulations! Here is the code we needed to draw a line chart, we have completed the drawing of the line chart that uses10 lines code at all.Click the ▶️ of Xcode, then it comes out

As I mentioned just now, F2Native implements the grammer of graphic, which can quickly cope with the rapidity of business iteration through combination. If the demand suddenly changes to the bar chart, then we only need to change the line of Step 5 to below:

self.chart!.interval()().position()("genre*sold")

The bar chart comes out

Or you can put them together, the line bar chart comes out

self.chart!.line()().position()(“genre*sold”)
self.chart!.interval()().position()("genre*sold")

The line bar chart comes out

Finally

Of course, this is still the basic chart display. In real business, there should be some more complex designs. For example, additional units should be added to the y-axis, Secondly, the color of the bar should be distinguished. Finally, it is best to have some tips when you press. I will show these in detail in the following articles, thank you for reading, the code has been submitted to GitHub, and welcome to download it. 😄

GitHub - weiqingtangx/LineChart-Swift: An example to show how to create line chart use swift