[visualization-api] Problem with category switcher filter menu

Wed, 26 Jul 2017 16:39:06 -0700 

Hi, 

I am currently working on a website where I have inserted Line Chart with 
category switcher filter menu.

I did almost all but, I have some trouble.  
https://jsfiddle.net/georgmorb/5nsyjL1f/2/

Iwant to hide chart category names in horizontal line (Chart A, or Chart B) 
and change it with other string type data. 

please help me to solve this problem. 

Thanks in advance

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>

<script type="text/javascript" 
src="https://www.gstatic.com/charts/loader.js";></script>

<script type="text/javascript">

      google.charts.load('current', {'packages':[/*'corechart',*/ 
/*'table',*/ /*'line',*/ 'controls']});
 
      google.charts.setOnLoadCallback(drawCategoryFilter);


  function drawCategoryFilter() {

    var dashboard = new google.visualization.Dashboard(
        document.getElementById('categoryFilter_dashboard_div'));

    var control = new google.visualization.ControlWrapper({
      'controlType': 'CategoryFilter',
      'containerId': 'categoryFilter_control_div',
      'options': {
        'filterColumnIndex': 0,
        'ui': {
          'allowTyping': false,
          'allowMultiple': false,
          /*'selectedValuesLayout': 'belowStacked'*/
        }
      },
      'state': {'selectedValues': [/*'Chart A',*/ 'Chart B']}
    });

    var chart = new google.visualization.ChartWrapper({
      'chartType': 'LineChart',
      'containerId': 'categoryFilter_chart_div',
   
      'options': {
'pointSize': 5,
'legend': 'side',
'hAxis': {title: ' '},  
        'vAxis': {title: 'percent'},
        'height': 300 
      }
    });
    var data = google.visualization.arrayToDataTable([
      ['Name', 'Median', '1st Quartile', '3rd Quartile'],
      ['Name', 'Median', '1st Quartile', '3rd Quartile'],
     ['Chart A' , 12, 2, 7],
     ['Chart A', 20, 3, 9],
     ['Chart A', 2, 5, 11],
     ['Chart A', 7, 3, 11],
     ['Chart A', 25, 7, 1],

      ['Chart B', 4.0, 2.0, 6.0],
      ['Chart B', 4.0, 2.5, 6.5],
      ['Chart B', 5.0, 3.0, 7.0],
      ['Chart B', 5.5, 3.5, 7.5],
      ['Chart B', 10.0, 8.0, 12.0],
      ['Chart B', 16.0, 14.0, 18.0],
      ['Chart B', 19.0, 17.0, 21.0],
      ['Chart B', 23.0, 21.0, 25.0],
      ['Chart B', 21.0, 19.0, 23.0]
    ]);
    dashboard.bind(control, chart);
    dashboard.draw(data);
  }
</script>
</head>

<body>
<div id="categoryFilter_control_div"></div>
<div id="categoryFilter_chart_div"></div>
</body>
</html>




-- 
You received this message because you are subscribed to the Google Groups 
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/febdface-4c88-4659-a337-26c726b69ce4%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Reply via email to