Trying to use highcharts inside web-view. Does not work


#1

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>SOME DIV HTML WORKS</div>

    <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 :

import { Component, ElementRef, OnInit, AfterViewInit, ViewChild } from '@angular/core';
import { WebView, LoadEventData } from "ui/web-view";

import { generateChartHtml } from '../../utils/chart-util';



@Component({
    selector : 'my-app',
    templateUrl : 'pages/chart/chart.html',
    styleUrls: ["pages/chart/chart-common.css", "pages/chart/chart.css"]
})



export class ChartComponent {
    webViewSrc: string = "~/pages/chart/webview.html";
}


here is my component.html :

<WebView height="200" width="300" [src]="webViewSrc"></WebView>

code above does not launch my test chart neither in iOS nor in Android :frowning: But it does show simple div :

I have :
tns - 3.0.1
angular - 4

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

  1. 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 :

  1. I don’t know would it try to load form.css from the root of machine, or from some ‘local’ root, i.e. current folder. How should i specify path correctly here?

Thanks in advance for the help


#2

Hi, I just added your chart to my Angular app without problems. What I did was:

  • Add this to my html: <WebView height="200" width="300" [src]="webViewSrc"></WebView>.
  • Add chart.html to the ~/pages/intro folder.
  • Add webViewSrc: string = "~/pages/intro/chart.html"; as a property to the component.


#3

Hey! Thank you for your answer! I did what you’ve said - but unfortunately It did not help me :frowning:
Web view shows my html - I added simple div above the chart container and I can see it :

But chart still does not launch :frowning: I think something is wrong with js here. I updated my post above due to code changes You suggested, and added 2 more questions.

Thank you again for answer :slight_smile:


#4

Well I simply added your webview html as-is, so the code was fine. Are you allowing requests to the domains the webview is pointing to?


#5

should I somehow enable anything in my emulator or in my project? Enable js in web view, or enable requests to remote websites? I’ve mentioned this in my console:


#6

Yes, Google that message, it’s exactly what I was afraid of.


#7

found the solution! . And could you please give answers to last 2 questions? Thank you!

I’ve changed my web view html code to the following :

<html lang="en" >
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="~/pages/chart/test.css">
</head>
<body>
  <div class="haha">HAHA</div>
</body>
</html>

Added link to css file which I put here

And this css file does not apply it’s css :frowning:


#8

What if you change ~/pages/chart/test.css to just chart-common.css Don’t bother with platform-specific css yet, let’s first try to find what the correct folder is. In my experience it’s simply relative to the folder your webview html file is in.


#9

that works! Man thank you very much! You saved me :slight_smile: