Load a swift variable in HTML page
Question
I'm developing a swift application. In one of the view, I'm using amcharts for Charts. Charts should use dynamic values that should be loaded from a ViewController . In this scenario, In my html file I have used var data which is a JSON object. That JSON will be keep on changing depending upon the input. I want to pass this data variable to html from Viewcontroller.swift file. How do I do that ?? Is this the way or any other better is there ??
Sharing the ViewController and html codes.
ViewController.swift
import UIKit
class PyramidChartView: UIViewController,UIWebViewDelegate{
@IBOutlet weak var webView: UIWebView!
override func viewDidLoad() {
super.viewDidLoad()
let path1 = NSBundle.mainBundle().pathForResource("amcharts", ofType: "js")
do {
let htmlFile1 = try NSString(contentsOfFile: path1!, encoding: NSUTF8StringEncoding)
webView.stringByEvaluatingJavaScriptFromString(htmlFile1 as String)
}
catch {
}
let path2 = NSBundle.mainBundle().pathForResource("funnel", ofType: "js")
do {
let htmlFile2 = try NSString(contentsOfFile: path2!, encoding: NSUTF8StringEncoding)
webView.stringByEvaluatingJavaScriptFromString(htmlFile2 as String)
}
catch {
}
let path = NSBundle.mainBundle().pathForResource("pyramid", ofType: "html")
do {
let pyramidHtmlFile = try NSString(contentsOfFile: path!, encoding: NSUTF8StringEncoding)
webView.loadHTMLString(pyramidHtmlFile as String, baseURL: nil)
}
catch {
}
}
override func viewWillAppear(animated: Bool) {
webView.delegate = self
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}
pyramid.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>amCharts examples</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script type="text/javascript" src="document.json"></script>
<script>
var chart;
var data = [
{
"title": "Ideas Implemented",
"value": 200
},
{
"title": "Ideas Under Review",
"value": 193
},
{
"title": "Ideas Rejected",
"value": 96
},
{
"title": "Ideas Approved",
"value": 72
},
{
"title": "Ideas Under Approval",
"value": 65
}
];
var legendData = {
"enabled": true,
"align": "left",
"autoMargins": false,
"autoMargins": true,
"forceWidth": false,
"equalWidths": false,
"left": 100,
"labelWidth": 0,
"maxColumns": 4,
"switchable": false,
"valueWidth": 50
}
AmCharts.ready(function () {
chart = new AmCharts.AmFunnelChart();
chart.rotate = false;
chart.align= "right";
chart.labelText="[[value]]",
chart.balloonText="<b>[[value]]</b>",
chart.balloon.fixedPosition = true;
chart.baseWidth="80%";
chart.height="100%";
chart.marginRight = 50;
chart.marginLeft = 5;
chart.fontSize = 8;
chart.labelEnabled = "false";
chart.titleField = "title";
chart.valueField = "value";
chart.startX = -500;
chart.dataProvider = data;
chart.depth3D = 100;
chart.angle = 30;
chart.outlineAlpha = 1;
chart.outlineThickness = 2;
chart.outlineColor = "#FFFFFF";
var legend = new AmCharts.AmLegend();
legend = new AmCharts.AmLegend();
legend.position = "bottom";
legend.fontSize = "10px";
legend.align = "left";
legend.markerType = "circle";
legend.valueText = "";
legend.markerSize = 7;
legend.marginLeft = 0;
legend.fontSize = 10;
legend.horizontalGap = 5;
legend.spacing = 5;
legend.verticalGap = 5;
legend.borderAlpha = 0.5;
legend.markerLabelGap = 5;
chart.addLegend(legend);
chart.write("chartdiv");
});
</script>
<style>
#chartdiv
{
position: relative;
width: 320px;
height: 400px;
}
#secondDiv{
height: 500px !important;
overflow: auto;
position: relative;
align: center;
markerSize: 2px;
maxColumns: 4;
}
</style>
</head>
<body>
<div id="chartdiv"></div>
</body>
</html>
1 answers
solution1
0 2016-06-10 04:50:23
Problem with your java script
I tested your code and i got issue inside your java script when i test it on java editor actually i loaded your java script on web view but showing nothing in my code.I don't know java script if you know can solve this problem.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.