0

Esta duda surge porque ocupo utilizar el método map de javascript para ajustar el json y hacerlo bidimensional.

Aquí tengo el código (también en codepen.io) de cómo deseo que esté el json. Pero quiero que se declare dentro de un ajax, o no esté estático.

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
  }
});
<!-- jQuery -->
<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>

<!-- HTML -->
<div id="placeholder1" style="width:500px;height:300px;"></div>

1
  • Buenos días ¿Puedes ser un poco mas explícito? Personalmente no entiendo del todo la pregunta o cual es tu objetivo.. Si nos das algún dato más seguro que te podemos ayudar mejor. el 7 nov. 2016 a las 8:50

1 respuesta 1

0

Tampoco entiendo del todo la pregunta, ¿Qué significa, "Pero quiero que se declare dentro de un AJAX, o no esté estático."? ¿El JSON llega desde un servicio y se recibe por AJAX? y ¿Necesitás mapearlo para que funcione el gráfico?

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.