0

I got a problem. I need to use highcharts in mobile app. So I decided to use web-view. And it does not work neither on iOS nor on Android.

I have 3 questions:

1) I've tried to launch simple highchairs demo in my web view. Something went wrong. What I did wrong in the code below ? I suppose the problem is with loading js scripts.

HTML code inside the web-view component is the following : 

<html lang="en" >
<head>
    <meta charset="utf-8" />
    <meta name="author" content="Script Tutorials" />
    <title>How to create active charts using Highcharts | Script Tutorials</title>

    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>

</head>
<body>
    <div id="chart_1" class="chart"></div>
    <script type='text/javascript'>
    $(document).ready(function() {

// First chart initialization
var chart1 = new Highcharts.Chart({
 chart: {
    renderTo: 'chart_1',
    type: 'area',
    height: 350,
 },
 title: {
    text: 'Tools developers plans to use to make html5 games (in %)'
 },
 xAxis: {
    categories: ['Processing.js', 'Impact.js', 'Other', 'Ease.js', 'Box2D.js', 'WebGL', 'DOM', 'CSS', 'Canvas', 'Javascript']
 },
 yAxis: {
    title: {
       text: 'Interviewed'
    }
 },
 series: [{
    name: 'Dev #1',
    data: [5, 10, 20, 22, 25, 28, 30, 40, 80, 90]
 }, {
    name: 'Dev #2',
    data: [15, 15, 18, 40, 30, 25, 60, 60, 80, 70]
 }, {
    name: 'Dev #3',
    data: [1, 3, 6, 0, 50, 25, 50, 60, 30, 100]
 }]
});

});</script>
</body>
</html>

my component.ts is enabling web-view like that :

export class ChartComponent implements AfterViewInit {
    public webViewSrc: string = generateChartHtml();

    @ViewChild("myWebView") webViewRef: ElementRef;
    @ViewChild("labelResult") labelResultRef: ElementRef;

    ngAfterViewInit() {
        let webview: WebView = this.webViewRef.nativeElement;
        let label: Label = this.labelResultRef.nativeElement;
        label.text = "WebView is still loading...";

        webview.on(WebView.loadFinishedEvent, function (args: LoadEventData) {
            let message;
            if (!args.error) {
                message = "WebView finished loading of " + args.url;
            } else {
                message = "Error loading " + args.url + ": " + args.error;
            }

            label.text = message;
            console.log("WebView message - " + message);
        });
    }
}

PS : generateChartHtml function is simple and just returns html code written above

here is my component.html : 

<ActionBar title="chaaaRtT">
</ActionBar>

<StackLayout #container VerticalOptions="FillAndExpand" height="350" [ngClass]="{'isSigningUp' : !isLoggingIn}">
    <WebView  #myWebView [src]="webViewSrc"></WebView>
    <Label  #labelResult></Label>
</StackLayout>

tns - v3.0.1 angular - v4

And my second question is : It is related to this issue 1659.

2) How can I load local files by html inside the web-view?

Issue 1659's solution is outdated I suppose. And it says nothing about iOS. And its not said what would be root for html file when it would try to load css/js file. For example here

<head>
   <link rel="stylesheet" href="/form.css"/>
</head>

And the last one :

3) Would it try to load form.css from the root of machine, or from some 'local' root, i.e. current folder?

Thanks in advance for the help

Andrey Ponomarenko
  • 553
  • 7
  • 20

1 Answers1

0

solutions : 1) iOS : App Transport Security has blocked a cleartext HTTP resource - this would enable making http requests to any domains. By default in iOS native script is disabled.

2) same as in any web app

3) simply relative to the folder your webview html file is in

Andrey Ponomarenko
  • 553
  • 7
  • 20