What is a promise in Javascript?

Question

Nicolas Oñate

Asked: 2020-02-13 02:59:27 +0800 CST 2020-02-13 02:59:27 +0800 CST 2020-02-13 02:59:27 +0800 CST

Pie Chart Repeated grandchild elements are not displayed

772

I am making a chart with the Sunburst type Plot.ly library and I have a problem that I cannot solve, the chart has three types of elements:

Fathers
Sons
Grandchildren

There is no conflict between parents and children, but the grandchildren is something else, the children are assigned to a parent and are unique, but the grandchildren can be assigned to several parents and repeated several times per parent, so when they are displayed only one appears. time in a parent instead of the several to which it is assigned, another problem is that each grandchild can be repeated ntimes, which represents the percentage of occupation of the parent, for this I have a solution but without solving the first problem it is impossible to apply it.

I leave a fiddle with the current graph.

var obj = [{Id:null,Padre:"",Nombre:null},{Id:"246L",Padre:"",Nombre:"MEG"},{Id:"234L",Padre:"",Nombre:"KNIFE DRIVE"},{Id:"247P",Padre:"234L",Nombre:"MONTAJE GEN II"},{Id:"248P",Padre:"234L",Nombre:"PREMONTAJES GEN II"},{Id:"366P",Padre:"246L",Nombre:"MONTAJE FINAL"},{Id:"50132",Padre:"247P",Nombre:"DE21086"},{Id:"50132",Padre:"247P",Nombre:"DE21086"},{Id:"50132",Padre:"247P",Nombre:"DE21086"},{Id:"50132",Padre:"247P",Nombre:"DE21086"},{Id:"50132",Padre:"247P",Nombre:"DE21086"},{Id:"50132",Padre:"247P",Nombre:"DE21086"},{Id:"50132",Padre:"247P",Nombre:"DE21086"},{Id:"50132",Padre:"247P",Nombre:"DE21086"},{Id:"50132",Padre:"247P",Nombre:"DE21086"},{Id:"50132",Padre:"247P",Nombre:"DE21086"},{Id:"50132",Padre:"247P",Nombre:"DE21086"},{Id:"50132",Padre:"247P",Nombre:"DE21086"},{Id:"50132",Padre:"247P",Nombre:"DE21086"},{Id:"50132",Padre:"247P",Nombre:"DE21086"},{Id:"50132",Padre:"247P",Nombre:"DE21086"},{Id:"50132",Padre:"247P",Nombre:"DE21086"},{Id:"50132",Padre:"247P",Nombre:"DE21086"},{Id:"50132",Padre:"247P",Nombre:"DE21086"},{Id:"50132",Padre:"247P",Nombre:"DE21086"},{Id:"50132",Padre:"247P",Nombre:"DE21086"},{Id:"50132",Padre:"247P",Nombre:"DE21086"},{Id:"82510",Padre:"247P",Nombre:"DE32087"},{Id:"82510",Padre:"247P",Nombre:"DE32087"},{Id:"82510",Padre:"247P",Nombre:"DE32087"},{Id:"82510",Padre:"247P",Nombre:"DE32087"},{Id:"82510",Padre:"247P",Nombre:"DE32087"},{Id:"82510",Padre:"247P",Nombre:"DE32087"},{Id:"82510",Padre:"247P",Nombre:"DE32087"},{Id:"82510",Padre:"247P",Nombre:"DE32087"},{Id:"82510",Padre:"247P",Nombre:"DE32087"},{Id:"82511",Padre:"247P",Nombre:"DE32198"},{Id:"82511",Padre:"247P",Nombre:"DE32198"},{Id:"82511",Padre:"247P",Nombre:"DE32198"},{Id:"82511",Padre:"247P",Nombre:"DE32198"},{Id:"82511",Padre:"247P",Nombre:"DE32198"},{Id:"50132",Padre:"248P",Nombre:"DE21086"},{Id:"50132",Padre:"248P",Nombre:"DE21086"},{Id:"50132",Padre:"248P",Nombre:"DE21086"},{Id:"50132",Padre:"248P",Nombre:"DE21086"},{Id:"50132",Padre:"248P",Nombre:"DE21086"},{Id:"50132",Padre:"248P",Nombre:"DE21086"},{Id:"50132",Padre:"248P",Nombre:"DE21086"},{Id:"50132",Padre:"248P",Nombre:"DE21086"},{Id:"50132",Padre:"248P",Nombre:"DE21086"},{Id:"50132",Padre:"248P",Nombre:"DE21086"},{Id:"50132",Padre:"248P",Nombre:"DE21086"},{Id:"50132",Padre:"248P",Nombre:"DE21086"},{Id:"50132",Padre:"248P",Nombre:"DE21086"},{Id:"50132",Padre:"248P",Nombre:"DE21086"},{Id:"50132",Padre:"248P",Nombre:"DE21086"},{Id:"50132",Padre:"248P",Nombre:"DE21086"},{Id:"50132",Padre:"248P",Nombre:"DE21086"},{Id:"50132",Padre:"248P",Nombre:"DE21086"},{Id:"50132",Padre:"248P",Nombre:"DE21086"},{Id:"50132",Padre:"248P",Nombre:"DE21086"},{Id:"50132",Padre:"248P",Nombre:"DE21086"},{Id:"50132",Padre:"248P",Nombre:"DE21086"},{Id:"50132",Padre:"248P",Nombre:"DE21086"},{Id:"50132",Padre:"248P",Nombre:"DE21086"},{Id:"82510",Padre:"248P",Nombre:"DE32087"},{Id:"82510",Padre:"248P",Nombre:"DE32087"},{Id:"82510",Padre:"248P",Nombre:"DE32087"},{Id:"82510",Padre:"248P",Nombre:"DE32087"},{Id:"82510",Padre:"248P",Nombre:"DE32087"},{Id:"82510",Padre:"248P",Nombre:"DE32087"},{Id:"82510",Padre:"248P",Nombre:"DE32087"},{Id:"82510",Padre:"248P",Nombre:"DE32087"},{Id:"82510",Padre:"248P",Nombre:"DE32087"},{Id:"82511",Padre:"248P",Nombre:"DE32198"},{Id:"82511",Padre:"248P",Nombre:"DE32198"},{Id:"82511",Padre:"248P",Nombre:"DE32198"},{Id:"83552",Padre:"366P",Nombre:"DE32235"},{Id:"83553",Padre:"366P",Nombre:"DE32333"},{Id:"83553",Padre:"366P",Nombre:"DE32333"},{Id:"83553",Padre:"366P",Nombre:"DE32333"},{Id:"83553",Padre:"366P",Nombre:"DE32333"},{Id:"83553",Padre:"366P",Nombre:"DE32333"},{Id:"83553",Padre:"366P",Nombre:"DE32333"},{Id:"83553",Padre:"366P",Nombre:"DE32333"},{Id:"83553",Padre:"366P",Nombre:"DE32333"},{Id:"83553",Padre:"366P",Nombre:"DE32333"}];

