Updating Javascript Values from Swift

Question

I used some graph library and load the web pages into the UIWebview in my Swift project.

Is it possible to update the HTML file graph Y axis value from Swift UIViewController.

If it's possible, please suggest me some example.

More info please find the code and snap below.

Startup.html

<!DOCTYPE HTML>
<html>

<head>
    <script type="text/javascript">
        window.onload = function () {
            // initial values of dataPoints
            var dps = [
                       {label: "Management Wing", y: 125}   ,
                       {label: "Production Lab", y: 332},
                       {label: "Cafeteria", y: 55},
                       {label: "Library", y: 46},
                       {label: "Recreation Centre", y: 32}
                       ];

                       alert(dps.y);

                       var totalEmployees = "Total people on campus: 590";

                       var chart = new CanvasJS.Chart("chartContainer",{
                                                      theme: "theme2",
                                                      title:{
                                                      text: "People On Campus"
                                                      },
                                                      axisY: {
                                                      title: "Number of People"
                                                      },
                                                      legend:{
                                                      verticalAlign: "top",
                                                      horizontalAlign: "centre",
                                                      fontSize: 18

                                                      },
                                                      data : [{
                                                              type: "column",
                                                              showInLegend: true,
                                                              legendMarkerType: "none",             
                                                              legendText: totalEmployees,
                                                              indexLabel: "{y}",
                                                              dataPoints: dps
                                                              }]
                                                      });

                                                      // renders initial chart
                                                      chart.render();

                                                      var sum = 590;     //initial sum 

                                                      var updateInterval = 1000;  // milliseconds

                                                      var updateChart = function () {
                                                          // Selecting a random dataPoint
                                                          var dataPointIndex = Math.round(Math.random()*4);     

                                                          // generating random value
                                                          var deltaY = Math.round(2 + Math.random() *(-2-2));   

                                                          // adding random value to random dataPoint
                                                          dps[dataPointIndex].y = (dps[dataPointIndex].y + deltaY) > 0 ? dps[dataPointIndex].y + deltaY : 0 ;

                                                          // updating legend text. 
                                                          sum = sum + deltaY;
                                                          totalEmployees = "total people on campus: " + sum;            
                                                          chart.options.data[0].legendText = totalEmployees;    

                                                          chart.render();

                                                      };
                                                      // update chart after specified interval
                                                      setInterval(function(){updateChart()}, updateInterval);

        }   
    </script>

    <script type="text/javascript" src="/Users/wipro/Shiv_Suthan_M_Drive/Suthan_Drive/Apple_Dev/Projects/Swift/SwiftScript/SwiftScript/canvasjs.min.js"></script>
</head>
<body>
    <div id="chartContainer" style="height:300px; width:100%;">
    </div>
</body>

Viewcontroller.Swift

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view, typically from a nib.

    let localfilePath = NSBundle.mainBundle().URLForResource("startup", withExtension: "html")
    let myRequest = NSURLRequest(URL: localfilePath!);
    modelWebView.loadRequest(myRequest);

    /*
    let url = NSURL (string: "https://www.sourcefreeze.com");
    let requestObj = NSURLRequest(URL: url!);
    modelWebView.loadRequest(requestObj);
    */


}

So thing is I want to update the javascript datapoints (Y axis) from Swift .

@Nirav I'm using below code to retrive the HTML string its working fine do { let myHTMLString = try String(contentsOfURL: localfilePath!) print("HTML : (myHTMLString)") } catch let error as NSError { print("Error: (error)") } But How can i change the datapoints and revert to JS ? — Suthan M
– Suthan M, Commented Jun 15, 2016 at 6:51

Nirav D · Accepted Answer · 2016-06-15 07:31:55Z

1

Update your html file like below

var dps = [
    {label: "Management Wing", y: %ld},
    {label: "Production Lab", y: %ld},
    {label: "Cafeteria", y: %ld},
    {label: "Library", y: %ld},
    {label: "Recreation Centre", y: %ld}
];

Now change your code like this

let localfilePath = NSBundle.mainBundle().URLForResource("demo", withExtension: "html")
do {
    var myHTMLString = try NSString(contentsOfURL: localfilePath!, encoding: NSUTF8StringEncoding)
    myHTMLString = NSString(format: myHTMLString, 123, 25, 100, 46, 85) // Add 5 number that you want to change
    webView.loadHTMLString(myHTMLString as String, baseURL: NSBundle.mainBundle().URLForResource("", withExtension: "")) //Add your js file here
}
catch let error as NSError
{
    print("Error: \(error.description)")
}

Hope this will help you.

edited Jun 15, 2016 at 7:31

answered Jun 15, 2016 at 7:11

Nirav D

72.6k12 gold badges168 silver badges187 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Suthan M Over a year ago

While i tried above I can't find the Graph in the webview, I guess the values not updated to JS ?? :( Anything else do i need to setup else the only two methods of yurs ??

Nirav D Over a year ago

have you put %ld instead of number in html?

Nirav D Over a year ago

I have edited my answer check that. You need to add the java script file in your project and give that file in the NSBundle in loadHTMLString

Suthan M Over a year ago

I'm not handling any separate JS file, I'm using HTML inside of JS function alone.. @Nirav Pls find the coding part of mine above.

Nirav D Over a year ago

I am talking about this canvasjs.min.js file

|

Community · Accepted Answer · 2017-05-23 12:15:07Z

0

Yes you can pass parameter using jscript and update value on UIWebview.

Here is a useful link. Try this and apply your suitable logic. It's work form me. (This link is for objective c but it's work in swift also apply you suitable logic)

JavascriptCore: pass javascript function as parameter in JSExport

Pass variables from Objective-C to javascript function?

How to invoke Objective C method from Javascript and send back data to Javascript in iOS?

edited May 23, 2017 at 12:15

CommunityBot

11 silver badge

answered Jun 15, 2016 at 7:06

Wos

3901 silver badge18 bronze badges

Collectives™ on Stack Overflow

Updating Javascript Values from Swift

2 Answers 2

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related