I have the following error,
apexcharts:6 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'yRatio')
at t.value (apexcharts:6:352617)
at t.value (apexcharts:6:380452)
at t.value (apexcharts:14:38768)
at t.create (apexcharts:6:4705)
at apexcharts:14:37129
at new Promise (<anonymous>)
at t.value (apexcharts:14:21643)
at graficar (EstadisticasPerdidas:463:10)
at Object.success (EstadisticasPerdidas:419:6)
at i (jquery.min.js:2:28017)
value @ apexcharts:6
value @ apexcharts:6
value @ apexcharts:14
(anonymous) @ apexcharts:6
(anonymous) @ apexcharts:14
value @ apexcharts:14
graficar @ EstadisticasPerdidas:463
success @ EstadisticasPerdidas:419
i @ jquery.min.js:2
fireWith @ jquery.min.js:2
A @ jquery.min.js:4
(anonymous) @ jquery.min.js:4
load (async)
send @ jquery.min.js:4
ajax @ jquery.min.js:4
(anonymous) @ EstadisticasPerdidas:402
dispatch @ jquery.min.js:3
q.handle @ jquery.min.js:3
I am trying to make a query and the data that it brings me is graphed, Here I place the javascript that brings me the data
$("#form-graficar").submit(function(e) {
e.preventDefault();
data = $(this).serialize();
ruta = $(this).attr("action");
$.ajax({
url: ruta,
type: "POST",
dataType: 'json',
data: data,
success: function(data) {
var dias = new Array();
var salida = new Array();
var ganancia = new Array();
var producto = new Array();
$.each(data, function(key, value) {
dias.push(value.mes);
valor = Number(value.ganancia);
ganancia.push(valor);
producto.push(value.producto);
salida.push(value.salida);
});
graficar(dias, salida, ganancia);
}
})
})
and it converts it to me in json, it is 100% working because I printed it as an html and it brought me the requested data. This is the controller that brings me the data or that defines route: url
public function gananciaMes()
{
$id = $this->input->post('id');
$idproducto = $this->input->post('producto');
$fecha = $this->input->post('fecha');
$fecha2 = $this->input->post('fecha2');
$resultados = $this->model_backend->gananciaMes($id,$idproducto,$fecha,$fecha2);
echo json_encode($resultados);
}
and this is the query that is 100% working for me
public function gananciaMes($id,$idproducto,$fecha,$fecha2)
{
$this->db->select('Date(g.fecha) AS mes, p.producto as producto, SUM(g.ganancias) AS ganacias, SUM(g.salida) AS salida');
$this->db->from('ganancia g');
$this->db->join('producto p', 'g.producto_id = p.id');
$this->db->where('g.sede_id', $id);
$this->db->where('g.producto_id', $idproducto);
$this->db->where(array('g.fecha >='=>$fecha));
$this->db->where(array('g.fecha <='=>$fecha2));
$this->db->group_by("Date(g.fecha) , p.producto ");
$this->db->order_by('Date(g.fecha)');
$resultados = $this->db->get();
if ($resultados->num_rows() > 0) {
return $resultados->result();
} else {
return false;
}
}
the error is here where I try to graph the data or bring
function graficar(dias, salida, ganancia) {
var options = {
chart: {
type: 'column',
},
series: [{
name: 'monto',
data: ganancia
}, {
name: 'monto',
data: salida
}],
stroke: {
show: true,
width: 3
},
plotOptions: {
bar: {
columnWidth: '90%',
distributed: true,
}
},
xaxis: {
labels: {
rotate: -45
},
categories: dias,
tickPlacement: 'on'
},
yaxis: {
title: {
text: 'Dias',
},
},
}
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
}
if suddenly you need the form where I save and send the data
<form id="form-graficar" action="<?= base_url() ?>Ultra/gananciaMes" method="post">
<div class="col-md-4">
<label for="form-label">Producto:</label>
<select name="producto" class="form-select form-select-lg mb-3" style="height: 28px;" aria-label="Default select example">
<option selected>seleccione un producto </option>
<?php foreach ($producto as $p) { ?>
<option value="<?= $p->id ?>"> <?= $p->producto ?></option>
<?php } ?>
</select>
</div>
<div class="form-group">
<div class="col-md-2">
<label for="form-label">Desde</label>
<input type="date" name="fecha" id="">
</div>
<div class="col-md-2">
<label for="form-label">Hasta</label>
<input type="date" name="fecha2" id="">
</div>
</div>
<div class="col-md-3">
<label for="form-label">Sede: </label>
<input type="text" name="id" id="" placeholder=" ID">
</div>
<button type="submit" class="btn btn-success">Enviar</button>
I am willing to accept any suggestion or idea
I think the error is that you put chart type
column
instead ofbar
in the options :