Question 11135 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

JavaScript error when trying to build a hide/show feature into a dygraph (from an R markdown) – Jquery

I’m creating a dygraph using this:

 library(dygraphs)
    library(htmlwidgets)
    library(rgl)
    knitr::opts_chunk$set(echo = TRUE)
    knitr::knit_hooks$set(webgl = hook_webgl)
    includeScript('C://Desktop//Javascripts/dygraph.js')
    includeScript('C://Desktop//Javascripts/jquery-3.6.0.js')
    
    df<-data.frame(date = seq(as.Date("1980-03-01), length.out = 100, by="day), Long = rnorm(100,50,10), Medium = rnorm(100,30, 5), Short = rnorm(100,10,2), Very.Short = rnorm(100,5,1))
        
    dygraph(df, elementId="the_plot") %>% dyAxis("y", label= "Value ($s)") %>% dyOptions(labelsUTC = TRUE) %>% dyCrosshair(direction = "vertical") %>% dyHighlight(highlightCircleSize = 5, highlightSeriesBackgroundAlpha = 0.2, hideOnMouseOut = FALSE) %>% dyCallbacks(drawCallback = JS('
  function(dygraph, is_initial) {
    if (!is_initial) return;

    var data = this.dataHandler_.data_;
    var labels = dygraph.getLabels();
    var num_cols = labels.length - 1; // exclude x-axis
    var checkboxes_html = "";

    // generate checkbox HTML for each series
    for (var i = 1; i <= num_cols; i++) {
      var label = labels[i];
      var id = "checkbox" + i;
      checkboxes_html += "<label><input type=\"checkbox\" id=\"" + id + "\" checked> " + label + "</label><br>";
    }

    // add checkboxes to the page
    $("#checkboxes").html(checkboxes_html);

    // add change event listeners to checkboxes
    $("#checkboxes").find("input[type=checkbox]").change(function() {
      var series = this.id.replace("checkbox", "");
      var show = this.checked;
      dygraph.setVisibility(parseInt(series), show);
    });
  }'))

I’m trying to add some checkboxes that’ll allow users of the knitted markdown html to show and hide individual series on that dygraph. While I can get it to knit to an html fine, I can’t get the checkboxes to render.

How can I fix this?

Tags:

2

Answers


  1. 0

    Does this work?

    library(dygraphs)
library(htmlwidgets)
library(rgl)
knitr::opts_chunk$set(echo = TRUE)
knitr::knit_hooks$set(webgl = hook_webgl)
includeScript('C://Desktop//Javascripts/dygraph.js')
includeScript('C://Desktop//Javascripts/jquery-3.6.0.js')

df <- data.frame(date = seq(as.Date("1980-03-01"), length.out = 100, by="day"), 
                 Long = rnorm(100,50,10), 
                 Medium = rnorm(100,30, 5), 
                 Short = rnorm(100,10,2), 
                 Very.Short = rnorm(100,5,1))

dygraph(df, elementId="the_plot") %>% 
  dyAxis("y", label= "Value ($s)") %>% 
  dyOptions(labelsUTC = TRUE) %>% 
  dyCrosshair(direction = "vertical") %>% 
 dyHighlight(highlightCircleSize = 5, 
highlightSeriesBackgroundAlpha = 0.2, 
hideOnMouseOut = FALSE) %>%
dyCallbacks(drawCallback = JS('
  function(dygraph, is_initial) {
    if (!is_initial) return;

    var data = dygraph.rawData();
    var labels = dygraph.getLabels();
    var num_cols = labels.length - 1; // exclude x-axis
    var checkboxes_html = "";

    // generate checkbox HTML for each series
    for (var i = 1; i <= num_cols; i++) {
      var label = labels[i];
      var id = "checkbox" + i;
      checkboxes_html += "<label><input type=\"checkbox\" id=\"" + id + "\" checked> " + label + "</label><br>";
    }

    // add checkboxes to the page
    $("#checkboxes").html(checkboxes_html);

    // add change event listeners to checkboxes
    $("#checkboxes").find("input[type=checkbox]").change(function() {
      var series = this.id.replace("checkbox", "");
      var show = this.checked;
      dygraph.setVisibility(parseInt(series), show);
    });
  }
'))
    Login or Signup to reply.
  2. 0

    If that doesn’t work, you could try and create a plugin for it like here: https://rstudio.github.io/dygraphs/gallery-plugins.html

    import * as utils from './dygraph-utils';
import DygraphInteraction from './dygraph-interaction-model';
import IFrameTarp from './iframe-tarp';

const SeriesToggle = (function() {

  "use strict";

  /**
   * @constructor
   */
  const SeriesToggle = function() {
    this.checkboxContainer_ = null;
    this.dygraph_ = null;
    this.labels_ = null;
  };

  SeriesToggle.prototype.toString = function() {
    return 'SeriesToggle Plugin';
  };

  SeriesToggle.prototype.activate = function(dygraph) {
    this.dygraph_ = dygraph;
    this.labels_ = dygraph.getLabels();
    return {
      layout: this.layout
    };
  };

  SeriesToggle.prototype.layout = function(e) {
    if (this.checkboxContainer_ === null) {
      this.createCheckboxes_();
    }
    this.positionCheckboxes_();
  };

  SeriesToggle.prototype.createCheckboxes_ = function() {
    const containerDiv = document.createElement('div');
    containerDiv.style.cssText = 'position:absolute;top:0px;right:0px;';
    this.checkboxContainer_ = containerDiv;

    const labels = this.labels_;
    for (let i = 1; i < labels.length; i++) {
      const label = labels[i];
      const input = document.createElement('input');
      input.type = 'checkbox';
      input.checked = true;
      input.onclick = this.checkboxClickHandler_(label);
      containerDiv.appendChild(input);

      const span = document.createElement('span');
      span.innerHTML = label;
      containerDiv.appendChild(span);
    }
    this.dygraph_.graphDiv.appendChild(containerDiv);
  };

  SeriesToggle.prototype.positionCheckboxes_ = function() {
    const area = this.dygraph_.getArea();
    const containerDiv = this.checkboxContainer_;
    containerDiv.style.left = area.x + 'px';
    containerDiv.style.width = area.w + 'px';
  };

  SeriesToggle.prototype.checkboxClickHandler_ = function(label) {
    const self = this;
    return function(e) {
      self.dygraph_.setVisibility(label, e.target.checked);
    };
  };

  return SeriesToggle;

})();

Dygraph.Plugins.SeriesToggle = SeriesToggle;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search