I need help to draw graph like attached screenshots for iOS

I've tried lots of graphs but didn't got the success. All the graph will update dynamically based on the heart rate and Average speed in realtime update using monitor and GPS respectively.

  1. This graph will show the data that user had spent how much time in a particular zones.

  2. This design will show the completion of challenge based on the percentage, other user's profile will move with the percentage of completion.

  3. This design will show heart rate during the exercise for range from zone 1to 5, Same data will available which i want to draw on image no 1(Above first image). White portion in orange colour is a indicator which will follow the different colour path as per heart rate count shown in same design.

This graph will show the data that user had spent how much time in a particular zones.

This design will show the completion of challenge based on the percentage, other user's profile will move with the percentage of completion.

This design will show heart rate during the exercise for range from zone 1to 5, Same data will available which i want to draw on image no 1(Above first image). White portion in orange colour is a indicator which will follow the different colour path as per heart rate count shown in same design.

1 answer

  • answered 2018-04-17 06:33 kalpesh

    You can have many options and create online using highcharts. And implement in a Native application. Download HTML file and set something like that as you want in your comment section.

    Highcharts

            func drawChart(barsData:NSMutableArray){
    
            let jsonData = try! JSONSerialization.data(withJSONObject: barsData, options: (JSONSerialization.WritingOptions(rawValue: 0)))
            let theJSONText = NSString(data: jsonData,
                                       encoding: String.Encoding.ascii.rawValue)
            let htmlFile: String? = Bundle.main.path(forResource: "YourHTML", ofType: "html")
            var htmlString = try? String(contentsOfFile: htmlFile!, encoding: String.Encoding.utf8)
    
            let oldWdith = "<div id=\"container\" style=\"min-width: 380px; height: 180px; margin: 0 auto\"></div>"
            let ReplaceWdith = "<div id=\"container\" style=\"min-width: \(width)px; height: 180px; margin: 0 auto\"></div>"
            htmlString = htmlString?.replacingOccurrences(of: oldWdith, with: ReplaceWdith)
            yourWbview.stringByEvaluatingJavaScript(from: htmlString! as String)
            yourWbview.loadHTMLString(htmlString!, baseURL: nil)
    
    }