Google chart does not display when added to smarty template page (.tpl)

Question

The google chart does not display in a page, the code is added to a page (.tpl) that is work with smarty. the code is as follow:

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

  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses', 'Profit'],
      ['2014', 1000, 400, 200],
      ['2015', 1170, 460, 250],
      ['2016', 660, 1120, 300],
      ['2017', 1030, 540, 350]
    ]);

    var options = {
      chart: {
        title: 'Company Performance',
        subtitle: 'Sales, Expenses, and Profit: 2014-2017',
      }
    };

    var chart = new google.charts.Bar(document.getElementById('columnchart_material'));

    chart.draw(data, google.charts.Bar.convertOptions(options));
  }
</script>{/literal}

the HTML code is as follow:

<div id="columnchart_material" style="width: 800px; height: 500px;"></div>

Thanks for your cooperation.

Please add the HTML code also. – Praym Jul 11 '20 at 15:23 — Praym, Jul 11 '20 at 15:23

score 1 · Accepted Answer · answered Jul 11 '20 at 15:41

Can you share more detail about your Smarty setup?

The Code seems to be working fine in a standalone html page.

I used this html page:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
<div id="columnchart_material" style="width: 800px; height: 500px;"></div>

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

  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses', 'Profit'],
      ['2014', 1000, 400, 200],
      ['2015', 1170, 460, 250],
      ['2016', 660, 1120, 300],
      ['2017', 1030, 540, 350]
    ]);

    var options = {
      chart: {
        title: 'Company Performance',
        subtitle: 'Sales, Expenses, and Profit: 2014-2017',
      }
    };

    var chart = new google.charts.Bar(document.getElementById('columnchart_material'));

    chart.draw(data, google.charts.Bar.convertOptions(options));
  }
</script>

</body>
</html>

I have PHP file that is linked to smarty tpl page with the following code: $smarty->display("page.tpl"); and the code that is stated in the question is inside the page (page.tpl) — Eng. Osama Abbas, Jul 11 '20 at 15:45

Google chart does not display when added to smarty template page (.tpl)

1 Answers1