Displaying our “R – Quality Control Individual Range Chart Made Nice” inside a Java web App using AJAX – How To.

  • Prerequisites:

  • Once you are ready with all mentioned above, it is important you are able to generate the html file on your computer from the RMarkdown file provided on the github repository( https://github.com/LaranIkal/R-ANALYTICS ) mentioned above by using RStudio.

  • Download the zip file: R-ANALYTICS-master.zip
  • Unzip it to a local folder.
  • Double-click on file: R-ANALYTICS.Rproj, it will start rstudio.
  • On the right-below pane, click on files, you will see your files, click on file name: QualityControl_IndividualRangeChart.Rmd, rstudio will open the file:

  • To generate the html file from the Rmarkdown file, click on Knit->Knit to HTML.

  • Now you should be able to see your Intermediate Range Chart html file, like this:

  • To generate the html file from the Rmarkdown file, click on Knit->Knit to HTML.

– Now you must be able to generate the html file from command line, if you are on windows, the command would be like this:

“C:\Program Files\R\R-3.5.1\bin\Rscript” -e “rmarkdown::render(‘C:/Development/R/R-ANALYTICS/QualityControl_IndividualRangeChart.Rmd’)”

Maybe the path to Rscript and the path to the Rmd file is different, just change it as you have it on your computer.

Note. It is important to note that this project was created using Windows 10 and it works on a Windows server as well.

– The next step is to get the files from master repository on github: https://github.com/LaranIkal/rchart.git, or you can also go directly to: https://github.com/LaranIkal/rchart and download the zip file, it will download a file called: rchart-master.zip 

How is it working?:

– When you point your web browser to: http://localhost:8080/RChartFromJava, the MainController Java file sends the homepage.html template to the browser, the homepage.html loads the Javascript file DisplayChart.js under folder rchart\src\main\resources\static

– When you click the Display Chart button, it runs the Javascript code because it is configured in this way in the template: onclick=’JavaScript:xmlhttpPostScriptData( “DisplayChart”, this.form, “iframeChartDisplay”, “Display Chart” )’>, the Javascript code posts the data to the Java backend app using Ajax and keeps waiting for response.

–  The MainController in the Java backend app receives the data and opens the RMarkdown template under folder: rchart\src\main\resources\static\ChartTemplates, it replaces the values and creates a temporary RMarkdown document, then it process the RMarkdown temporary document to create the html document, opens the html file and return it as string to the web browser.

If you have any questions, I might help you if you let a comment in this article.

Enjoy it!!!.