1

estoy usando la libreria chart.js para hacer unos gráficos, montos de ventas vs meses, el asunto es que quiero cambiar las cantidades a su formato en español, es decir, la consulta me arroja 1000000 y quiero que en gráfico se muestre 1.000.000, pero al hacer el cambio con javascript no muestra nada.

            <script>

                $(document).ready(function () {
                    GetChartData();
                    });

                var GetChartData = function () {
                    $.ajax({
                        url: "data",
                        method: 'post',
                        data: {_token:"fN87fCxExAmZ5LOZDy39k8BVONqWBvZ1Vv5l604C"}, 
                        dataType: 'json',
                        success: function (data) {
                            //console.log(data);
                            var ventaanterior = [];
                            var ventaactual = [];
                            var vental = [];
                            var ventat = [];
                            var mes = [];

                            for (var i in data) {
                                ventaanterior.push(data[i].ventaanterior);
                                ventaactual.push(data[i].ventaactual);
                                vental.push(new Intl.NumberFormat('latn').format(data[i].ventaanterior));
                                ventat.push(new Intl.NumberFormat('latn').format(data[i].ventaactual));
                                mes.push(data[i].mes);
                                //console.log(new Intl.NumberFormat('latn').format(data[i].ventaanterior));
                            }

                            var chartdata = {
                                labels: mes,
                                datasets: [
                                    {
                                        label: 'Venta Actual',
                                        backgroundColor: '#4dc9f6',
                                        borderColor: '#4666f1',
                                        //yAxisID: ventat, 
                                        fill: -1,
                                        data: ventaactual
                                    },
                                    {
                                        label: 'Venta Anterior AC',
                                        backgroundColor: '#acc236',
                                        borderColor: '#266666',
                                        //yAxisID: vental,
                                        fill: 1, 
                                        data: ventaanterior
                                    }
                                ],
                                options: {

                                    scales: {
                                        yAxes: [{
                                            display: true,
                                            ticks: {
                                            beginAtZero: true,
                                            steps: 1,
                                            max: 7
                                            }
                                        }]
                                    }
                                }
                            };

                            var graphTarget = $("#graphCanvas");
                            var barGraph = new Chart(graphTarget, {
                                type: 'line',
                                data: chartdata
                            });
                        }
                    });
                };

            </script>     

Es decir, quisiera saber si puedo de alguna manera graficar los valores que me trae de la consulta, pero en el toolbar (o no se como se llama) que se muestra cada vez que posicionas el cursor en un punto del gráfico, me muestre el valor con el formato :

vental.push(new Intl.NumberFormat('latn').format(data[i].ventaanterior));
ventat.push(new Intl.NumberFormat('latn').format(data[i].ventaactual));

Para los valores encerrados en el rojo:

introducir la descripción de la imagen aquí

1 respuesta 1

1

Dejo por aquí la respuesta,

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.js"></script> 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js"></script> 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js"></script> 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script> 

<meta name="csrf-token" content="{{ csrf_token() }}">


<div id="chart-container">
    <canvas id="graphCanvas" width="430" height="380"></canvas>
</div>

<script>

$(document).ready(function () {
    GetChartData();
    });

var GetChartData = function () {
    $.ajax({
        url: "reportes/data",
        method: 'post',
        data: {_token:"{{ csrf_token() }}"}, 
        dataType: 'json',
        success: function (data) {
            //console.log(data);
            var ventaanterior = [];  //venta anterior año calendario
            var ventaantar = [];  //venta anterior año retail
            var ventaactual = [];
            var vental = [];
            var ventat = [];
            var mes = [];
            //var content = " ";
            for (var i in data) {
                ventaanterior.push(data[i].ventaanterior);
                ventaactual.push(data[i].ventaactual);
                ventaantar.push(data[i].ventaantr);
                mes.push(data[i].mes);
            }

            var chartdata = {
                labels: mes,
                datasets: [
                    {
                        label: 'Venta Actual',
                        backgroundColor: '#4dc9f6',
                        borderColor: '#4666f1',
                        //yAxisID: ventat, 
                        fill: -1,
                        data: ventaactual
                    },
                    {
                        label: 'AC',
                        backgroundColor: '#acc236',
                        borderColor: '#266666',
                        //yAxisID: vental,
                        fill: 1, 
                        data: ventaanterior
                    },
                    {
                        label: 'AR',
                        backgroundColor: '#900C3F',
                        borderColor: '#581845',
                        //yAxisID: vental,
                        fill: -1, 
                        data: ventaantar
                    }
                ],
            };

            var graphTarget = $("#graphCanvas");

            var barGraph = new Chart(graphTarget, {

                type: 'line',
                data: chartdata,
                options: {
                    responsive: true,
                    title: {
                        display: true,
                        //text: 'Tooltip Position: ' + position
                    },
                    tooltips: {
                        mode: 'index',
                        intersect: false,
                        callbacks: {
                            label: function(tooltipItem, data) {

                                var label = data.datasets[tooltipItem.datasetIndex].label || '';

                                if (label) {
                                    label += ': ';
                                }

                                locale = 'es-AR'; //español para la región 
                                var cantidad = new Intl.NumberFormat(locale, tooltipItem.yLabel);
                                var cant_div = cantidad.format(tooltipItem.yLabel/1000000);
                                label += "MM$ "+ cant_div;
                                return label;
                            }
                        }, 

                    },

                    scales: {
                        labelString: 'Ventas ($MM)', 
                        yAxes: [{
                            ticks: {
                                // Include a dollar sign in the ticks
                                callback: function(value, index, values) {
                                    //console.log("value "+value+" index "+index+" values "+values);
                                    locale = 'es-AR'; //español para la región 
                                    var cantidad = new Intl.NumberFormat(locale, value);
                                    var cant_div = cantidad.format(value/1000000);
                                    console.log(cant_div);
                                    return 'MM$' + cant_div;
                                    //return 'MM$' + value;
                                }
                            },

                        }]
                    }
                }
            });
        }
    });
};

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.