For those of you wondering how I make the interactive charts in the articles: I use Google charts API. I did not install the chart modules in the webpage yet, so each post goes and fetches the API JS seperately.

Also, I am by no means an expert, so some things are broken, and not performant.

Each post contains the graph as a JS script, like below:

<script type="text/javascript" src="https://www.google.com/jsapi">
</script><script type="text/javascript">
      google.charts.load('current', {'packages':['corechart', 'bar']});
      google.charts.setOnLoadCallback(fd_benchmark);

      function fd_benchmark() {

       var fd_timings_div = document.getElementById('fd_timings_div');

        var fd_timing_data = google.visualization.arrayToDataTable([
          ['NP', 'NPOOL=NP', 'NPOOL=NP TQR', 'NPOOL=NP/2','NPOOL=NP/2 TQR'],
          ['16', 0, 0, 217.6 ,632.9 ],
          ['8',190.9,531.0,207.9,700.3],
          ['4', 186.7,789.7,203.3,799.0 ],
        ]);

        var FD_timing_Options = {
          chart: {
            title: 'Forever Diamond Quantum Espresso GPU Timing ',
            subtitle: 'NP*OpenMP threads=64; '
          },
          series: {
            0: { axis: 'time' }, // Bind series 0 to an axis named 'time'.
            1: { axis: 'time' }, // Bind series 1 to an axis named 'time'.
            2: { axis: 'time' }, // Bind series 2 to an axis named 'time'.
            3: { axis: 'time' }, // Bind series 3 to an axis named 'time'.
          },
          axes: {
            y: {
              time: {label: 'seconds'} // Left y-axis.
            }
           
          }
        };

       var fd_memory_div = document.getElementById('fd_memory_div');

        var fd_memory_data = google.visualization.arrayToDataTable([
          ['NP', 'NPOOL=NP', 'NPOOL=NP TQR', 'NPOOL=NP/2','NPOOL=NP/2 TQR'],
          ['16', 0, 0, 21432 , 21442],
          ['8',18576,13410,10726,10718],
          ['4', 9174,6712,5370,5366],
        ]);

        var FD_memory_Options = {
          chart: {
            title: 'Forever Diamond Quantum Espresso GPU Memory usage per GPU',
            subtitle: 'NP*OpenMP threads=64'
          },
          series: {
            0: { axis: 'memory' }, // Bind series 0 to an axis named 'time'.
            1: { axis: 'memory' }, // Bind series 1 to an axis named 'time'.
            2: { axis: 'memory' }, // Bind series 2 to an axis named 'time'.
            3: { axis: 'memory' }, // Bind series 3 to an axis named 'time'.
          },
          axes: {
            y: {
              memory: {label: 'MB'} // Left y-axis.
            }
           
          }
        };

        function draw_FD_timings_chart() {
          var FD_timing_Chart = new google.charts.Bar(fd_timings_div);
          FD_timing_Chart.draw(fd_timing_data, google.charts.Bar.convertOptions(FD_timing_Options));
        }
        function draw_FD_memory_chart() {
          var FD_memory_Chart = new google.charts.Bar(fd_memory_div);
          FD_memory_Chart.draw(fd_memory_data, google.charts.Bar.convertOptions(FD_memory_Options));
        }

        draw_FD_timings_chart();
        draw_FD_memory_chart();
    };
    window.onresize=fd_benchmark;
    
</script>

Then you need to add the graphs to the post:

<div class="row" style="margin:0;">
<div class="col-md-6">
<div id="fd_timings_div" style="width: 100%; min-height: 450px;">&nbsp;</div>
</div>

<div class="col-md-6">
<div id="fd_memory_div" style="width: 100%; min-height: 450px;">&nbsp;</div>
</div>
</div>

As you can see, I am using the pure JS based responsive rescale. The references I have used are this and this.