Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

External JS Library: Add graphical element



  • Hi, I'm a C++ developer and a new user of QML.

    I would like to know if is possible to show a JS graphical element from a external JS library inside the QML application.
    I know that Qt have some built in charts, but I want to display my chart using this JS library called plotly.js
    Website link here.

    Here is my full HTML + JS source. I tested it on my local browser and it displays a 2D line chart using plotly.js.

    <html>
        <head>
            <!-- Plotly.js -->
            <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
          </head>
          
          <!-- Plots go in blank <div> elements. 
              You can size them in the plot layout,
              or give the div a size as shown here.
          -->
          <div id="tester" style="width:90%;height:250px;"></div>
          <script>
    
          TESTER = document.getElementById('tester');
          
          Plotly.plot( TESTER, [{
              x: [1, 2, 3, 4, 5],
              y: [1, 2, 4, 8, 16] }], { 
              margin: { t: 0 } }, {showSendToCloud:true} 
              );
          </script>
    </html>
    

    Output:
    cca44b57-95e6-4026-aa50-1293072fcc0f-image.png

    Is possible to put it inside my QML application?
    How can I do it?


Log in to reply