Google Charts - Dashboard toggle data series on/off [duplicate]

Refresh

April 2019

Views

350 time

1

This question already has an answer here:

As always I appreciate the experts here!

The check box should toggle the 5th column in the chart. (red goal line)

Function colToggle() in general is working because the switch gets me to the right case.

chart.setView([0, 1, 2, 3, 4]); is not doing anything and I'm not sure if I'm getting the correct method or syntax.

Any idea how the line could be toggled ? (considering the dashboard setup)

// Load the Visualization API and the corechart package.
google.charts.load('current', {
  'packages': ['corechart', 'table', 'gauge', 'controls']
});

// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(gChart0);

function gChart0() {
  drawDashboard(0, 0);
};

function drawDashboard(p1, v1) {

  //var urlString_temp = 'https://httpbin.org/get'; //HTTP Test server that accepts GET/Post calls
  var urlString_temp = 'https://jsonplaceholder.typicode.com/users'; //HTTP Test server that accepts GET/Post calls

  $.ajax({
    type: 'GET',
    dataType: 'json',
    contentType: "application/json",
    //url: urlString,
    url: urlString_temp,
    success: function(result) {

      //Manually loaded "result" with JSON that normally comes from "urlString".   
      result = [{
        calDay: new Date(2017, 10, 15),
        'v1': 100,
        'v2': 500,
        'p1': '982G01',
        'p2': '301',
        'p3': 'EZRS',
        'p4': 'A'
      }, {
        calDay: new Date(2017, 10, 16),
        'v1': 110,
        'v2': 510,
        'p1': '982G01',
        'p2': '301',
        'p3': 'EZRS',
        'p4': 'A'
      }, {
        calDay: new Date(2017, 10, 17),
        'v1': 120,
        'v2': 520,
        'p1': '982G01',
        'p2': '301',
        'p3': 'EZRS',
        'p4': 'A'
      }, {
        calDay: new Date(2017, 10, 15),
        'v1': 130,
        'v2': 530,
        'p1': '982G01',
        'p2': '301',
        'p3': 'EZFE',
        'p4': 'B'
      }, {
        calDay: new Date(2017, 10, 16),
        'v1': 140,
        'v2': 540,
        'p1': '982G01',
        'p2': '301',
        'p3': 'EZFE',
        'p4': 'B'
      }, {
        calDay: new Date(2017, 10, 17),
        'v1': 150,
        'v2': 550,
        'p1': '982G01',
        'p2': '301',
        'p3': 'EZFE',
        'p4': 'B'
      }, {
        calDay: new Date(2017, 10, 15),
        'v1': 160,
        'v2': 560,
        'p1': '982G01',
        'p2': '301',
        'p3': 'EZ',
        'p4': 'C'
      }, {
        calDay: new Date(2017, 10, 16),
        'v1': 170,
        'v2': 570,
        'p1': '982G01',
        'p2': '301',
        'p3': 'EZ',
        'p4': 'C'
      }, {
        calDay: new Date(2017, 10, 17),
        'v1': 180,
        'v2': 580,
        'p1': '982G01',
        'p2': '301',
        'p3': 'EZ',
        'p4': 'C'
      }, {
        calDay: new Date(2017, 10, 15),
        'v1': 190,
        'v2': 590,
        'p1': '982G01',
        'p2': '302',
        'p3': 'EZRS',
        'p4': 'D'
      }, {
        calDay: new Date(2017, 10, 16),
        'v1': 200,
        'v2': 600,
        'p1': '982G01',
        'p2': '302',
        'p3': 'EZRS',
        'p4': 'D'
      }, {
        calDay: new Date(2017, 10, 17),
        'v1': 210,
        'v2': 610,
        'p1': '982G01',
        'p2': '302',
        'p3': 'EZRS',
        'p4': 'D'
      }, {
        calDay: new Date(2017, 10, 15),
        'v1': 220,
        'v2': 620,
        'p1': '982G01',
        'p2': '302',
        'p3': 'EZFE',
        'p4': 'E'
      }, {
        calDay: new Date(2017, 10, 16),
        'v1': 230,
        'v2': 630,
        'p1': '982G01',
        'p2': '302',
        'p3': 'EZFE',
        'p4': 'E'
      }, {
        calDay: new Date(2017, 10, 17),
        'v1': 240,
        'v2': 640,
        'p1': '982G01',
        'p2': '302',
        'p3': 'EZFE',
        'p4': 'E'
      }, {
        calDay: new Date(2017, 10, 15),
        'v1': 250,
        'v2': 650,
        'p1': '982G01',
        'p2': '302',
        'p3': 'EZ',
        'p4': 'F'
      }, {
        calDay: new Date(2017, 10, 16),
        'v1': 260,
        'v2': 660,
        'p1': '982G01',
        'p2': '302',
        'p3': 'EZ',
        'p4': 'F'
      }, {
        calDay: new Date(2017, 10, 17),
        'v1': 270,
        'v2': 670,
        'p1': '982G01',
        'p2': '302',
        'p3': 'EZ',
        'p4': 'F'
      }, {
        calDay: new Date(2017, 10, 15),
        'v1': 280,
        'v2': 680,
        'p1': '982G02',
        'p2': '401',
        'p3': 'EZRS',
        'p4': 'G'
      }, {
        calDay: new Date(2017, 10, 16),
        'v1': 290,
        'v2': 690,
        'p1': '982G02',
        'p2': '401',
        'p3': 'EZRS',
        'p4': 'G'
      }, {
        calDay: new Date(2017, 10, 17),
        'v1': 300,
        'v2': 700,
        'p1': '982G02',
        'p2': '401',
        'p3': 'EZRS',
        'p4': 'G'
      }, {
        calDay: new Date(2017, 10, 15),
        'v1': 310,
        'v2': 710,
        'p1': '982G02',
        'p2': '401',
        'p3': 'EZFE',
        'p4': 'H'
      }, {
        calDay: new Date(2017, 10, 16),
        'v1': 320,
        'v2': 720,
        'p1': '982G02',
        'p2': '401',
        'p3': 'EZFE',
        'p4': 'H'
      }, {
        calDay: new Date(2017, 10, 17),
        'v1': 330,
        'v2': 730,
        'p1': '982G02',
        'p2': '401',
        'p3': 'EZFE',
        'p4': 'H'
      }, {
        calDay: new Date(2017, 10, 15),
        'v1': 340,
        'v2': 740,
        'p1': '982G02',
        'p2': '401',
        'p3': 'EZ',
        'p4': 'I'
      }, {
        calDay: new Date(2017, 10, 16),
        'v1': 350,
        'v2': 750,
        'p1': '982G02',
        'p2': '401',
        'p3': 'EZ',
        'p4': 'I'
      }, {
        calDay: new Date(2017, 10, 17),
        'v1': 360,
        'v2': 760,
        'p1': '982G02',
        'p2': '401',
        'p3': 'EZ',
        'p4': 'I'
      }, {
        calDay: new Date(2017, 10, 15),
        'v1': 370,
        'v2': 770,
        'p1': '982G02',
        'p2': '402',
        'p3': 'EZRS',
        'p4': 'J'
      }, {
        calDay: new Date(2017, 10, 16),
        'v1': 380,
        'v2': 780,
        'p1': '982G02',
        'p2': '402',
        'p3': 'EZRS',
        'p4': 'J'
      }, {
        calDay: new Date(2017, 10, 17),
        'v1': 390,
        'v2': 790,
        'p1': '982G02',
        'p2': '402',
        'p3': 'EZRS',
        'p4': 'J'
      }, {
        calDay: new Date(2017, 10, 15),
        'v1': 400,
        'v2': 800,
        'p1': '982G02',
        'p2': '402',
        'p3': 'EZFE',
        'p4': 'K'
      }, {
        calDay: new Date(2017, 10, 16),
        'v1': 410,
        'v2': 810,
        'p1': '982G02',
        'p2': '402',
        'p3': 'EZFE',
        'p4': 'K'
      }, {
        calDay: new Date(2017, 10, 17),
        'v1': 420,
        'v2': 820,
        'p1': '982G02',
        'p2': '402',
        'p3': 'EZFE',
        'p4': 'K'
      }, {
        calDay: new Date(2017, 10, 15),
        'v1': 430,
        'v2': 830,
        'p1': '982G02',
        'p2': '402',
        'p3': 'EZ',
        'p4': 'L'
      }, {
        calDay: new Date(2017, 10, 10),
        'v1': 440,
        'v2': 840,
        'p1': '982G02',
        'p2': '402',
        'p3': 'EZ',
        'p4': 'L'
      }, {
        calDay: new Date(2017, 9, 31),
        'v1': 450,
        'v2': 850,
        'p1': '982G02',
        'p2': '402',
        'p3': 'EZ',
        'p4': 'L'
      }];

      //Create DataTable
      var data = new google.visualization.DataTable();

      //Add Columns
      data.addColumn('date', 'Calendar Day'); //0 calDay

      data.addColumn('number', 'EZRS'); //1 case v1 to bar1
      data.addColumn('number', 'EZFE'); //2 case v1 to bar2
      data.addColumn('number', 'EZ'); //3 case v1 to bar3
      data.addColumn('number', 'Other'); //4 case v1 to bar4

      data.addColumn('number', 'Goal'); //5 v2 goal line

      data.addColumn('string', 'Overhead Group'); //6 p1
      data.addColumn('string', 'MRP'); //7 p2
      data.addColumn('string', 'MBR Stock Category'); //8 p3
      data.addColumn('string', 'Material'); //9 p4

      //Add Rows
      var dataArray = [];
      $.each(result, function(i, obj) {

        var bar1 = 0; //EZRS
        var bar2 = 0; //EZFE
        var bar3 = 0; //EZ
        var bar4 = 0; //Other

        switch (obj.p3) {
          case 'EZRS':
            bar1 = obj.v1;
            break;
          case 'EZFE':
            bar2 = obj.v1;
            break;
          case 'EZ':
            bar3 = obj.v1;
            break;
          default:
            bar4 = obj.v1;
        }

        dataArray.push([
          obj.calDay,
          bar1, bar2, bar3, bar4, obj.v2,
          obj.p1, obj.p2, obj.p3, obj.p4,
        ]);
      });
      data.addRows(dataArray);

      //Create Data View
      var view = new google.visualization.DataView(data);
      view.setColumns([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]);

      // Create a dashboard.
      var dashboard = new google.visualization.Dashboard(
        document.getElementById('div_dashboard'));

      //When this is commented out - the category picker works
      var categoryPicker1 = new google.visualization.ControlWrapper({
        'controlType': 'ChartRangeFilter',
        'containerId': 'div_categoryPicker1',
        //'view': { columns: [0, 1, 2, 3, 4] },
        'options': {
          'filterColumnIndex': 0,
          'ui': {
            'chartType': 'LineChart',
            'chartView': {
              'columns': [0, 1]
            },
            'chartOptions': {
              'height': 50,
              'chartArea': {
                'width': '80%'
              },
              'series': {
                //column 1 is first v1 - Start couting 0 here for series.
                0: {
                  color: 'white'
                }
              },
            }, //END chartOptions                        
          } //END ui
        } //END 'options'
      }); //END categoryPicker1

      var categoryPicker2 = new google.visualization.ControlWrapper({
        'controlType': 'CategoryFilter',
        'containerId': 'div_categoryPicker2',
        'options': {
          'filterColumnIndex': 8, //Column used in control
          'ui': {
            //'label': 'Storage Bin',
            'labelStacking': 'vertical',
            'labelSeparator': ':',
            'allowTyping': false,
            'allowMultiple': false
          }
        }
      });

      var categoryPicker3 = new google.visualization.ControlWrapper({
        'controlType': 'CategoryFilter',
        'containerId': 'div_categoryPicker3',
        'options': {
          'filterColumnIndex': 6, //Column used in control
          'ui': {
            //'label': 'Storage Bin',
            'labelStacking': 'vertical',
            'labelSeparator': ':',
            'allowTyping': false,
            'allowMultiple': false
          }
        }
      });
      var categoryPicker4 = new google.visualization.ControlWrapper({
        'controlType': 'CategoryFilter',
        'containerId': 'div_categoryPicker4',
        'options': {
          'filterColumnIndex': 7, //Column used in control
          'ui': {
            //'label': 'Storage Bin',
            'labelStacking': 'vertical',
            'labelSeparator': ':',
            'allowTyping': false,
            'allowMultiple': false
          }
        }
      });

      var proxyTable = new google.visualization.ChartWrapper({
        'chartType': 'Table',
        'containerId': 'div_proxyTable',
        'options': {
          page: 'enable',
          pageSize: '9' //to limit the render time with large data sets
        },
        'view': {
          columns: [0, 1, 2, 3, 4, 5, 8, 6, 7]
        }
      });

      var chart = new google.visualization.ChartWrapper({
        'chartType': 'ComboChart',
        'containerId': 'div_chart',
        'view': {
          columns: [0, 1, 2, 3, 4, 5]
        },
        'options': {
          width: '100%',
          height: 'auto',
          seriesType: 'bars',
          isStacked: true,
          series: {
            //column 1 is first v1 - Start couting 0 here for series.
            0: {
              color: 'rgb(0, 86, 145)'
            },
            1: {
              color: 'rgb(0, 142, 207)'
            },
            2: {
              color: 'rgb(127, 198, 231)'
            },
            3: {
              color: 'rgb(191,192,194)'
            },
            4: {
              color: 'rgb(226, 0, 21)',
              type: 'line',
            }
          },
        }
      });

      //Object binding
      dashboard.bind([categoryPicker1, categoryPicker2, categoryPicker3, categoryPicker4], proxyTable);
      dashboard.bind(categoryPicker2, categoryPicker3).bind(categoryPicker3, categoryPicker4);


      //Draw dashboard
      dashboard.draw(view);

      //Event listeners
      google.visualization.events.addListener(dashboard, 'ready', function() {
        redrawChart();

        if (document.addEventListener) {
          document.getElementById("ck_colToggle").addEventListener("click", function() {
            colToggle();
          });
        };

        //Category Picker State Change
        google.visualization.events.addListener(categoryPicker1, 'statechange', function() {
          redrawChart();
        });
        google.visualization.events.addListener(categoryPicker2, 'statechange', function() {
          redrawChart();
        });
        google.visualization.events.addListener(categoryPicker3, 'statechange', function() {
          redrawChart();
        });
        google.visualization.events.addListener(categoryPicker4, 'statechange', function() {
          redrawChart();
        });

      });

      function redrawChart() {
        chart.setDataTable(google.visualization.data.group(
          proxyTable.getDataTable(), [0], [{
            'column': 1,
            'aggregation': google.visualization.data.sum,
            'type': 'number'
          }, {
            'column': 2,
            'aggregation': google.visualization.data.sum,
            'type': 'number'
          }, {
            'column': 3,
            'aggregation': google.visualization.data.sum,
            'type': 'number'
          }, {
            'column': 4,
            'aggregation': google.visualization.data.sum,
            'type': 'number'
          }, {
            'column': 5,
            'aggregation': google.visualization.data.sum,
            'type': 'number'
          }]));

        chart.draw();
      } //END function redrawChart()


      function colToggle() {
        var isChecked = document.getElementById("ck_colToggle").checked;

        switch (isChecked) {
          case true:
            console.log('isTrue');
            break;
          case false:
            console.log('isFalse');
            chart.setView([0, 1, 2, 3, 4]);
            
            break;
          default:
            console.log('other')
        }
        chart.draw();
      }; //END function colToggle()

    } //END  success: function (result) {
  }); //END  $.ajax({
} //END  function drawChart()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>

<span>
  <input id="ck_colToggle" type="checkbox" checked=""> 
  <label for="ck_colToggle">Goal (On/Off)</label>
</span>

<hr/>

<div id="div_dashboard" style="">
  <table>
    <tr>
      <td>
        <div id="div_categoryPicker2" style="margin-right:10px;"></div>
      </td>
      <td>
        <div id="div_categoryPicker3" style="margin-right:10px;"></div>
      </td>
      <td>
        <div id="div_categoryPicker4" style="padding-right:10px;"></div>
      </td>

    </tr>
  </table>
  <div id="div_chart" style=""></div>
  <div id="div_categoryPicker1" style=""></div>
  <div id="div_proxyTable" style=""></div>
</div>

1 answers

0

Commenter provided this useful link which answers my question.

check this answer, which uses checkboxes to turn off one or more series... – WhiteHat Jan 4 at 22:08

Thank you!