0

tengo un problema de novato, resulta que tengo un grafico canvas (nunca he trabajo con graficos y js), resulta que me urge llamar datos a este grafico en particular, ya que tiene paginacion, los datos que quiero colocar en el grafico son de una clase:

   public JsonResult NuevoGrafico()
    {
        List<object> iDados = new List<object>();
        //Datatable 
        DataTable dt = new DataTable();
        dt.Columns.Add("Embosadora", System.Type.GetType("System.String"));
        dt.Columns.Add("Tarjetas emitidas", System.Type.GetType("System.Int32"));
        DataRow dr = dt.NewRow();
        dr["Embosadora"] = "DatacardSD260M1";
        dr["Tarjetas emitidas"] = 105;
        dt.Rows.Add(dr);

        Response.AddHeader("Refresh", "10");
        //coriendo y extrayendo cada datacolumn para el list<object>
        foreach (DataColumn dc in dt.Columns)
        {
            List<object> x = new List<object>();
            x = (from DataRow drr in dt.Rows select drr[dc.ColumnName]).ToList();
            iDados.Add(x);
        }
        //Datos retornados con JSON
        return Json(iDados, JsonRequestBehavior.AllowGet);
    }

Esta es mi vista:

@{
    ViewBag.Title = "charzzz";
}

<h2>charzzz</h2>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>

<style type="text/css">

    .wrapper {
        width: 1000px;
        height: 500px;
        overflow-x: scroll;
    }

    .chartWrapper {
        width: 6000px;
    }
</style>


<div class="wrapper">
    <div class="chartWrapper">
        <canvas id="myChart" height="20"></canvas>
    </div>
</div>

<script>
    var lbl =[];
    var dt = [];
    for (var i = 1; i < 100; i++) {
        lbl.push("this_is_my_lable_name_" + i);
    }
    for (var i = 1; i < 100; i++) {
        dt.push(Math.floor((Math.random() * 100 + i)));
    }
    var ctx = document.getElementById("myChart");
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: lbl,
            datasets: [{
                label: 'Embozadoras',
                data: dt,
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)',
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255,99,132,1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)',
                    'rgba(255,99,132,1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });
</script>

Ojala alguien me oriente, saludos

1 respuesta 1

0

logre hacer que me muestre la lista:

<script>
$.ajax({
    type: "POST",
    url: "/Home/NuevoGrafico",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (mems) {
        var aData = mems;
        var aLabels = aData[0];
        var aDatasets1 = aData[1];
        var dataT = {
            labels: aLabels,
            datasets: [{
                label: "Tarjetas impresas",
                data: aDatasets1,
                backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)',
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)',
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
                borderWidth: 0,
            }]
        };
        var ctx = $("#mChart1").get(0).getContext("2d");
        var mChart1 = new Chart(ctx, {
            type: 'bar',
            data: dataT,
            options: {
                responsive: true,
                title: { display: true, text: 'Cantidad de Tarjetas emitidas' },
                legend: { position: 'bottom' },
                scales: {
                    xAxes: [{ gridLines: { display: false }, display: true, scaleLabel: { display: false, labelString: '' } }],
                    yAxes: [{ gridLines: { display: false }, display: true, scaleLabel: { display: false, labelString: '' }, ticks: { stepSize: 40, beginAtZero: true } }]
                },
            }
        });
    }
});

Lo que si me sucede ahora, que las barras se ven muy grandes al momento de mostrar los datos, como puedo arreglar eso?, saludos

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.