//VARIABLES
var ids = [];
var nombres = [];
var padres = [];
var colores = [];
var nLineas = 0;

//FUNCIONES
function rgba2hex(orig) {
  var a, isPercent,
      rgb = orig.replace(/\s/g, '').match(/^rgba?\((\d+),(\d+),(\d+),?([^,\s)]+)?/i),
      alpha = (rgb && rgb[4] || "").trim(),
      hex = rgb ?
      (rgb[1] | 1 << 8).toString(16).slice(1) +
      (rgb[2] | 1 << 8).toString(16).slice(1) +
      (rgb[3] | 1 << 8).toString(16).slice(1) : orig;

  if (alpha !== "") {
    a = alpha;
  } else {
    a = 01;
  }
  // multiply before convert to HEX
  a = ((a * 255) | 1 << 8).toString(16).slice(1)
  hex = hex + a;

  return hex;
}

function random_rgba() {
  var o = Math.round, r = Math.random, s = 255;
  return 'rgba(' + o(r() * s) + ',' + o(r() * s) + ',' + o(r() * s) + ',' + 0.7 + ')';
}

function SplitDatos(datos) {
  
  $.each(datos, function (index, value) {
    ids.push(value.Id);
    padres.push(value.Padre);
    nombres.push(value.Nombre);				
  });

}

