How to display multiple bars in the jquery flot library with json and ajax?

Question

How to display multiple bars in the jquery flot library with json and ajax?

Navigation

#1 by (3 votes)

2

I have a problem with the jquery flot extension, because I have to transform it into a two-dimensional array or with this format [[0,0], [0,0]], at the moment only for normal arrays, and I also know how to do this format, which in essence is the same [[0,0]], [[0,0]].

Here I will leave the code of how I did it for a normal arrangement:

Javascript

 $(function () {
        var dataTem = [];
        var dataVir = [];
        var dataDef = [];
        var dataCR = [];
        var dataReg = [];
        var tickData = [];


        $.ajax({
            type: 'GET',
            url: '../../../../API/hola',
            async: false,
            contentType: 'application/json',
            success: function (data) {

                dataTem.push([0,0]);
                dataVir.push([0,0]);
                dataDef.push([0,0]);
                dataCR.push([0,0]); //[[0, 3], [1, 19]]  [[0,12]]
                dataReg.push([0,0]);

                $.each(data, function (key, val) {
                    dataTem.push([key + 1, val.imp_PTemporal]);
                    dataVir.push([key + 1, val.imp_PVirtual]);
                    dataDef.push([key + 1, val.imp_PDefinitivos]);
                    dataCR.push([key + 1, val.imp_PCambioRegimen]);
                    dataReg.push([key + 1, val.imp_PRegularizacion]);
                    tickData.push([key + 1, val.anio + '/' + val.mes]);
                });
            }
        });

JSON

{
   "ArrayOfIXTipoOperacionImportacion":{
      "IXTipoOperacionImportacion":[
         {
            "anio":"2015",
            "mes":"NOV",
            "mesNo":"11",
            "imp_PTemporal":"4626095.64000",
            "diferenciaMesAnteriorIMPTemp":"-2966880.12000",
            "porcentajeDiferenciaIMPTemp":"-39.07401",
            "imp_PTotalTemportal":"11",
            "imp_PVirtual":"3292554.70000",
            "diferenciaMesAnteriorIMPVirt":"-698600.84000",
            "porcentajeDiferenciaIMPVirt":"-17.50372",
            "imp_PTotalVirtual":"47",
            "imp_PDefinitivos":"351483.72000",
            "diferenciaMesAnteriorIMPDef":"-44040.60000",
            "porcentajeDiferenciaIMPDef":"-11.13474",
            "imp_PTotalDefinitivos":"38",
            "imp_PRegularizacion":"0.00000",
            "diferenciaMesAnteriorIMPReg":"0.00000",
            "porcentajeDiferenciaIMPReg":"-100.00000",
            "imp_PTotalRegularizacion":"0",
            "imp_PCambioRegimen":"59518.88000",
            "diferenciaMesAnteriorIMPCamReg":"27389.00000",
            "porcentajeDiferenciaIMPCamReg":"85.24464",
            "imp_PTotalCambioRegimen":"20"
         },
         {
            "anio":"2015",
            "mes":"DIC",
            "mesNo":"12",
            "imp_PTemporal":"5090159.07000",
            "diferenciaMesAnteriorIMPTemp":"464063.43000",
            "porcentajeDiferenciaIMPTemp":"10.03143",
            "imp_PTotalTemportal":"13",
            "imp_PVirtual":"4041906.34000",
            "diferenciaMesAnteriorIMPVirt":"749351.64000",
            "porcentajeDiferenciaIMPVirt":"22.75897",
            "imp_PTotalVirtual":"42",
            "imp_PDefinitivos":"307289.87000",
            "diferenciaMesAnteriorIMPDef":"-44193.85000",
            "porcentajeDiferenciaIMPDef":"-12.57351",
            "imp_PTotalDefinitivos":"33",
            "imp_PRegularizacion":"1970.05000",
            "diferenciaMesAnteriorIMPReg":"1970.05000",
            "porcentajeDiferenciaIMPReg":"196905.00000",
            "imp_PTotalRegularizacion":"2",
            "imp_PCambioRegimen":"34533.54000",
            "diferenciaMesAnteriorIMPCamReg":"-24985.34000",
            "porcentajeDiferenciaIMPCamReg":"-41.97885",
            "imp_PTotalCambioRegimen":"9"
         },
         {
            "anio":"2016",
            "mes":"ENE",
            "mesNo":"01",
            "imp_PTemporal":"7259696.91000",
            "diferenciaMesAnteriorIMPTemp":"2169537.84000",
            "porcentajeDiferenciaIMPTemp":"42.62220",
            "imp_PTotalTemportal":"15",
            "imp_PVirtual":"3098137.88000",
            "diferenciaMesAnteriorIMPVirt":"-943768.46000",
            "porcentajeDiferenciaIMPVirt":"-23.34959",
            "imp_PTotalVirtual":"43",
            "imp_PDefinitivos":"402000.83000",
            "diferenciaMesAnteriorIMPDef":"94710.96000",
            "porcentajeDiferenciaIMPDef":"30.82137",
            "imp_PTotalDefinitivos":"48",
            "imp_PRegularizacion":"0.00000",
            "diferenciaMesAnteriorIMPReg":"-1970.05000",
            "porcentajeDiferenciaIMPReg":"-100.00000",
            "imp_PTotalRegularizacion":"0",
            "imp_PCambioRegimen":"87980.27000",
            "diferenciaMesAnteriorIMPCamReg":"53446.73000",
            "porcentajeDiferenciaIMPCamReg":"154.76760",
            "imp_PTotalCambioRegimen":"8"
         }
      ],
      "_xmlns:xsi":"http://www.w3.org/2001/XMLSchema-instance",
      "_xmlns:xsd":"http://www.w3.org/2001/XMLSchema"
   }
}

Here is a fiddle of how the multiple bars in a column work, if someone knows a different way to make it work with json, thank you.

javascript jquery json

asked by Guillermo Navarro 05.11.2016 в 05:00

source

1 answer

Exception AttributeError: "'NoneType' object has no attribute 'dump'" Get data from a selected row

score 3 · Accepted Answer

Javascript has 3 excellent tools for manipulating data structures. They are map , filter and reduce .

In this case, map is the tool that you need: It generates a new arrangement based on the original and a function that is incovated by each element and whose result is added to the resulting array. A transformation function.

Look at the code, where I put some comments on how it works.

var objeto = {
  "ArrayOfIXTipoOperacionImportacion": {
    "IXTipoOperacionImportacion": [{
      "anio": "2015",
      "mes": "NOV",
      "mesNo": "11",
      "imp_PTemporal": "4626095.64000",
      "diferenciaMesAnteriorIMPTemp": "-2966880.12000",
      "porcentajeDiferenciaIMPTemp": "-39.07401",
      "imp_PTotalTemportal": "11",
      "imp_PVirtual": "3292554.70000",
      "diferenciaMesAnteriorIMPVirt": "-698600.84000",
      "porcentajeDiferenciaIMPVirt": "-17.50372",
      "imp_PTotalVirtual": "47",
      "imp_PDefinitivos": "351483.72000",
      "diferenciaMesAnteriorIMPDef": "-44040.60000",
      "porcentajeDiferenciaIMPDef": "-11.13474",
      "imp_PTotalDefinitivos": "38",
      "imp_PRegularizacion": "0.00000",
      "diferenciaMesAnteriorIMPReg": "0.00000",
      "porcentajeDiferenciaIMPReg": "-100.00000",
      "imp_PTotalRegularizacion": "0",
      "imp_PCambioRegimen": "59518.88000",
      "diferenciaMesAnteriorIMPCamReg": "27389.00000",
      "porcentajeDiferenciaIMPCamReg": "85.24464",
      "imp_PTotalCambioRegimen": "20"
    }, {
      "anio": "2015",
      "mes": "DIC",
      "mesNo": "12",
      "imp_PTemporal": "5090159.07000",
      "diferenciaMesAnteriorIMPTemp": "464063.43000",
      "porcentajeDiferenciaIMPTemp": "10.03143",
      "imp_PTotalTemportal": "13",
      "imp_PVirtual": "4041906.34000",
      "diferenciaMesAnteriorIMPVirt": "749351.64000",
      "porcentajeDiferenciaIMPVirt": "22.75897",
      "imp_PTotalVirtual": "42",
      "imp_PDefinitivos": "307289.87000",
      "diferenciaMesAnteriorIMPDef": "-44193.85000",
      "porcentajeDiferenciaIMPDef": "-12.57351",
      "imp_PTotalDefinitivos": "33",
      "imp_PRegularizacion": "1970.05000",
      "diferenciaMesAnteriorIMPReg": "1970.05000",
      "porcentajeDiferenciaIMPReg": "196905.00000",
      "imp_PTotalRegularizacion": "2",
      "imp_PCambioRegimen": "34533.54000",
      "diferenciaMesAnteriorIMPCamReg": "-24985.34000",
      "porcentajeDiferenciaIMPCamReg": "-41.97885",
      "imp_PTotalCambioRegimen": "9"
    }, {
      "anio": "2016",
      "mes": "ENE",
      "mesNo": "01",
      "imp_PTemporal": "7259696.91000",
      "diferenciaMesAnteriorIMPTemp": "2169537.84000",
      "porcentajeDiferenciaIMPTemp": "42.62220",
      "imp_PTotalTemportal": "15",
      "imp_PVirtual": "3098137.88000",
      "diferenciaMesAnteriorIMPVirt": "-943768.46000",
      "porcentajeDiferenciaIMPVirt": "-23.34959",
      "imp_PTotalVirtual": "43",
      "imp_PDefinitivos": "402000.83000",
      "diferenciaMesAnteriorIMPDef": "94710.96000",
      "porcentajeDiferenciaIMPDef": "30.82137",
      "imp_PTotalDefinitivos": "48",
      "imp_PRegularizacion": "0.00000",
      "diferenciaMesAnteriorIMPReg": "-1970.05000",
      "porcentajeDiferenciaIMPReg": "-100.00000",
      "imp_PTotalRegularizacion": "0",
      "imp_PCambioRegimen": "87980.27000",
      "diferenciaMesAnteriorIMPCamReg": "53446.73000",
      "porcentajeDiferenciaIMPCamReg": "154.76760",
      "imp_PTotalCambioRegimen": "8"
    }],
    "_xmlns:xsi": "http://www.w3.org/2001/XMLSchema-instance",
    "_xmlns:xsd": "http://www.w3.org/2001/XMLSchema"
  }
};

//////
// obtener el arreglo a re-mapear
var arreglo = objeto["ArrayOfIXTipoOperacionImportacion"]["IXTipoOperacionImportacion"];

//////
// crer una funcion que remapea una propiedad en forma de un arreglo.
function mapear(arreglo, propiedad) {

  // Aqui usamos map, la funcion recibe cada elemento y su ordinal
  // justo los datos que necesitas
  return arreglo.map(function(elemento, indice) {

    // cada uno de estos arreglos es un elemento del arreglo resultante. 
    return [indice, elemento[propiedad]];
  });
}

/////
// luego creas el objeto de datos
var data = [{
  label: "imp_PTemporal",
  data: mapear(arreglo, "imp_PTemporal")
}, {
  label: "imp_PVirtual",
  data: mapear(arreglo, "imp_PVirtual")
}, {
  label: "imp_PDefinitivos",
  data: mapear(arreglo, "imp_PDefinitivos")
}];

// Generamos el grafico.
$.plot($("#placeholder1"), data, {
  series: {
    bars: {
      show: true,
      barWidth: 0.13,
      order: 1
    }
  },
  valueLabels: {
    show: true
  }
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>
<script src="//www.benjaminbuffet.com/public/js/jquery.flot.orderBars.js"></script>
<div id="placeholder1" style="width:500px;height:300px;"></div>