How can I display a google line chart inside a modal

Today I came across a strange issue circulating around the google line charts

Basic Information

To begin with, this is the javascript code I'm using to generate the chart:

<script type="text/javascript">
  google.charts.load('current', {'packages':['corechart', 'line']});
  
//gr1
google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Time', 'CO', 'Limit'],
  <?php

    $Limit = 1;

    foreach ( $co as $key=>$value ) { 
          $now = new DateTime($timer[$key]);
          $date=$now->format('d/m/y H:i');
          echo "['$date',  $value, $Limit],";
    }
  ?>
    ]);

    var options = {
      tooltip: {isHtml: true},
      chartArea: {
        height: '100%',
        width: '100%',
        top: 10,
        left: 32,
        right: 16,
        bottom: 48
      },
      //added
      height: '100%',
      width: '100%',
      //added vAxis parameter gridlines:
      vAxis: { minValue: 0 ,maxValue: 2.0, gridlines: {color: '#ccc', interval: 1, count: 4 },
      format: '#.0' },
      seriesType: "line",
      //added backgroundColor:
      backgroundColor: {
        fill: '#f8f8f8',
        stroke: '#ccc',
        strokeWidth: 1,
        strokeSize: 1
      },
      series: {
        //added 0:
        0: { color: '#2d84b4' },
        1: {
          type: "steppedArea",
          color: '#FF0000',
          visibleInLegend: false,
          areaOpacity: 0,
          enableInteractivity: false
          }
        },
      };

    var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

    chart.draw(data, options);
}

In order to call this chart and display it, all I have to do is, use a div element with id equal to the name I set the graph to. For example on my code I request the id 'curve_chart'. So when I use the div below, it works completely fine and displays it:

<div id="curve_chart" style="height: 160px" style="text-align: right; width: 720px;">
    </div>

The problem

Unfortunately I want to display this line chart, inside a div element that has the lightbox effect (more about the lightbox effect here), but when I use the div elements needed for the lightbox effect, and then use the line charts div inside of the lightbox effect's div elements, I get nothing displayed.

Code example:

<button id="myBtn">open modal</button>

<!-- The Modal -->
<div id="myModal" class="modal">
      <!-- Modal content -->
      <div class="modal-content">
          <div id="curve_chart" style="height: 160px" style="text-align: right; width: 720px;">
          </div>
      </div>
    
    </div>

P.S: I use the button element only because the lightbox effect's Javascript reads the button element clicks to load the effect(more about the lightbox effect I used here).

Picture examples

What I'm looking for is something like this:

but what I am getting looks like this:

Questions

1) Why isn't the Google line chart graph getting displayed?

2) How could I achieve what I am showing in the first picture above or better, is there anything wrong about my code?

Thanks in advance for your time, I appreciate all your efforts

How can I display a google line chart inside a modal

0 Answers