$(document).ready(function(){

  SplitDatos(obj);

  var data = [{
    type: "sunburst",
    ids: ids,
    labels: nombres,
    parents: padres,
    outsidetextfont: { size: 20, color: "#377eb8" },
    textposition: 'inside',
    insidetextorientation: 'tangential',
    // leaf: {opacity: 0.4},
    marker: { line: { width: 2 } },
  }];

  for (var i = 0; i < nLineas; i++) {
    var colorRGB = random_rgba();
    colores.push(rgba2hex(colorRGB));
  }

  var layout = {
    margin: { l: 0, r: 0, b: 0, t: 0 },
    sunburstcolorway: colores,
  };

  //console.log("Pinto el circulo");
  Plotly.newPlot('Pie', data, layout);    

});

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='Pie'><!-- Plotly chart will be drawn inside this DIV --></div>

1 Answers

Voted

Pablo Lozano · Answer 1 · 2020-02-13T03:24:29+08:00

It fails you because you have repeating elements and instead of completely ignoring them, it uses them to calculate the width: if you have an element 10 times, it will appear once but with 1/10 the width it should:

var obj = [
  {Id:null,Padre:"",Nombre:null},{Id:"246L",Padre:"",Nombre:"MEG"},
  {Id:"234L",Padre:"",Nombre:"KNIFE DRIVE"},{Id:"247P",Padre:"234L",Nombre:"MONTAJE GEN II"},
  {Id:"248P",Padre:"234L",Nombre:"PREMONTAJES GEN II"},
  {Id:"366P",Padre:"246L",Nombre:"MONTAJE FINAL"},
  {Id:"50132",Padre:"247P",Nombre:"DE21086"},
  {Id:"82510",Padre:"247P",Nombre:"DE32087"},
  {Id:"82511",Padre:"247P",Nombre:"DE32198"},
  {Id:"50132",Padre:"248P",Nombre:"DE21086"},
  {Id:"83552",Padre:"366P",Nombre:"DE32235"},
  {Id:"83553",Padre:"366P",Nombre:"DE32333"}];

//VARIABLES
var ids = [];
var nombres = [];
var padres = [];
var colores = [];
var nLineas = 0;

//FUNCIONES
function rgba2hex(orig) {
  var a, isPercent,
      rgb = orig.replace(/\s/g, '').match(/^rgba?\((\d+),(\d+),(\d+),?([^,\s)]+)?/i),
      alpha = (rgb && rgb[4] || "").trim(),
      hex = rgb ?
      (rgb[1] | 1 << 8).toString(16).slice(1) +
      (rgb[2] | 1 << 8).toString(16).slice(1) +
      (rgb[3] | 1 << 8).toString(16).slice(1) : orig;

  if (alpha !== "") {
    a = alpha;
  } else {
    a = 01;
  }
  // multiply before convert to HEX
  a = ((a * 255) | 1 << 8).toString(16).slice(1)
  hex = hex + a;

  return hex;
}

function random_rgba() {
  var o = Math.round, r = Math.random, s = 255;
  return 'rgba(' + o(r() * s) + ',' + o(r() * s) + ',' + o(r() * s) + ',' + 0.7 + ')';
}

function SplitDatos(datos) {
  
  $.each(datos, function (index, value) {
    ids.push(value.Id);
    padres.push(value.Padre);
    nombres.push(value.Nombre);				
  });

}

$(document).ready(function(){

  SplitDatos(obj);

  var data = [{
    type: "sunburst",
    ids: ids,
    labels: nombres,
    parents: padres,
    outsidetextfont: { size: 20, color: "#377eb8" },
    textposition: 'inside',
    insidetextorientation: 'tangential',
    // leaf: {opacity: 0.4},
    marker: { line: { width: 2 } },
  }];

  for (var i = 0; i < nLineas; i++) {
    var colorRGB = random_rgba();
    colores.push(rgba2hex(colorRGB));
  }

  var layout = {
    margin: { l: 0, r: 0, b: 0, t: 0 },
    sunburstcolorway: colores,
  };

  //console.log("Pinto el circulo");
  Plotly.newPlot('Pie', data, layout);    

});

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='Pie'><!-- Plotly chart will be drawn inside this DIV --></div>

One solution is to group the repeats and add the number of repeats as a value in the chart:

