title: Where do I put javascript and html code in order to plot via Plotly.js in JavaFX?
body: <p>I am trying to use the following Time series-style plot in plotly.js in order to plot ratio vs position. I have already created JSON files which contain these variables i.e. ratio and position.</p>
  
  <p>I am confused as to how to incorporate the online examples with my case scenario because they talk about HTML and Javascript.</p>
  
  <p>I tried using the fx:script tag in the xml file of JavaFX (FXML Document) but maybe I put it in the wrong div or something? For understanding's sake, I copy pasted the whole code from plotly.js example:</p>
  
  <p><a href="https://plot.ly/javascript/time-series/" rel="nofollow noreferrer">https://plot.ly/javascript/time-series/</a></p>
  
  <p>and pasted it in my FXML as follows -- just to see if I can get a hang of how it works so that I can build on that concept and make changes to add my own data:</p>
  
  <pre><code>&lt;center&gt;
     &lt;WebView fx:id="webView" prefHeight="414.0" prefWidth="863.0" BorderPane.alignment="CENTER"&gt;
      &lt;fx:script&gt; 
          Plotly.d3.csv("https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv", function(err, rows){
  
              function unpack(rows, key) {
              return rows.map(function(row) { return row[key]; });
            }
  
  
            var trace1 = {
              type: "scatter",
              mode: "lines",
              name: 'AAPL High',
              x: unpack(rows, 'Date'),
              y: unpack(rows, 'AAPL.High'),
              line: {color: '#17BECF'}
            }
  
            var trace2 = {
              type: "scatter",
              mode: "lines",
              name: 'AAPL Low',
              x: unpack(rows, 'Date'),
              y: unpack(rows, 'AAPL.Low'),
              line: {color: '#7F7F7F'}
            }
  
            var data = [trace1,trace2];
  
            var layout = {
              title: 'Time Series with Rangeslider', 
              xaxis: {
                autorange: true, 
                range: ['2015-02-17', '2017-02-16'], 
                rangeselector: {buttons: [
                    {
                      count: 1, 
                      label: '1m', 
                      step: 'month', 
                      stepmode: 'backward'
                    }, 
                    {
                      count: 6, 
                      label: '6m', 
                      step: 'month', 
                      stepmode: 'backward'
                    }, 
                    {step: 'all'}
                  ]}, 
                rangeslider: {range: ['2015-02-17', '2017-02-16']}, 
                type: 'date'
              }, 
              yaxis: {
                autorange: true, 
                range: [86.8700008333, 138.870004167], 
                type: 'linear'
              }
            };
  
            Plotly.newPlot('webView', data, layout);
            })
  
  
      &lt;/fx:script&gt;
  
  
          &lt;BorderPane.margin&gt;
              &lt;Insets bottom="10.0" left="10.0" right="10.0" top="10.0" /&gt;
          &lt;/BorderPane.margin&gt;
  
      &lt;/WebView&gt;
  </code></pre>
  
  <p></p>
  
  <p>Here is the code in my Controller class:</p>
  
  <pre><code>@FXML
  private WebView webView;
  @FXML
  private Button duumy1;
  @FXML
  private Button duumy2;
  @FXML
  private Button duumy3;
  
  WebEngine webEngine;
  @FXML
  ProgressBar progress;
  @FXML
  Label progressText;"
  
  
  "public void dummybutton1(ActionEvent event){
      webEngine.load(""https://www.cranfield.ac.uk"");
  }
  public void dummybutton2(ActionEvent event){
      webEngine.executeScript(""method_name();"");
  }
  public void dummybutton3(ActionEvent event){
      //webEngine.executeScript(xhtml.xhtml);
      //webEngine.load(""http://138.250.31.106:3000/"");
  }
  public void loadKegg(ActionEvent event){
      webEngine.load(""https://www.genome.jp/kegg/"");
  }"
  
  
  "   
  
  
  @Override
  public void initialize(URL url, ResourceBundle rb) {
  
      webEngine = webView.getEngine();
  
  
      webEngine.getLoadWorker().stateProperty().addListener(
          new ChangeListener&lt;State&gt;() {
              @Override
              public void changed(ObservableValue ov, State oldState, State newState) {
                  if (newState != State.SUCCEEDED){
                      progressText.setText(""Loading Page... Please wait."");
                      progress.setVisible(true);
                  }
  
                  if (newState == State.SUCCEEDED) {
                       // hide progress bar then page is ready
                       progress.setVisible(false);
                       progressText.setText(""Thank you for waiting!"");
                  }
  
              }
          });
  </code></pre>
  
  <p>My query is more about the concept - I am trying to understand how to create a plotl.js TimeSeries graph in JAVAFX with my data stored in JSON object. I am an amateur coder so will appreciate easy-to-understand answers because I have gone through the following all night and can't wrap my head around it:</p>
  
  <pre><code>https://docs.oracle.com/javase/8/javafx/api/javafx/fxml/doc- 
  files/introduction_to_fxml.html#scripting
  https://docs.oracle.com/javafx/2/webview/jfxpub-webview.htm
  https://o7planning.org/en/11151/javafx-webview-and-webengine-tutorial
  http://www.java2s.com/Code/Java/JavaFX/WebEngineLoadListener.htm
  </code></pre>
  
  <p>So I need HTML and Javascript injected somewhere in JAVAFX in order for this plot to work?
  Any help will be appreciated, thanks.</p>
  
  <p>P.S. I also tried using this tag:</p>
  
  <p><code>&lt;html&gt;&lt;![CDATA[This is &lt;b&gt;bold&lt;/b&gt;]]&gt;&lt;/html&gt;</code> </p>
  
  <p>But no matter where I place this in my FXML document (I tried placing it in (centre) div and also outside my (Border Pane) div, it says that it is not supported:</p>
  
  <p>the parent element "(source)" does not accept properties</p>