Увы, тема не потеряла актуальности за годы, прошедшие с момента написания первой статьи; стало быть, ничего не остается, как продолжить.

Этот респонсивный виджет (живая демка в топе статьи) будет работать на любом сайте, написанном на PHP: просто скопируйте показанный далее код и разместите на своем веб-ресурсе. Оптимально, если получившаяся в итоге страничка (модуль, плагин) будут кэшированы.

18.03.2024 с сайта удалены все демки, демонстрировавшие чарты курсов валют Центробанка РФ. API CBR, с которым много лет не было никаких хлопот, практически перестал работать: то ли это бан за американский ip блога, то ли что-то еще, подробно разбираться нет ни смысла, ни желания. Гуд лаг май френдс.

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

<?php
$curDate = date("d/m/Y", mktime(0, 0, 0, date("n"), date("j") + 1, date("Y")));
$curDate2 = date(
    "d/m/Y",
    mktime(0, 0, 0, date("n"), date("j") - 30, date("Y"))
);
$currencyXML = simplexml_load_file(
    "http://www.cbr.ru/scripts/XML_dynamic.asp?date_req1=" .
        $curDate2 .
        "&date_req2=" .
        $curDate .
        "&VAL_NM_RQ=R01235"
);
$currencyXML1 = simplexml_load_file(
    "http://www.cbr.ru/scripts/XML_dynamic.asp?date_req1=" .
        $curDate2 .
        "&date_req2=" .
        $curDate .
        "&VAL_NM_RQ=R01239"
);
?>

  function drawStuff() {
    var button = document.getElementById('change-chart');
    var chartDiv = document.getElementById('chart_div');
    var data = google.visualization.arrayToDataTable([
      ['Dates', 'USD', 'EUR'],

<?php for ($i = 0; $i < sizeof($currencyXML->Record); $i++) {
    echo "['{$currencyXML->Record[$i]["Date"]}', " .
        str_replace(",", ".", $currencyXML->Record[$i]->Value) .
        " , " .
        str_replace(",", ".", $currencyXML1->Record[$i]->Value) .
        " ],";
} ?>

    ]);
    var materialOptions = {
      responsive: true,
      chart: {
        title: 'Bank of Russia',
        subtitle: 'Dynamics of the official exchange rates'
      },
      series: {
        0: {
          axis: 'distance'
        }, // Bind series 0 to an axis named 'distance'.
        1: {
          axis: 'brightness'
        } // Bind series 1 to an axis named 'brightness'.
      },
      axes: {
        y: {
          distance: {
            label: '1 US Dollar to RUB'
          }, // Left y-axis.
          brightness: {
            side: 'right',
            label: '1 EUR to RUB'
          } // Right y-axis.
        }
      }
    };
    var classicOptions = {
      responsive: true,
      series: {
        0: {
          targetAxisIndex: 0
        },
        1: {
          targetAxisIndex: 1
        }
      },
      title: 'Bank of Russia. Dynamics of the official exchange rates.',
      vAxes: {
        // Adds titles to each axis.
        0: {
          title: '1 US Dollar to RUB'
        },
        1: {
          title: '1 EUR to RUB'
        }
      }
    };

    function drawMaterialChart() {
      var materialChart = new google.charts.Bar(chartDiv);
      materialChart.draw(data, google.charts.Bar.convertOptions(materialOptions));
      button.innerText = 'Change to Classic';
      button.onclick = drawClassicChart;
    }

    function drawClassicChart() {
      var classicChart = new google.visualization.ColumnChart(chartDiv);
      classicChart.draw(data, classicOptions);
      button.innerText = 'Change to Material';
      button.onclick = drawMaterialChart;
    }
    drawMaterialChart();
  };
</script>
<button id="change-chart">Change to Classic</button>
<br>
<br>
<div id="chart_div" style="width: 100%; height: 500px;"></div>