如何使谷歌日历图表移动响应？

Question

I am trying to plot top 50 days in the google calendar chart. But when it comes to smaller screens like mobile some of the months are chopped off.

I cannot reduce my cell width as well. It will impact the view on bigger screens.

Here is my html.

<div id="calendar_basic" style = "width: 100%;"></div>

Here is my Java Script.

<script type="text/javascript">
      google.charts.load("current", {packages:["calendar"]});
      google.charts.setOnLoadCallback(drawChart);
      $(window).resize(drawChart);
   function drawChart() {
       var dataTable = new google.visualization.DataTable();
       dataTable.addColumn({ type: 'date', id: 'Date' });
       dataTable.addColumn({ type: 'number', id: 'Won/Loss' });
       dataTable.addRows([
          {% for n in cal_group %}
       [new Date({{n[0].strftime('%Y,%m,%d') }}),{{n[1]}}],

          {% endfor %}

        ]);

       var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));

       var options = {
         title: "Calendar Days and Count",
         height: 500,
         calendar: {
         yearLabel: {
        fontName: 'Times-Roman',
        fontSize: 32,
        color: '#1A8763',
        bold: true,
        italic: true
      },
      monthLabel: {
        fontName: 'Times-Roman',
        fontSize: 12,
        color: '#1A8763',
        bold: true,
        italic: true
      },
      monthOutlineColor: {
        stroke: '#1A8763',
        strokeOpacity: 0.8,
        strokeWidth: 1
      },
      unusedMonthOutlineColor: {
        stroke: '#9FE582',
        strokeOpacity: 0.8,
        strokeWidth: 1
      },
      underMonthSpace: 16,
    },
    colorAxis: {
        minValue: 0,
        colors: ['#99E37C','#40921F']
    },
    cellColor: {
        stroke: '#76a7fa',
        strokeOpacity: 0.5,
        strokeWidth: 1,
      },
      **width: $('#calendar_basic').width(),**
      forceIFrame: true,
       };

       chart.draw(dataTable, options);
   }
    </script>

I tried providing inline style element width 100%. It works for all other google charts like bar, column, pie, but not this calendar chart. I guess the default cell size of 16 is the culprit. But is there any option to make it responsive.

Answer 1

I managed to cobble together some kind of a solution that makes the calendar chart usable from desktop to mobile.

My solution adjusts the chart cell size depending on the screen size. The cell size is set at a minimum of 12px after which the chart becomes hard to use - around the width of a tablet (screen size 768px). For mobiles I have implemented a scrolling div.

HTML element that scrolls when the element is less than 690px wide:

      <div style="overflow-x:scroll;overflow-y:hidden;max-width:100%;">
        <div id="chart_element" style="width:100%;min-width:690px;"></div>
      </div>

The calculation for cell size:

       var chartElement = document.getElementById('chart_element');
       var cellSize = Math.max(12,((chartElement.offsetWidth*0.9)/52));

The code above gets the div containing the chart, calculates the width and divides it by the number of weeks in the year (52) to calculate how big the cell for the day should be. The width is reduced to 90% to allow for margins. If the cell size is less than 12, then use 12.

To calculate the height of the chart is a bit tricky. Although we can use the calculated cell size to get a pretty good estimation of the height - if we fix the number of years displayed, the margins and headings can make things go a bit wonky.

       var years = 2;
       var chartHeight = (cellSize*7*years) + (4*years*cellSize);

The above code calculates the height of year year using the cell size multiplied by 7 (rows) and then multiplied by the number of years displayed. It then adds some margins/paddings for headings etc using the cell size because it's about 3 cell blocks between the years and about one cell block above.

I wanted to get the actual height of the SVG after it was rendered and then force the chart div to that height, but the ready event returns before the chart is rendered.

The last part of the solution is to re-draw the chart if the window size changes. You can do that with this code:

   window.addEventListener("resize", function() {
     drawChart();
   });

Finally, I decided to remove all settings that specify font size because I found the chart manages that better itself.

Full code:

  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
      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: 'Feedback' });
       dataTable.addRows([
         [ new Date(2022, 1, 1), 0],
         [ new Date(2021, 1, 1), 0],
        // other dates ommitted for brevity
        ]);

       var chartElement = document.getElementById('chart_element');
       var chart = new google.visualization.Calendar(chartElement);
       var years = 2;
       var cellSize = Math.max(12,((chartElement.offsetWidth*0.9) / 52));
       var chartHeight = (cellSize*7*years) + (4*years*cellSize);

       var options = {
         title: "",
         height: chartHeight,
         calendar: {
          cellSize: cellSize,
          monthLabel: {
            fontName: 'Montserrat',
            color: '#4D4D4D',
            bold: false
          },
          monthOutlineColor: {
            stroke: '#4D4D4D',
            strokeOpacity: 1,
            strokeWidth: 1
          },
          unusedMonthOutlineColor: {
            stroke: '#CCCCCC',
            strokeOpacity: 0.8,
            strokeWidth: 1
          },
          yearLabel: {
            fontName: 'Montserrat',
            color: '#CCCCCC',
            bold: false,
            italic: false
          },
          focusedCellColor: {
            stroke: '#4D4D4D',
            strokeOpacity: 1,
            strokeWidth: 1
          }
         },
        noDataPattern: {
          backgroundColor: '#FFFFFF',
          color: '#F7EAD8'
        },
        colorAxis: {colors:['#aadbd3','#52817a']}
       };

       chart.draw(dataTable, options);

       google.visualization.events.addListener(chart, 'ready', new function() {
        // this is called before the chart is rendered unfortunately
       });
   }

   window.addEventListener("resize", function() {
     // this ensures that the chart gets redrawn when the screen is resized
     drawChart();
   });
  </script>