var obj = [
{Id:null,Padre:"",Nombre:null},
{Id:"246L",Padre:"",Nombre:"MEG"},
{Id:"234L",Padre:"",Nombre:"KNIFE DRIVE"},
{Id:"247P",Padre:"234L",Nombre:"MONTAJE GEN II"},
{Id:"248P",Padre:"234L",Nombre:"PREMONTAJES GEN II"},
{Id:"366P",Padre:"246L",Nombre:"MONTAJE FINAL"},
{Id:"50132",Padre:"247P",Nombre:"DE21086"},
{Id:"50132",Padre:"247P",Nombre:"DE21086"},
{Id:"50132",Padre:"247P",Nombre:"DE21086"},
{Id:"50132",Padre:"247P",Nombre:"DE21086"},
{Id:"50132",Padre:"247P",Nombre:"DE21086"},
{Id:"50132",Padre:"247P",Nombre:"DE21086"},
{Id:"50132",Padre:"247P",Nombre:"DE21086"},
{Id:"50132",Padre:"247P",Nombre:"DE21086"},
{Id:"50132",Padre:"247P",Nombre:"DE21086"},
{Id:"50132",Padre:"247P",Nombre:"DE21086"},
{Id:"50132",Padre:"247P",Nombre:"DE21086"},
{Id:"50132",Padre:"247P",Nombre:"DE21086"},
{Id:"50132",Padre:"247P",Nombre:"DE21086"},
{Id:"50132",Padre:"247P",Nombre:"DE21086"},
{Id:"50132",Padre:"247P",Nombre:"DE21086"},
{Id:"50132",Padre:"247P",Nombre:"DE21086"},
{Id:"50132",Padre:"247P",Nombre:"DE21086"},
{Id:"50132",Padre:"247P",Nombre:"DE21086"},
{Id:"50132",Padre:"247P",Nombre:"DE21086"},
{Id:"50132",Padre:"247P",Nombre:"DE21086"},
{Id:"50132",Padre:"247P",Nombre:"DE21086"},
{Id:"82510",Padre:"247P",Nombre:"DE32087"},
{Id:"82510",Padre:"247P",Nombre:"DE32087"},
{Id:"82510",Padre:"247P",Nombre:"DE32087"},
{Id:"82510",Padre:"247P",Nombre:"DE32087"},
{Id:"82510",Padre:"247P",Nombre:"DE32087"},
{Id:"82510",Padre:"247P",Nombre:"DE32087"},
{Id:"82510",Padre:"247P",Nombre:"DE32087"},
{Id:"82510",Padre:"247P",Nombre:"DE32087"},
{Id:"82510",Padre:"247P",Nombre:"DE32087"},
{Id:"82511",Padre:"247P",Nombre:"DE32198"},
{Id:"82511",Padre:"247P",Nombre:"DE32198"},
{Id:"82511",Padre:"247P",Nombre:"DE32198"},
{Id:"82511",Padre:"247P",Nombre:"DE32198"},
{Id:"82511",Padre:"247P",Nombre:"DE32198"},
{Id:"50132",Padre:"248P",Nombre:"DE21086"},
{Id:"50132",Padre:"248P",Nombre:"DE21086"},
{Id:"50132",Padre:"248P",Nombre:"DE21086"},
{Id:"50132",Padre:"248P",Nombre:"DE21086"},
{Id:"50132",Padre:"248P",Nombre:"DE21086"},
{Id:"50132",Padre:"248P",Nombre:"DE21086"},
{Id:"50132",Padre:"248P",Nombre:"DE21086"},
{Id:"50132",Padre:"248P",Nombre:"DE21086"},
{Id:"50132",Padre:"248P",Nombre:"DE21086"},
{Id:"50132",Padre:"248P",Nombre:"DE21086"},
{Id:"50132",Padre:"248P",Nombre:"DE21086"},
{Id:"50132",Padre:"248P",Nombre:"DE21086"},
{Id:"50132",Padre:"248P",Nombre:"DE21086"},
{Id:"50132",Padre:"248P",Nombre:"DE21086"},
{Id:"50132",Padre:"248P",Nombre:"DE21086"},
{Id:"50132",Padre:"248P",Nombre:"DE21086"},
{Id:"50132",Padre:"248P",Nombre:"DE21086"},
{Id:"50132",Padre:"248P",Nombre:"DE21086"},
{Id:"50132",Padre:"248P",Nombre:"DE21086"},
{Id:"50132",Padre:"248P",Nombre:"DE21086"},
{Id:"50132",Padre:"248P",Nombre:"DE21086"},
{Id:"50132",Padre:"248P",Nombre:"DE21086"},
{Id:"50132",Padre:"248P",Nombre:"DE21086"},
{Id:"50132",Padre:"248P",Nombre:"DE21086"},
{Id:"82510",Padre:"248P",Nombre:"DE32087"},
{Id:"82510",Padre:"248P",Nombre:"DE32087"},
{Id:"82510",Padre:"248P",Nombre:"DE32087"},
{Id:"82510",Padre:"248P",Nombre:"DE32087"},
{Id:"82510",Padre:"248P",Nombre:"DE32087"},
{Id:"82510",Padre:"248P",Nombre:"DE32087"},
{Id:"82510",Padre:"248P",Nombre:"DE32087"},
{Id:"82510",Padre:"248P",Nombre:"DE32087"},
{Id:"82510",Padre:"248P",Nombre:"DE32087"},
{Id:"82511",Padre:"248P",Nombre:"DE32198"},
{Id:"82511",Padre:"248P",Nombre:"DE32198"},
{Id:"82511",Padre:"248P",Nombre:"DE32198"},
{Id:"83552",Padre:"366P",Nombre:"DE32235"},
{Id:"83553",Padre:"366P",Nombre:"DE32333"},
{Id:"83553",Padre:"366P",Nombre:"DE32333"},
{Id:"83553",Padre:"366P",Nombre:"DE32333"},
{Id:"83553",Padre:"366P",Nombre:"DE32333"},
{Id:"83553",Padre:"366P",Nombre:"DE32333"},
{Id:"83553",Padre:"366P",Nombre:"DE32333"},
{Id:"83553",Padre:"366P",Nombre:"DE32333"},
{Id:"83553",Padre:"366P",Nombre:"DE32333"},
{Id:"83553",Padre:"366P",Nombre:"DE32333"}];

