0

Estoy utilizando Chart.js con ella muestro una gráfica donde mostrare monto y transacciones de una cuenta eso incluye que debe tener su fechas y la transacciones q hicieron esa fecha, es decir esa variables vienen en array, pero no se como aplicarlas dejare abajo algo del código construido.

introducir la descripción de la imagen aquí

//intente hacer el array pero no me salio esta parte del código no funciona

this.listTrans=[];
        this.listTrans=[{
            fecha:'2018-08-01',
            amount:200000,
            count:3,
            formatted_amount=2000,00;
        },{
            fecha:'2018-08-02',
            amount:500000,
            count:8,
            formatted_amount=5000,00;
        }]

        var i;
        for(i = 0; i < listTrans.length; i++){
            list += listTrans[i]; 
            list[i].hasOwnProperty('amount'){
            var amount  mes.push(list[i].amount);
            }

//esta parte si funciona pero no como yo quiero estas variables tienen valores pero quiero que me venga en array de la parte de arriba y se muestre en la gráfica

var mes = ["01/02/18","01/03/18","01/03/18"]; //esto quiero que me venga en array 
var amount = [1000,2000,2500];// esto serian los valores que incluiria el rray
var  count = [5,6,3];// igualmente este..


var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: mes,
    datasets: [
      { 
        data: amount,
        label: "Monto",
        borderColor: "#3e95cd",
        fill: false
      },
      { 
        data: count,
        label: "Transacciones",
        borderColor: "#8e5ea2",
        fill: false
      }

    ]
  }
});
6
  • Revisa la sintaxis. Los separadores del array de arriba deben ser puntos, no comas, al final de cada elemento del arreglo no puede ir punto y coma. formatted_amount=2000,00; => formatted_amount=2000.00;
    – cardeol
    Commented el 17 ago. 2018 a las 15:14
  • sii cierto debe ser que no lo vi pero igual no funciona .. Commented el 17 ago. 2018 a las 15:23
  • tienes algun ejemplo en jsfiddle ?
    – cardeol
    Commented el 17 ago. 2018 a las 15:26
  • no aun no ..... Commented el 17 ago. 2018 a las 15:29
  • jsfiddle.net/pt6mhwuq/6 Commented el 17 ago. 2018 a las 16:01

2 respuestas 2

1

He modificado el array de objetos para que sea válido, pero entiendo que necesitas algo como esto:

var listTrans=[{
            fecha:'2018-08-01',
            amount:'200000',
            count:'3',
            //formatted_amount='2000,00'
        },{
            fecha:'2018-08-02',
            amount:'500000',
            count:'8',
            //formatted_amount='5000,00'
        }]

        var mes = []
        var amount = [];
        var  count = []; 


        listTrans.map(o=>{
          mes.push(o.fecha)
          amount.push(o.amount)
          count.push(o.count);
        })

        console.log(mes)
        console.log(amount)
        console.log(count)

Modificando el ejemplo que envías de fiddle: https://jsfiddle.net/5pek4r0x/1/

1
  • esoo mismoo! .. gracias es lo que necesito Commented el 17 ago. 2018 a las 18:36
0

Podrias asociar los ID en el eje vertical:

var mes = ["01/02/18","01/03/18","01/03/18"];
var amount = [1000,2000,2500];
var  transacciones = [5,6,3];

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'line',
  options: {
    scales: {
       xAxes: [ {}, {} ],
         yAxes: [{ 
            id: "y-monto" 
       }, { 
          id: "y-transacciones"
       }]
    }
  },
  data: {
    labels : mes,
    datasets: [
      { 
        data: amount,
        label: "Monto",
        borderColor: "#3e95cd",
        fill: false,
        yAxisID: 'y-monto'
      },
      { 
        data: transacciones,
        label: "Transacciones",
        borderColor: "#8e5ea2",
        fill: false,
        yAxisID: 'y-transacciones'
      }

    ]
  } 
});

Ejemplo aquí

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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