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.

Answer 1

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>

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

Question

1 answers

solution1
1 ACCPTED 2020-07-11 15:41:20

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

Question

1 answers

solution1 1 ACCPTED 2020-07-11 15:41:20

solution1
1 ACCPTED 2020-07-11 15:41:20