let count = {};
obj = obj.filter(elem => {
  if (count[elem.Id] === undefined) {
    count[elem.Id]=1;
    return true;
  } else {
    count[elem.Id]++;
    return false;
  }
});

obj.forEach(elem => elem.Repetido = count[elem.Id]);

function unpack(rows, key) {
  return rows.map(function(row) { return row[key]; });
}





//VARIABLES
var colores = [];
var nLineas = 0;

//FUNCIONES
function rgba2hex(orig) {
  var a, isPercent,
      rgb = orig.replace(/\s/g, '').match(/^rgba?\((\d+),(\d+),(\d+),?([^,\s)]+)?/i),
      alpha = (rgb && rgb[4] || "").trim(),
      hex = rgb ?
      (rgb[1] | 1 << 8).toString(16).slice(1) +
      (rgb[2] | 1 << 8).toString(16).slice(1) +
      (rgb[3] | 1 << 8).toString(16).slice(1) : orig;

  if (alpha !== "") {
    a = alpha;
  } else {
    a = 01;
  }
  // multiply before convert to HEX
  a = ((a * 255) | 1 << 8).toString(16).slice(1)
  hex = hex + a;

  return hex;
}

function random_rgba() {
  var o = Math.round, r = Math.random, s = 255;
  return 'rgba(' + o(r() * s) + ',' + o(r() * s) + ',' + o(r() * s) + ',' + 0.7 + ')';
}

$(document).ready(function(){

  var data = [{
    type: "sunburst",
    ids: unpack(obj,'Id'),
    labels: unpack(obj,'Nombre'),
    parents: unpack(obj,'Padre'),
    values: unpack(obj,'Repetido'),
    outsidetextfont: { size: 20, color: "#377eb8" },
    textposition: 'inside',
    insidetextorientation: 'tangential',
    
    marker: { line: { width: 2 } }
  }];

  for (var i = 0; i < nLineas; i++) {
    var colorRGB = random_rgba();
    colores.push(rgba2hex(colorRGB));
  }

  var layout = {
    margin: { l: 0, r: 0, b: 0, t: 0 },
    sunburstcolorway: colores,
  };

  //console.log("Pinto el circulo");
  Plotly.newPlot('Pie', data, layout);    

});

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='Pie'><!-- Plotly chart will be drawn inside this DIV --></div>

Pie Chart Repeated grandchild elements are not displayed

HTML button that sends you to another page

Why do I get the error "Call to undefined function mysql_connect()"?

How to create an HTML button that works as a link?

How to separate a String in Java. How to use split()

Filter by dates in sql server

How to limit the number of decimal places in a double?

For each in JavaScript?

Position footer ALWAYS glued to the footer

Definitive Guide to Type Conversion in Java

How to properly compare Strings (and objects) in Java?