It turns out that I have a chart in which I must list about 200 data and when you get to about 40 data, the chart is disarmed, is there a way to give next page and jump to other data and display them on the same chart? or any way to list the approx 200 data that I have ?, I send a photo. Work with C # MVC, work with this graphic and just insert dynamic data to try:
attached photo of how it looks:
This is the code of the view:
<div class="card mb-3">
<div class="card-header">
<i class="fas fa-chart-area"></i>
Cantidad De Incidencias
<div class="row">
<div class="col-md-12">
<div class="panel panel-primary list-panel" id="list-panel">
<div class="panel-heading list-panel-heading">
</div>
<div class="panel-body">
<h2>Gráfico </h2>
@using (Html.BeginForm("BusquedaFilter", "FiltroController", null, FormMethod.Post))
{
<div Style="font-family: Corbel; font-size: small ;text-align:center " class="row">
<div>
<div style="width:900px;height:400px">
<canvas id="mChart1" style="padding: 0;margin: auto;display: block; "> </canvas>
</div>
</div>
</div>
<div Style="font-family: Corbel; font-size: small ;text-align:center; " class="row">
<div>
</div>
<div>
</div>
</div>
}
</div>
</div>
this is the driver code:
[HttpPost]
public JsonResult NuevoGrafico()
{
List<object> iDados = new List<object>();
//Datatable
DataTable dt = new DataTable();
dt.Columns.Add("Embozadora", System.Type.GetType("System.String"));
dt.Columns.Add("Tarjetas emitidas", System.Type.GetType("System.Int32"));
DataRow dr = dt.NewRow();
dr["Embozadora"] = "DatacardSD260";
dr["Tarjetas emitidas"] = 105;
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["Embozadora"] = "DatacardCP60";
dr["Tarjetas emitidas"] = 78;
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["Embozadora"] = "MaquinaNBSM20";
dr["Tarjetas emitidas"] = 87;
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["Embozadora"] = "EvolisPrimacyBS";
dr["Tarjetas emitidas"] = 67;
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["Embozadora"] = "EvolisPrimacyYN";
dr["Tarjetas emitidas"] = 116;
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["Embozadora"] = "EvolisPrimacyCS";
dr["Tarjetas emitidas"] = 116;
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["Embozadora"] = "EvolisPrimacyJP";
dr["Tarjetas emitidas"] = 116;
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["Embozadora"] = "EvolisPrimacyRP";
dr["Tarjetas emitidas"] = 116;
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["Embozadora"] = "EvolisPrimacySD";
dr["Tarjetas emitidas"] = 116;
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["Embozadora"] = "EvolisPrimacyY45";
dr["Tarjetas emitidas"] = 116;
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["Embozadora"] = "EvolisPrimacyYN1";
dr["Tarjetas emitidas"] = 116;
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["Embozadora"] = "EvolisPrimacyYN2";
dr["Tarjetas emitidas"] = 116;
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["Embozadora"] = "EvolisPrimacyYN3";
dr["Tarjetas emitidas"] = 116;
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["Embozadora"] = "EvolisPrimacyYN4";
dr["Tarjetas emitidas"] = 116;
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["Embozadora"] = "EvolisPrimacyYN5";
dr["Tarjetas emitidas"] = 116;
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["Embozadora"] = "EvolisPrimacyYN6";
dr["Tarjetas emitidas"] = 116;
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["Embozadora"] = "EvolisPrimacyYN7";
dr["Tarjetas emitidas"] = 116;
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["Embozadora"] = "EvolisPrimacyYN8";
dr["Tarjetas emitidas"] = 116;
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["Embozadora"] = "EvolisPrimacyYN9";
dr["Tarjetas emitidas"] = 116;
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["Embozadora"] = "EvolisPrimacyYN0";
dr["Tarjetas emitidas"] = 116;
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["Embozadora"] = "EvolisPrimacyYN11";
dr["Tarjetas emitidas"] = 116;
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["Embozadora"] = "EvolisPrimacyYN12";
dr["Tarjetas emitidas"] = 116;
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["Embozadora"] = "EvolisPrimacyYN21";
dr["Tarjetas emitidas"] = 116;
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["Embozadora"] = "EvolisPrimacyYN22";
dr["Tarjetas emitidas"] = 116;
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["Embozadora"] = "EvolisPrimacyYN23";
dr["Tarjetas emitidas"] = 116;
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["Embozadora"] = "EvolisPrimacyYN24";
dr["Tarjetas emitidas"] = 116;
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["Embozadora"] = "EvolisPrimacyYN25";
dr["Tarjetas emitidas"] = 116;
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["Embozadora"] = "EvolisPrimacyYN26";
dr["Tarjetas emitidas"] = 116;
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["Embozadora"] = "EvolisPrimacyYN27";
dr["Tarjetas emitidas"] = 116;
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["Embozadora"] = "EvolisPrimacyYN28";
dr["Tarjetas emitidas"] = 116;
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["Embozadora"] = "EvolisPrimacyYN29";
dr["Tarjetas emitidas"] = 116;
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["Embozadora"] = "EvolisPrimacyYN30";
dr["Tarjetas emitidas"] = 116;
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["Embozadora"] = "EvolisPrimacyYN31";
dr["Tarjetas emitidas"] = 116;
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["Embozadora"] = "EvolisPrimacyYN32";
dr["Tarjetas emitidas"] = 116;
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["Embozadora"] = "EvolisPrimacyYN33";
dr["Tarjetas emitidas"] = 116;
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["Embozadora"] = "EvolisPrimacyYN34";
dr["Tarjetas emitidas"] = 116;
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["Embozadora"] = "EvolisPrimacyYN35";
dr["Tarjetas emitidas"] = 116;
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["Embozadora"] = "EvolisPrimacyYN36";
dr["Tarjetas emitidas"] = 116;
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["Embozadora"] = "EvolisPrimacyYN37";
dr["Tarjetas emitidas"] = 116;
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["Embozadora"] = "EvolisPrimacyYN38";
dr["Tarjetas emitidas"] = 116;
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["Embozadora"] = "EvolisPrimacyYN39";
dr["Tarjetas emitidas"] = 116;
dt.Rows.Add(dr);
dr = dt.NewRow();
//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);
}
this is my script:
<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: "Embozadoras",
data: aDatasets1,
fill: false,
backgroundColor: ["rgba(54, 162, 235, 0.2)", "rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(153, 102, 255, 0.2)", "rgba(201, 203, 207, 0.2)"],
borderColor: ["rgb(54, 162, 235)", "rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(75, 192, 192)", "rgb(153, 102, 255)", "rgb(201, 203, 207)"],
borderWidth: 1
}]
};
var ctx = $("#mChart1").get(0).getContext("2d");
var myNewChart = 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: 50, beginAtZero: true } }]
},
}
});
}
});
</script>
}
this is my layout:
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/bootstrap-theme.css" rel="stylesheet" />
<link href="~/Content/CTable.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title</title>
@RenderSection("head", false)
<style>
.modal-content {
width: 600px !important;
margin: 30px auto !important;
}
</style>
</head>
<body>
<div class="container body-content">
@RenderBody()
</div>
@RenderSection("scripts", required: false)
</body>
</html>
I hope you have explained me well! Greetings.