javascriptdygraphs

Dygraphs setVisibility of column


I'm trying to change the visibility of columns of Dygraph GVizChart.

This works:

function drawChart() {
  data = getData();
  window.chart1 = new Dygraph.GVizChart(
       document.getElementById('dygraphs')).draw(data, {
    });
  }

Also this works:

function drawChart() {
  data = getData();
  window.chart1 = new Dygraph.GVizChart(
       document.getElementById('dygraphs')).draw(data, {
            visibility: [false, true, true, true]
    });
  }

But inside drawChart, after that code, when I add following lines,

function drawChart() {
  data = getData();
  window.chart1 = new Dygraph.GVizChart(
       document.getElementById('dygraphs')).draw(data, {
    });
    window.chart1.setVisibility(0, true);
    window.chart1.setVisibility(1, false);
  }

I get error:

Uncaught TypeError: Cannot call method 'setVisibility' of undefined. drawChart

After reading this question, I thought maybe chart1 is not ready at the time of execution. So I added this function:

    function showChange() {
        alert('show chart1:' + window.chart1);
        window.chart1.setVisibility(3, false);
    }
   
  <a href="#" onclick='showChange();return false;'>showChange</a>

But when I click showChange link, I get same error:

Uncaught TypeError: Cannot call method 'setVisibility' of undefined

And alert window says:

show chart1: undefined


Solution

  • new Dygraph.GVizChart() returns an object. .draw() does not.

    You want something more like:

    window.chart1 = new Dygraph.GVizChart(document.getElementById('dygraphs'));
    window.chart1.draw(data, {});
    

    You're also going to run into problems because the dygraphs GViz wrapper does not have a setVisibility() method. You'll need to do get at the underlying Dygraph object for your code to work:

    function showChange() {
        alert('show chart1:' + window.chart1);
        window.chart1.date_graph.setVisibility(3, false);
    }