Search code examples
javascriptchartsgoogle-visualization

How to get 'number' column value in Google Charts Calendar when using getSelection()?

Need help getting number also in console.log(). I tried myself but only able to get date and row. I searched on internet not able to find a solution. I've pasted the code in the post so its easily understood. for getting number I thought it to be similar as getting date like : "console.log(item.number);" But outputs is blank.

enter image description here

google.charts.load("current", {
  packages: ["calendar"]
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn({
    type: 'date',
    id: 'Date'
  });
  dataTable.addColumn({
    type: 'number',
    id: 'plan'
  });
  dataTable.addRows([
    [new Date(2023, 00, 01), 0],
    [new Date(2023, 00, 02), 1],
    [new Date(2023, 00, 03), 12],
    [new Date(2023, 00, 04), 1],
    [new Date(2023, 00, 05), 1],
    [new Date(2023, 00, 06), 16],
    [new Date(2023, 00, 07), 1],
    [new Date(2023, 00, 08), 1],
    [new Date(2023, 00, 09), 1],
    [new Date(2023, 00, 10), 1],
    [new Date(2023, 00, 11), 1],
    [new Date(2023, 00, 12), 1],
    [new Date(2023, 00, 13), 1],
    [new Date(2023, 00, 14), 1],
    [new Date(2023, 00, 15), 1],
    [new Date(2023, 00, 16), 1],
    [new Date(2023, 00, 17), 1],
    [new Date(2023, 00, 18), 1],
    [new Date(2023, 00, 19), 1],
    [new Date(2023, 00, 20), 1],
    [new Date(2023, 00, 21), 1],
    [new Date(2023, 00, 22), 1],
    [new Date(2023, 00, 23), 1],
    [new Date(2023, 00, 24), 1],
    [new Date(2023, 00, 25), 1],
    [new Date(2023, 00, 26), 1],
  ]);
  var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));

  function selectHandler() {
    var selection = chart.getSelection();
    var message = '';
    for (var i = 0; i < selection.length; i++) {
      var item = selection[i];

      if (item.row != null || item.column != null || item.row == null || item.column == null) {
        function formatDate(date) {
          var d = new Date(item.date),
            month = '' + (d.getMonth() + 1),
            day = '' + d.getDate(),
            year = d.getFullYear();
          hours = d.getHours();
          minutes = d.getMinutes();
          seconds = d.getSeconds();
          if (month.length < 2) month = '0' + month;
          if (day.length < 2) day = '0' + day;

          return [year, month, day].join('-');
        }
        console.log(formatDate(item.date));
      }
    }
  };


  var options = {
    //title: "Machine planning Calender",
    height: 350,
    calendar: {
      dayOfWeekLabel: {
        fontName: 'arial',
        fontSize: 12,
        color: 'black',
        bold: true,
        italic: false,
      },
      monthLabel: {
        fontName: 'arial',
        fontSize: 12,
        color: 'black',
        bold: true,
        italic: false
      },
      monthOutlineColor: {
        stroke: 'black',
        strokeOpacity: 0.8,
        strokeWidth: 2
      },
      unusedMonthOutlineColor: {
        stroke: 'grey',
        strokeOpacity: 0.8,
        strokeWidth: 1
      },
      underMonthSpace: 10,
    },
  };
  google.visualization.events.addListener(chart, 'select', selectHandler);
  chart.draw(dataTable, options);
}
<html>

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

<body>

  <div id="calendar_basic" style="width: 1000px; height: 350px;"></div>

</body>

</html>

Solution

  • you can get the value of any column from the data table,
    using the row number provided in the selection,
    and the getValue method of the data table.

    var value = dataTable.getValue(item.row, 1);

    see following working snippet...

    google.charts.load("current", {
  packages: ["calendar"]
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn({
    type: 'date',
    id: 'Date'
  });
  dataTable.addColumn({
    type: 'number',
    id: 'plan'
  });
  dataTable.addRows([
    [new Date(2023, 00, 01), 0],
    [new Date(2023, 00, 02), 1],
    [new Date(2023, 00, 03), 12],
    [new Date(2023, 00, 04), 1],
    [new Date(2023, 00, 05), 1],
    [new Date(2023, 00, 06), 16],
    [new Date(2023, 00, 07), 1],
    [new Date(2023, 00, 08), 1],
    [new Date(2023, 00, 09), 1],
    [new Date(2023, 00, 10), 1],
    [new Date(2023, 00, 11), 1],
    [new Date(2023, 00, 12), 1],
    [new Date(2023, 00, 13), 1],
    [new Date(2023, 00, 14), 1],
    [new Date(2023, 00, 15), 1],
    [new Date(2023, 00, 16), 1],
    [new Date(2023, 00, 17), 1],
    [new Date(2023, 00, 18), 1],
    [new Date(2023, 00, 19), 1],
    [new Date(2023, 00, 20), 1],
    [new Date(2023, 00, 21), 1],
    [new Date(2023, 00, 22), 1],
    [new Date(2023, 00, 23), 1],
    [new Date(2023, 00, 24), 1],
    [new Date(2023, 00, 25), 1],
    [new Date(2023, 00, 26), 1],
  ]);
  var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));

  function selectHandler() {
    var selection = chart.getSelection();
    var message = '';
    for (var i = 0; i < selection.length; i++) {
      var item = selection[i];
 
      if (item.row != null || item.column != null || item.row == null || item.column == null) {
        function formatDate(date) {
          var d = new Date(item.date),
            month = '' + (d.getMonth() + 1),
            day = '' + d.getDate(),
            year = d.getFullYear();
          hours = d.getHours();
          minutes = d.getMinutes();
          seconds = d.getSeconds();
          if (month.length < 2) month = '0' + month;
          if (day.length < 2) day = '0' + day;

          return [year, month, day].join('-');
        }
        console.log(formatDate(item.date));
        var value = dataTable.getValue(item.row, 1);
        console.log(value);
      }
    }
  };


  var options = {
    //title: "Machine planning Calender",
    height: 350,
    calendar: {
      dayOfWeekLabel: {
        fontName: 'arial',
        fontSize: 12,
        color: 'black',
        bold: true,
        italic: false,
      },
      monthLabel: {
        fontName: 'arial',
        fontSize: 12,
        color: 'black',
        bold: true,
        italic: false
      },
      monthOutlineColor: {
        stroke: 'black',
        strokeOpacity: 0.8,
        strokeWidth: 2
      },
      unusedMonthOutlineColor: {
        stroke: 'grey',
        strokeOpacity: 0.8,
        strokeWidth: 1
      },
      underMonthSpace: 10,
    },
  };
  google.visualization.events.addListener(chart, 'select', selectHandler);
  chart.draw(dataTable, options);
}
    <html>

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

<body>

  <div id="calendar_basic" style="width: 1000px; height: 350px;"></div>

</body>

</html>