Important: Please read the Qt Code of Conduct -

QtWebView + Javascript Visualization Library

  • Hi all, had this posted in the wrong forum folder so sorry for the duplicate ...

    So "D3": is a visualization library written in javascript for data visualizations on the web.

    The goal is to try and expand qml's repertoire by allowing access to D3 via WebKit.

    I can display a D3 graph (local html file) in a QtWebView via qml very simply.

    url: "../../d3/scatter/index.html"
    preferredWidth: window.height
    preferredHeight: window.width
    smooth: true

    On the D3 side we have a few files:
    index.html // Basically just calls the d3 javascript
    d3code.js // Javascript code
    d3.v3.js // The D3 library

    The question is how do i send plot data to d3code.js from qml/qt or is it not possible because it will be in its own thread running in the webview. I came across the "QtWebKit-Bridge": but I havent figured out yet if it will work for this setup. Any advice? Pointers? So i know im going in the right direction.

    Thanks guys and Long live Qt!

  • Months later... did this work out for you? I'm investigating doing something similar (no QML, just a QtWebView widget).

  • Hi, guys! Any success with integration of D3.js so far?

  • We coincidentally just started down this path again after my response on a different project (which at yet doesn't need dynamic data, and we aren't using QML).

    So we haven't yet gotten to the original question--sending new data to D3 dynamically--but the basic proof-of-concept embedding of D3.js in a Qt web object (either QWebView or QGraphicsWebView) is very simple: just call XXXWebView::setURL() with the path (either local file or web URL) to your HTML source that uses D3.

    The bad news is that dynamically-updating D3 stuff (such as force-directed layouts, but to a lesser extent hover events, etc.) does not seem to perform well in the Qt Webkit view, even on 5.3. The frame rate looks to be several multiples slower than a Webkit browser (this is using the QGraphicsWebView, but I haven't found anything to suspect QWebView would be different).

    As for using the WebKit Bridge, we don't know yet. Our use case is simple enough that we could just write new data to a file, and template/rewrite our JS in that event, and reload the HTML from Qt, so that might be an option if your use case is simple or not mission-critical.

Log in to reply