Add custom NVD3 charts to dashboard PS 1.6.0.14

[rbalva01]

Hi!

 

I have PS 1.6.0.14 installed in my PC, and I got stuck with the following.

 

I want a D3 line chart in the Back Office dashboard, so far I've developed and installed a new module for this purpose which correctly displays a table with the data I want on the chart. In addition, I have coded the JS script which configures my chart, gets data to feed it and (supposedly) render the chart. 

 

The last part is the problem, the chart just won't render. I had previous errors that I've managed to solve (like bad file referencing, syntax errors) and after that, the chart will not render and I cannot see any other errors thrown in Chrome dev tools.

 

I'll paste my code for the community to check it, hoping that you can help me with this problem:

 

dashboardproducttest.tpl

<section id="dashboardproducttest" class="panel widget loading"/>


//THIS IS WHERE THE CHART SHOULD RENDER//
<div id="dash_ventamuerta_chart1" class="chart with-transitions">
    <svg></svg>
</div>


<div id="productos_block_home" class="block">
    <div class="block_content">
		{$lista_productos}
    </div>
</div>
</section>

Getting the data in dashboardproducttest.php

public function ajaxProcessGetVentaMuerta()
    {
            $sql = "SELECT vm.id_product, 
                    DATE(vm.fecha) AS fecha,
                    COUNT(*) AS venta_muerta
                    FROM ps014_venta_muerta AS vm
                    GROUP BY vm.id_product, DATE(vm.fecha);";
            $venta_muerta = array();
            $last_product_id = '';
            if ($result = Db::getInstance()->executeS($sql)) {
                    foreach ($result as $row) {
                            if ($row['id_product'] != $last_product_id) {
                                    if ($last_product_id != '') {
                                            $venta_muerta[$last_product_id] = json_encode($venta_muerta[$last_product_id]);
                                    }
                                    $last_product_id = $row['id_product'];
                                    $venta_muerta[$last_product_id] = array();
                            }
                            array_push($venta_muerta[$row['id_product']], json_encode(array('x' => $row['fecha'], 'y' => $row['venta_muerta'])));
                    }
                    $venta_muerta[$last_product_id] = json_encode($venta_muerta[$last_product_id]);
            }
            return $venta_muerta;
    }

An instance of DashboardProductTest to return data to AJAX function

dashboardproducttest-ajaxCall.php

$vm_ajax = new DashboardProductTest();

echo json_encode($vm_ajax->ajaxProcessGetVentaMuerta());

exit;

And the JS file with the AJAX function in dashboardproducttest.js

nv.addGraph(function() {
  var chart = nv.models.lineChart()
                .margin({left: 100})  //Adjust chart margins to give the x-axis some breathing room.
                .useInteractiveGuideline(true)  //We want nice looking tooltips and a guideline!
                .transitionDuration(350)  //how fast do you want the lines to transition?
                .showLegend(true)       //Show the legend, allowing users to turn on/off line series.
                .showYAxis(true)        //Show the y-axis
                .showXAxis(true)        //Show the x-axis
  ;

  chart.xAxis     //Chart x-axis settings
      .axisLabel('Fecha')
      .tickFormat(d3.format("%Y-%m-%d"));

  chart.yAxis     //Chart y-axis settings
      .axisLabel('Número de unidades')
      .tickFormat(d3.format(',d'));
      
      var arreglo_productos = [];
      
$(document).ready(function (){
        $.ajax({
        type: "POST",
        dataType: "json",
        url: '/prestashop16014/modules/dashboardproducttest/dashboardproducttest-ajaxCall.php',
        success: function (data){
                for (product in data) {
                        arreglo_productos.push({values: data[product], key: product, color: '0066FF'})
                }
        },
        error: function (){
                console.log("");
        }
        });
});

  /* Done setting the chart up? Time to render it!*/
  //var ventaMuerta_datos = extraerVentaMuerta();   //You need data...

  d3.select('#dash_ventamuerta_chart1 svg')    //Select the <svg> element you want to render the chart in.   
      .datum(arreglo_productos)         //Populate the <svg> element with chart data...
      .call(chart);          //Finally, render the chart!

  //Update the chart when window resizes.
  nv.utils.windowResize(chart.update);
  return chart;
});

After getting the AJAX response and pushing the data into arreglo_productos array, I get this array of objects:

1. 0: Object
   1. color: "0066FF"
   2. key: "16"
   3. values: "["{\"x\":\"2015-08-14\",\"y\":\"2\"}"]"
2. 1: Object
   1. color: "0066FF"
   2. key: "17"
   3. values: "["{\"x\":\"2015-08-14\",\"y\":\"2\"}","{\"x\":\"2015-08-17\",\"y\":\"1\"}"]"
3. 2: Object
   1. color: "0066FF"
   2. key: "18"
   3. values: "["{\"x\":\"2015-08-14\",\"y\":\"1\"}","{\"x\":\"2015-08-17\",\"y\":\"1\"}"]"

The page won't display any errors but won't display the chart either, is the data I feed it incorrect? Or can any of you help telling me what could be wrong? Thank you in advance