javascript - Insert Dynamic Google Chart in Prestashop partial (product.tpl)

Question

I need to make a graph about the sale prices of a series of products on a prestashop page in a certain time, I have only been able to insert the graph statically, entering the data by hand in an array in product.tpl:

{literal}

<script type = "text / javascript">

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

  function drawChart () {

    var data = new google.visualization.DataTable ();
        data.addColumn ('date', 'Date');
        data.addColumn ('number', 'Price');
    
    
    data.addRows ([
        [new Date (5,15,2020), 10], [new Date (7,15,2020), 20],
        [new Date (9,25,2020), 30]
        ]);
    
    var options = {
        hAxis: {
          title: 'Date'
        },
        vAxis: {
          title: 'Price'
        },

      lineWidth: 2,
      pointSize: 8,
    };


    var chart = new google.visualization.LineChart (document.getElementById ('chart_div'));

    chart.draw (data, options);

  }

</script>

{/literal}

And i whould like to get a dynamic graph of any of the products getting the product_id and returning data from sql db.

Thanks for the help :)

Answer 1

Consider creating a module to do that "the Prestashop's way".

See getting started , quickest way to achieve your goal is to start from the basic module you can build with Prestashop module generator.

You can use one of the hooks that you can find in the product page to display your chart content, this way you can easily get the product's data inside your module PHP class and assign them to your chart's JS variables.