Jump to content

Add custom NVD3 charts to dashboard PS 1.6.0.14


rbalva01

Recommended Posts

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. 0Object
    1. color"0066FF"
    2. key"16"
    3. values"["{\"x\":\"2015-08-14\",\"y\":\"2\"}"]"
  2. 1Object
    1. color"0066FF"
    2. key"17"
    3. values"["{\"x\":\"2015-08-14\",\"y\":\"2\"}","{\"x\":\"2015-08-17\",\"y\":\"1\"}"]"
  3. 2Object
    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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...