smarty variable inside javascript

Question

I am trying to generate a PieChart using google-charts. When I am using static data it is working fine, now I want to generate the chart by using dynamic data. From my data.php file. I have generated this data: chart_data = [["executed",100],["not_run",0],["passed",98],["failed",1],["blocked",0]]

graph.tpl

<div id="container1" display:inline-block">
   <script language="JavaScript">
    function drawChart() {
       // Define the chart to be drawn
       var data = new google.visualization.DataTable({/literal}'{$chart_data}'{literal});
       data.addColumn('string', 'Status');
       data.addColumn('number', 'Percentage');
       /*

       data.addRows([
          ['Passed', 45.0],
          ['Failed', 26.8],
          ['Blocked', 12.8],
        ['Not Run', 8.5]
          ]);
       */
       // Set chart options
       var options = {'title':'Overall Test Progress',
          'width':420,
          'height':310};

       // Instantiate and draw the chart.
       var chart = new google.visualization.PieChart(document.getElementById('container1'));
       chart.draw(data, options);
    }
    google.charts.setOnLoadCallback(drawChart);
    </script>
    {/literal}
  </div>

I am not sure how to pass chart_data to the dataTable(). How to correctly pass the chart_data.

WhiteHat · Accepted Answer · 2017-09-07 12:07:49Z

in order to create a DataTable using the constructor argument,
it must be in a specific json format, as found here

but if you have a simple array, you can use static method --> arrayToDataTable

var data = google.visualization.arrayToDataTable("{$chart_data}", true);

true for the second argument says the first row is data and not column headings...

see following working snippet...

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([["executed",100],["not_run",0],["passed",98],["failed",1],["blocked",0]], true);
  var options = {
    title: 'Overall Test Progress',
    width: 420,
    height: 310
  };
  var chart = new google.visualization.PieChart(document.getElementById('container1'));
  chart.draw(data, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="container1"></div>

Hitesh Shrimali · Accepted Answer · 2017-09-07 11:55:25Z

We can do this by initialising javascript variable at the top.

<div id="container1" display:inline-block">
<script>
var chart_data = "{$chart_data}";

{literal}
function drawChart() {
   // Define the chart to be drawn
   var data = new google.visualization.DataTable(chart_data);
   data.addColumn('string', 'Status');
   data.addColumn('number', 'Percentage');
   /*

   data.addRows([
      ['Passed', 45.0],
      ['Failed', 26.8],
      ['Blocked', 12.8],
    ['Not Run', 8.5]
      ]);
   */
   // Set chart options
   var options = {'title':'Overall Test Progress',
      'width':420,
      'height':310};

   // Instantiate and draw the chart.
   var chart = new google.visualization.PieChart(document.getElementById('container1'));
   chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
{/literal}

Collectives™ on Stack Overflow

smarty variable inside javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related