hello i am using google charts, i would like to display only particular" legend" which is clicked and remaining should be hiden,

huangapple go评论47阅读模式
英文:

hello i am using google charts, i would like to display only particular" legend" which is clicked and remaining should be hiden,

问题

I am unable to display legend which is clicked

one one legend is clicked,
i should get only the legend which is clicked.

the below script hides the legend which is clicked..
can you please help for where i could able to display only the legend which is clicked using google charts

google.visualization.events.addListener(chart, 'select', function () {
      var sel = chart.getSelection();
      // if selection length is 0, we deselected an element
      if (sel.length > 0) {
        // if row is undefined, we clicked on the legend
        if (sel[0].row === null) {
          var col = sel[0].column;
          if (columns[col] == col) {
            // hide the data series
            columns[col] = {
              label: data.getColumnLabel(col),
              type: data.getColumnType(col),
              calc: function () {
               
                return null;
              },
               
            };
            
            // grey out the legend entry
            series[col - 1];
          }
          else {
            // show the data series
            columns[col] = col;
            series[col - 1].color = null;
          }
          var view = new google.visualization.DataView(data);
          view.setColumns(columns);
          console.log(view);
          chart.draw(view, options);
        }
      }
    });
英文:

i am unable to display legend which is clicked

one one legend is clicked,
i should get only the legend which is clicked.

the below script hides the legend which is clicked..
can you please help for where i could able to display only the legend which is clicked using google charts
`

google.visualization.events.addListener(chart, 'select', function () {
      var sel = chart.getSelection();
      // if selection length is 0, we deselected an element
      if (sel.length > 0) {
        // if row is undefined, we clicked on the legend
        if (sel[0].row === null) {
          var col = sel[0].column;
          if (columns[col] == col) {
            // hide the data series
            columns[col] = {
              label: data.getColumnLabel(col),
              type: data.getColumnType(col),
              calc: function () {
               
                return null;
              },
               
            };
            
            // grey out the legend entry
            series[col - 1];
          }
          else {
            // show the data series
            columns[col] = col;
            series[col - 1].color = null;
          }
          var view = new google.visualization.DataView(data);
          view.setColumns(columns);
          console.log(view);
          chart.draw(view, options);
        }
      }
    });

答案1

得分: 0

I found my answer.

var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));

google.visualization.events.addListener(chart, 'select', function() {
  var selectedItem = chart.getSelection()[0];
  if (selectedItem) {
    var legend = data.getColumnLabel(selectedItem.column);
    if (legendSelected) {
      chart.draw(data, options);
      legendSelected = false;
    }
    var view = new google.visualization.DataView(data);
    view.setColumns([0, selectedItem.column]);
    chart.draw(view, options);
    alert('Selected legend: ' + legend);
    legendSelected = true;
  } else if (legendSelected) {
    chart.draw(data, options);
    alert('All legends displayed again.');
    legendSelected = false;
  }
});

google.visualization.events.addListener(chart, 'click', function() {
  if (legendSelected) {
    chart.draw(data, options);
    legendSelected = false;
  }
});

chart.draw(data, options);
英文:

i found my answer

 var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));

  google.visualization.events.addListener(chart, 'select', function() {
    var selectedItem = chart.getSelection()[0];
    if (selectedItem) {
      var legend = data.getColumnLabel(selectedItem.column);
      if (legendSelected) {
        chart.draw(data, options);
        legendSelected = false;
      }
      var view = new google.visualization.DataView(data);
      view.setColumns([0, selectedItem.column]);
      chart.draw(view, options);
      alert('Selected legend: ' + legend);
      legendSelected = true;
    } else if (legendSelected) {
      chart.draw(data, options);
      alert('All legends displayed again.');
      legendSelected = false;
    }   }); google.visualization.events.addListener(chart, 'click', function() {
    if (legendSelected) {
      chart.draw(data, options);
      legendSelected = false;
    }   });   chart.draw(data, options);

huangapple
  • 本文由 发表于 2023年4月19日 15:47:03
  • 转载请务必保留本文链接:https://go.coder-hub.com/76051924.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定