Embedding R htmlwidgets in existing webpage through jQuery?

Question

Actually i am following this question of stackoverflow

Embedding an R htmlwidget into existing webpage

The above question shows two methods to embedd a graph

Php
Jquery

Currently i am using jQuery ajax method to embed the json it works but on second ajax request graph does't updated. But when i reload the page the graph will be updated. So i want to update the graph without reloading the whole page.

    ** Updating data.json**


    jQuery.ajax({
    url : '/modules/multistep_form/plotlyjson/775_graph2_data.json',
    beforeSend : function() {
    },
    type : 'POST',
    cache : false,
    success : function(data) {
      //console.log(data);
     // $("#data-json-graph2").text("");
     console.log($("#data-json-graph2").text(""));
    $("#data-json-graph2").append(JSON.stringify(data));
      setTimeout(function(){
                window.HTMLWidgets.staticRender();
                Drupal.attachBehaviors();
              }, 1000);
    },
    error : function(xhr, status, error) {
      // executed if something went wrong during call
      if (xhr.status > 0)
        alert('got error: ' + status);
    }
  });

**Updating style.json**

 jQuery.ajax({
    url : '/modules/multistep_form/plotlyjson/775_graph2_style.json',
    beforeSend : function() {
    },
    type : 'POST',
    cache : false,
    success : function(data) {
      //console.log(data);
      //$("#style-json-graph2").text("");
      console.log($("#style-json-graph2").text(""));
     $("#style-json-graph2").append(JSON.stringify(data));

      setTimeout(function(){
                window.HTMLWidgets.staticRender();
                Drupal.attachBehaviors();
              }, 1000);
    },
    error : function(xhr, status, error) {
      // executed if something went wrong during call
      if (xhr.status > 0)
        alert('got error: ' + status);
    }
  });

score 2 · Accepted Answer · answered Aug 23 '17 at 11:34

For updating graph using ajax follow these steps

Remove class html-widget-static-bound from graph container
Also empty your json data container $("#data-json-graph2").text("");
Call Plotly.newPlot("plotly-graph2"); on graph container

Below is full code example

//js for Making Dynamic  plolty ....
$("#btn1").click(function(){
  $("#plotly-graph2").removeClass("html-widget-static-bound");
  $("#data-json-graph2").text("");
  var Hashtagsvalue = $('#selectfreqvalue').val(); 
  var nid =  $('#nid').val();
  var filePath = $('#path').val();

  jQuery.ajax({
    url : '/type3',
    data : {
      Hashtagsvalue : Hashtagsvalue,
      filePath : filePath,
      nid : nid
    },
    beforeSend : function() {
     jQuery("#loader-container").css('display','block');
     jQuery("#loader-container .ajax-loader").show();
    },
    type : 'post',
    cache: false,
    success : function(data) {
    var graph2Json = '/modules/multistep_form/plotlyjson/'+nid+'_graph2_data.json';
    if(data['output'] == 'success'){
      /***********************************************/
      jQuery.ajax({
      url : graph2Json,
      beforeSend : function() {
    },
    type : 'POST',
    cache : false,
    success : function(data) {
      console.log(JSON.stringify(data));
      $("#data-json-graph2").append(JSON.stringify(data));
      setTimeout(function(){
        window.HTMLWidgets.staticRender();
        Drupal.attachBehaviors();
       }, 1000);
     Plotly.newPlot("plotly-graph2");
    },
    error : function(xhr, status, error) {
      // executed if something went wrong during call
      if (xhr.status > 0)
        alert('got error: ' + status);
    }
  });

    }

    jQuery("#loader-container .ajax-loader").hide();
     jQuery("#loader-container").css('display','none');

    },
    error : function(xhr, status, error) {
      // executed if something went wrong during call
      if (xhr.status > 0)
        alert('got error: ' + status);
    }
  });

});

Embedding R htmlwidgets in existing webpage through jQuery?

1 Answers1