CODEWITHSUNDEEP
javascripthtmlqtwebviewqwebview
Ale Rojas
Ale Rojas

Reputation: 497

QWebView doesn't load external javascript (google charts)

What I'm trying to do is to generate "custom" maps depending on what the user wants. For that I'm using GeoCharts which basically is to include 2 JavaScript in the html and another one for the selected information.

So I created QWebView to render that HTML (which will be autogenerated on each request) like the one below:

 GeoXML::GeoXML(QWidget *parent) :
        QMainWindow(parent),
        ui(new Ui::GeoXML)
    {
        ui->setupUi(this);
    
    
        QWebSettings::globalSettings()->setAttribute(QWebSettings::JavascriptEnabled, true);
        QString excRoute = QDir::currentPath ();
    
       
        QFile file(excRoute+"/index.html");
        if(!file.open(QIODevice::ReadOnly)) {
            QMessageBox::information(0, "error", file.errorString());
        }
        QString html= "";
        QTextStream in(&file);
        html = in.readAll();
        file.close();
    
    
        ui->webView->setHtml(html, QUrl("file:///"+excRoute+"/"));
    
    }

the HTML:

<html>
  <head>
    <script type='text/javascript' src='res/loader.js'></script>
    <script type="text/javascript" src="res/jsapi.js"></script>
    <link rel="stylesheet" type="text/css" href="res/index.css"/>

    <script type='text/javascript'>
     google.charts.load('current', {'packages': ['geochart']});
     google.charts.setOnLoadCallback(drawMarkersMap);

      function drawMarkersMap() {
      var data = google.visualization.arrayToDataTable([
        ['Country', 'Poblacion'],
        ['Costa Rica', 'Norte de Costa Rica'],
        ['Mexico', 'Sur de Mexico'],
        ['Nicaragua', 'Nicaragua']
      ]);

      var options = {
        sizeAxis: { minValue: 0, maxValue: 100 },
        region: '013', // Western Europe
        displayMode: 'regions',
        colorAxis: {colors: ['#e7711c', '#4374e0']} // orange to blue
      };

      var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    };

    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;">
    </div>
  </body>
</html>

It does render my page. I see the red background color I put in the CSS but I'm unable to see the map. If I open the html in Chrome it does work but not in qt's QWebView.

I Included both js files in the qrc as well, put them as external files (hosted in Google's website) and locally (like the snippet below) but it didn't work, also went thought this and this posts with no luck.

Also, the docs reads:

When using this method, WebKit assumes that external resources such as JavaScript programs or style sheets are encoded in UTF-8 unless otherwise specified. For example, the encoding of an external script can be specified through the charset attribute of the HTML script tag. Alternatively, the encoding can also be specified by the web server.

which leads me to think that it should render my map by default.

Upvotes: 2

Views: 401

Answers (0)

Related Questions