let datos = [{
"id": 20,
"nombre": "Infusiones",
"id_padre": 0,
"menu": [{
"id": 188,
"nombre": "Te",
"precio": 5,
"id_padre": 20,
"cantidad": "4",
"promedio_ta": 0,
"promedio_tp": 0
},
{
"id": 189,
"nombre": "Anis",
"precio": 5,
"id_padre": 20,
"cantidad": "5",
"promedio_ta": 0,
"promedio_tp": 0
},
{
"id": 190,
"nombre": "Manzanila",
"precio": 5,
"id_padre": 20,
"cantidad": "4",
"promedio_ta": 0,
"promedio_tp": 0
},
{
"id": 191,
"nombre": "Hierba luisa",
"precio": 5,
"id_padre": 20,
"cantidad": "3",
"promedio_ta": 0,
"promedio_tp": 0
},
{
"id": 192,
"nombre": "Cafe americano",
"precio": 8,
"id_padre": 20,
"cantidad": "1",
"promedio_ta": 0,
"promedio_tp": 0
},
{
"id": 193,
"nombre": "Cafe capuccion",
"precio": 9,
"id_padre": 20,
"cantidad": "1",
"promedio_ta": 0,
"promedio_tp": 0
}
],
"cantidad": 18,
"precio": 37,
"promedio_ta": 0,
"promedio_tp": 0
},
{
"id": 28,
"nombre": "Tiraditos",
"id_padre": 0,
"menu": [{
"id": 83,
"nombre": "Tiradito de pescado",
"precio": 36,
"id_padre": 28,
"cantidad": "12",
"promedio_ta": 0,
"promedio_tp": 0
},
{
"id": 84,
"nombre": "Tiradito de Gallese a dos tiempos",
"precio": 38,
"id_padre": 28,
"cantidad": "7",
"promedio_ta": 0.86,
"promedio_tp": 0.86
},
{
"id": 85,
"nombre": "Tiradito mixto",
"precio": 38,
"id_padre": 28,
"cantidad": "5",
"promedio_ta": 0,
"promedio_tp": 0
}
],
"cantidad": 24,
"precio": 112,
"promedio_ta": 0.86,
"promedio_tp": 0.86
},
{
"id": 54,
"nombre": "Recomendacion del Chef",
"id_padre": 0,
"menu": [{
"id": 315,
"nombre": "corvina",
"precio": 54,
"id_padre": 54,
"cantidad": "40",
"promedio_ta": 0,
"promedio_tp": 0
},
{
"id": 446,
"nombre": "Parihuela De Cabrilla",
"precio": 36,
"id_padre": 54,
"cantidad": null,
"promedio_ta": null,
"promedio_tp": null
},
{
"id": 447,
"nombre": "Sudado de Cabrilla",
"precio": 36,
"id_padre": 54,
"cantidad": null,
"promedio_ta": null,
"promedio_tp": null
},
{
"id": 448,
"nombre": "Cabrilla Frita",
"precio": 30,
"id_padre": 54,
"cantidad": null,
"promedio_ta": null,
"promedio_tp": null
},
{
"id": 449,
"nombre": "Cabrilla A Lo Macho",
"precio": 36,
"id_padre": 54,
"cantidad": null,
"promedio_ta": null,
"promedio_tp": null
}
],
"cantidad": 40,
"precio": 192,
"promedio_ta": 0,
"promedio_tp": 0
},
{
"id": 44,
"nombre": "Criollo",
"id_padre": 0,
"menu": [{
"id": 117,
"nombre": "Lomo fino saltado",
"precio": 42,
"id_padre": 44,
"cantidad": "10",
"promedio_ta": 2.7,
"promedio_tp": 2.3
},
{
"id": 118,
"nombre": "Arroz chaufa de pollo",
"precio": 26,
"id_padre": 44,
"cantidad": "21",
"promedio_ta": 0.71,
"promedio_tp": 0.48
},
{
"id": 120,
"nombre": "Tacu tacu con lomo fino saltado",
"precio": 42,
"id_padre": 44,
"cantidad": "11",
"promedio_ta": 1.64,
"promedio_tp": 1.09
},
{
"id": 121,
"nombre": "Tacu tacu con pollo a la plancha",
"precio": 30,
"id_padre": 44,
"cantidad": "5",
"promedio_ta": 3.4,
"promedio_tp": 2.2
},
{
"id": 124,
"nombre": "Pollo a la plancha con papas fritas y ensalada",
"precio": 26,
"id_padre": 44,
"cantidad": "37",
"promedio_ta": 1.65,
"promedio_tp": 1.27
},
{
"id": 125,
"nombre": "Tacu tacu con pescado a la plancha",
"precio": 36,
"id_padre": 44,
"cantidad": "8",
"promedio_ta": 1.5,
"promedio_tp": 0.13
},
{
"id": 126,
"nombre": "Parrilla marina",
"precio": 48,
"id_padre": 44,
"cantidad": "2",
"promedio_ta": 0,
"promedio_tp": 0
},
{
"id": 127,
"nombre": "Brochetas de pescado",
"precio": 48,
"id_padre": 44,
"cantidad": "2",
"promedio_ta": 0,
"promedio_tp": 0
},
{
"id": 128,
"nombre": "Milanesa de pollo y/o pescado",
"precio": 36,
"id_padre": 44,
"cantidad": "6",
"promedio_ta": 5.33,
"promedio_tp": 3.83
},
{
"id": 864,
"nombre": "milanesa de pollo personal",
"precio": 36,
"id_padre": 44,
"cantidad": null,
"promedio_ta": null,
"promedio_tp": null
},
{
"id": 865,
"nombre": "milanesa de pescado personal",
"precio": 36,
"id_padre": 44,
"cantidad": null,
"promedio_ta": null,
"promedio_tp": null
}
],
"cantidad": 102,
"precio": 406,
"promedio_ta": 16.93,
"promedio_tp": 11.3
},
{
"id": 43,
"nombre": "Parihuelas",
"id_padre": 0,
"menu": [{
"id": 114,
"nombre": "parihuela de pescado mixto",
"precio": 34,
"id_padre": 43,
"cantidad": "69",
"promedio_ta": 1.49,
"promedio_tp": 0.65
},
{
"id": 115,
"nombre": "parihuela de chita",
"precio": 56,
"id_padre": 43,
"cantidad": "13",
"promedio_ta": 0,
"promedio_tp": 0
},
{
"id": 116,
"nombre": "Parihuela de tramboyo",
"precio": 46,
"id_padre": 43,
"cantidad": "19",
"promedio_ta": 1.89,
"promedio_tp": 1.11
},
{
"id": 868,
"nombre": "parihuela tramboyo natural",
"precio": 40,
"id_padre": 43,
"cantidad": "1",
"promedio_ta": 21,
"promedio_tp": 20
}
],
"cantidad": 102,
"precio": 176,
"promedio_ta": 24.38,
"promedio_tp": 21.76
},
{
"id": 46,
"nombre": "Guarniciones",
"id_padre": 0,
"menu": [{
"id": 134,
"nombre": "Arroz blanco",
"precio": 6,
"id_padre": 46,
"cantidad": "80",
"promedio_ta": 0.61,
"promedio_tp": 0.25
},
{
"id": 135,
"nombre": "Camote",
"precio": 6,
"id_padre": 46,
"cantidad": "18",
"promedio_ta": 0.17,
"promedio_tp": 0.11
},
{
"id": 136,
"nombre": "Cancha",
"precio": 6,
"id_padre": 46,
"cantidad": "8",
"promedio_ta": 0,
"promedio_tp": 0
},
{
"id": 137,
"nombre": "Chifle",
"precio": 6,
"id_padre": 46,
"cantidad": "7",
"promedio_ta": 0.29,
"promedio_tp": 0
},
{
"id": 138,
"nombre": "Yucas fritas",
"precio": 6,
"id_padre": 46,
"cantidad": "13",
"promedio_ta": 0,
"promedio_tp": 0
},
{
"id": 139,
"nombre": "Papas fritas",
"precio": 6,
"id_padre": 46,
"cantidad": "4",
"promedio_ta": 0,
"promedio_tp": 0
},
{
"id": 862,
"nombre": "yucas sancochadas",
"precio": 6,
"id_padre": 46,
"cantidad": "1",
"promedio_ta": 5,
"promedio_tp": 4
}
],
"cantidad": 131,
"precio": 42,
"promedio_ta": 6.07,
"promedio_tp": 4.36
},
{
"id": 45,
"nombre": "Platos Kids",
"id_padre": 0,
"menu": [{
"id": 129,
"nombre": "Chicharron de pescado kids",
"precio": 20,
"id_padre": 45,
"cantidad": "56",
"promedio_ta": 0.46,
"promedio_tp": 0.29
},
{
"id": 130,
"nombre": "Cebiche de pescado kids",
"precio": 20,
"id_padre": 45,
"cantidad": "53",
"promedio_ta": 0.64,
"promedio_tp": 0.42
},
{
"id": 131,
"nombre": "Chicharron de pollo kids",
"precio": 20,
"id_padre": 45,
"cantidad": "19",
"promedio_ta": 0.37,
"promedio_tp": 0.21
},
{
"id": 132,
"nombre": "Pechuga de pollo baby",
"precio": 20,
"id_padre": 45,
"cantidad": "5",
"promedio_ta": 0,
"promedio_tp": 0
},
{
"id": 133,
"nombre": "Milanesa de pollo kids",
"precio": 20,
"id_padre": 45,
"cantidad": "7",
"promedio_ta": 0,
"promedio_tp": 0
},
{
"id": 436,
"nombre": "Milanesa de pescado kids",
"precio": 20,
"id_padre": 45,
"cantidad": "10",
"promedio_ta": 0,
"promedio_tp": 0
},
{
"id": 21,
"nombre": "Nuestra Barra",
"id_padre": 45,
"menu": [{
"id": 194,
"nombre": "Pisco sour",
"precio": 18,
"id_padre": 21,
"cantidad": "44",
"promedio_ta": 0.09,
"promedio_tp": 0
},
{
"id": 196,
"nombre": "Maracuya sour",
"precio": 18,
"id_padre": 21,
"cantidad": "21",
"promedio_ta": 2.05,
"promedio_tp": 0
},
{
"id": 197,
"nombre": "Chilcano de pisco",
"precio": 18,
"id_padre": 21,
"cantidad": "13",
"promedio_ta": 0,
"promedio_tp": 0
},
{
"id": 198,
"nombre": "Machupicchu",
"precio": 18,
"id_padre": 21,
"cantidad": "11",
"promedio_ta": 0,
"promedio_tp": 0
},
{
"id": 199,
"nombre": "Chilcano de maracuya",
"precio": 18,
"id_padre": 21,
"cantidad": "13",
"promedio_ta": 0.15,
"promedio_tp": 0
},
{
"id": 200,
"nombre": "pina colada",
"precio": 18,
"id_padre": 21,
"cantidad": "6",
"promedio_ta": 1,
"promedio_tp": 0
},
{
"id": 201,
"nombre": "Mojito",
"precio": 18,
"id_padre": 21,
"cantidad": "4",
"promedio_ta": 0,
"promedio_tp": 0
},
{
"id": 202,
"nombre": "Cuba libre",
"precio": 18,
"id_padre": 21,
"cantidad": "5",
"promedio_ta": 0,
"promedio_tp": 0
},
{
"id": 203,
"nombre": "Daiquiri de durazno",
"precio": 18,
"id_padre": 21,
"cantidad": "5",
"promedio_ta": 0,
"promedio_tp": 0
},
{
"id": 204,
"nombre": "Algarrobina",
"precio": 18,
"id_padre": 21,
"cantidad": "8",
"promedio_ta": 0,
"promedio_tp": 0
},
{
"id": 205,
"nombre": "Amor en llamas",
"precio": 18,
"id_padre": 21,
"cantidad": "4",
"promedio_ta": 0,
"promedio_tp": 0
},
{
"id": 206,
"nombre": "Esmeralda",
"precio": 18,
"id_padre": 21,
"cantidad": "4",
"promedio_ta": 0,
"promedio_tp": 0
},
{
"id": 207,
"nombre": "Bon ami",
"precio": 18,
"id_padre": 21,
"cantidad": "4",
"promedio_ta": 0,
"promedio_tp": 0
},
{
"id": 208,
"nombre": "Peru libre",
"precio": 18,
"id_padre": 21,
"cantidad": "4",
"promedio_ta": 0,
"promedio_tp": 0
},
{
"id": 209,
"nombre": "Laguna azul",
"precio": 18,
"id_padre": 21,
"cantidad": "5",
"promedio_ta": 0,
"promedio_tp": 0
},
{
"id": 210,
"nombre": "Sangria especial",
"precio": 24,
"id_padre": 21,
"cantidad": "5",
"promedio_ta": 0,
"promedio_tp": 0
},
{
"id": 211,
"nombre": "Vino ocucaje jarra",
"precio": 24,
"id_padre": 21,
"cantidad": "4",
"promedio_ta": 0,
"promedio_tp": 0
},
{
"id": 316,
"nombre": "Happy hour 2 x 1",
"precio": 18,
"id_padre": 21,
"cantidad": "8",
"promedio_ta": 0,
"promedio_tp": 0
}
],
"cantidad": 168,
"precio": 336,
"promedio_ta": 3.29,
"promedio_tp": 0
}
],
"cantidad": 150,
"precio": 120,
"promedio_ta": 1.47,
"promedio_tp": 0.92
},
{
"id": 23,
"nombre": "Pescados",
"id_padre": 0,
"menu": [{
"id": 61,
"nombre": "Pescado a la plancha",
"precio": 30,
"id_padre": 23,
"cantidad": "100",
"promedio_ta": 1.38,
"promedio_tp": 1.08
},
{
"id": 62,
"nombre": "Chita frita",
"precio": 52,
"id_padre": 23,
"cantidad": "18",
"promedio_ta": 0.94,
"promedio_tp": 0.67
},
{
"id": 63,
"nombre": "Pescado al ajo (filete)",
"precio": 32,
"id_padre": 23,
"cantidad": "20",
"promedio_ta": 0.7,
"promedio_tp": 0.6
},
{
"id": 86,
"nombre": "Pescado frito(Filete)",
"precio": 28,
"id_padre": 23,
"cantidad": "56",
"promedio_ta": 0.95,
"promedio_tp": 0.39
},
{
"id": 87,
"nombre": "Pescado a lo macho(filete)",
"precio": 36,
"id_padre": 23,
"cantidad": "11",
"promedio_ta": 0,
"promedio_tp": 0
},
{
"id": 88,
"nombre": "Chita a lo macho(500gr) o segun peso",
"precio": 56,
"id_padre": 23,
"cantidad": "6",
"promedio_ta": 0,
"promedio_tp": 0
},
{
"id": 89,
"nombre": "Chita al ajo",
"precio": 54,
"id_padre": 23,
"cantidad": "10",
"promedio_ta": 0,
"promedio_tp": 0
}
],
"cantidad": 221,
"precio": 288,
"promedio_ta": 3.97,
"promedio_tp": 2.74
}
];
var graphColors = [];
var graphOutlines = [];
var hoverColor = [];
var internalDataLength = datos.length;
i = 0;
while (i <= internalDataLength) {
var randomR = Math.floor((Math.random() * 130) + 100);
var randomG = Math.floor((Math.random() * 130) + 100);
var randomB = Math.floor((Math.random() * 130) + 100);
var graphBackground = "rgb(" +
randomR + ", " +
randomG + ", " +
randomB + ")";
graphColors.push(graphBackground);
var graphOutline = "rgb(" +
(randomR - 80) + ", " +
(randomG - 80) + ", " +
(randomB - 80) + ")";
graphOutlines.push(graphOutline);
var hoverColors = "rgb(" +
(randomR + 25) + ", " +
(randomG + 25) + ", " +
(randomB + 25) + ")";
hoverColor.push(hoverColors);
i++;
};
let array_cantidad_ventas_pie = [];
let grafica_pie = null;
let array_padre_f = [];
var grafica_cantidad_ventas_pie = function(datos) {
//console.log('datos->',datos);
if ((datos['menu']) || (datos['menu'] != 'undefined')) {
datos = datos.sort(function(a, b) {
return parseFloat(a['cantidad']) - parseFloat(b['cantidad']);
});
let labels = [];
let data = [];
let datalabels = [];
$.each(datos, function(index, value) {
labels.push(value['nombre']);
data.push(value['cantidad']);
datalabels.push(value);
});
if (grafica_pie) {
grafica_pie.destroy();
}
let chart_cv = document.getElementById("chart_cant_ventas");
grafica_pie = new Chart(chart_cv, {
type: 'pie',
data: {
labels: labels,
datasets: [{
label: "Population (millions)",
data: data,
datalabels: datalabels,
backgroundColor: graphColors,
hoverBackgroundColor: hoverColor,
borderColor: graphOutlines,
}]
},
options: {
responsive: false,
legend: false,
legendCallback: function(grafica_pie) {
var ul = document.createElement('ul');
ul.className = "pie-legend";
grafica_pie.data.labels.forEach(function(label, index) {
ul.innerHTML += "<li><span style='background-color: " + grafica_pie.data.datasets[0].backgroundColor[index] + "; border-color: " + grafica_pie.data.datasets[0].borderColor[index] + "; border-style: solid; border-width: 1px;'></span>" + label + "</li>"; // ^ ES6 Template String
});
return ul.outerHTML;
},
title: {
display: true,
text: 'Cantidad de ventas por producto',
},
events: ['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove', 'mouseup'],
onClick: function(e, dataAtClick) {
if (dataAtClick != null && dataAtClick.length > 0) {
var index = dataAtClick[0]["_index"];
var objData = this.data.datasets[0].datalabels[index];
var e = e || window.event;
var btnCode;
if ('object' === typeof e) {
btnCode = e.button;
switch (btnCode) {
case 0:
if (objData['menu']) {
grafica_cantidad_ventas_pie(objData['menu']);
}
break;
case 1:
grafica_cantidad_ventas_pie(array_padre_f);
break;
case 2:
if (objData['id_padre'] !== 0) {
buscarPadres(array_cantidad_ventas_pie, objData['id_padre'], array_cantidad_ventas_pie);
grafica_cantidad_ventas_pie(array_padre_f);
}
break;
default:
grafica_cantidad_ventas_pie(array_padre_f);
}
}
}
}
}
});
document.getElementById('js-legend').innerHTML = grafica_pie.generateLegend();
}
}
function buscarPadres(array, id, array_padre) {
$.each(array, function(key, value) {
if (value['id'] == id) {
array_padre_f = array_padre;
return false;
} else {
if (value['menu']) {
buscarPadres(value['menu'], id, value['menu']);
}
}
});
}
array_cantidad_ventas_pie = datos;
grafica_cantidad_ventas_pie(array_cantidad_ventas_pie);
$("#js-legend").on("click", 'ul > li', function(e) {
var index = $(this).index();
$(this).toggleClass("strike");
var metas = Object.keys(grafica_pie.data.datasets[0]._meta);
var curr = grafica_pie.data.datasets[0]._meta[metas[0]].data[index];
curr.hidden = !curr.hidden
grafica_pie.update();
});
.chart-legend li span {
display: inline-block;
width: 12px;
height: 12px;
margin-right: 5px;
}
.chart-legend {
height: 250px;
overflow: auto;
}
.chart-legend li {
cursor: pointer;
}
.strike {
text-decoration: line-through !important;
}
.float-left {
float: left;
}
<script src="https://cdnjs.cloudflare.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.min.js"></script>
<section class="graficas">
<div class="float-left">
<div class="float-left" style="width:70%">
<canvas id="chart_cant_ventas" width="500" height="300" oncontextmenu="event.preventDefault();"></canvas>
</div>
<div class="float-left" style="width:30%">
<div id="js-legend" class="chart-legend"></div>
</div>
</div>
</section>