Problema con el color en las series bubble.

[QuickTrend]

Hola.

Estoy intentando crear un grafico de burbujas con 3 parametros, como hago en el componente active x, y tengo un problema con los colores de las burbujas.

Si creo todas las burbujas en la misma serie, se dibuja cada una de su color, pero el eje X no muestra la escala de los datos utilizados, muestra la etiqueta de la primera burbuja.

Code: Select all

            s = new Tee.Bubble();
            etiquetas = [];
            valoresY = [];
            valoresX = [];
            radios = [];
            for (c = 0; c < datos.length; c++) {
                valoresX.push(datos[c].valor11);
                valoresY.push(datos[c].valor12);
                radios.push(datos[c].valor13);
                etiquetas.push(datos[c].Nombre);
            }
            s.data.labels = etiquetas;
            s.data.values = valoresY;
            s.data.x = valoresX;
            s.data.radius = radios;
            vchart.addSeries(s);

Si creo 1 burbuja por serie, se corrige el problema del eje X, pero pinta todas las burbujas del mismo color y pierde el cuadradito coloreado de la leyenda. para solucionar el problema del color, he modificado la propiedad palette de la serie añadiendo un color diferente a cada serie y modificando la propiedad colorEach a true. Pero el problema de la leyenda persiste.

Code: Select all

             colors = ['#DDCC33', // Amarillo
              '#DF8C33', // Naranja
              '#F44009', // Rojo
              '#6B8427', // Verde oscuro
              '#B7F117', // Verde lima
              '#3BF117', // Verde
              '#1AF9C1', // turquesa
              '#24846C', // turquesa oscuro
              '#2AAAEB', // azul
              '#0A33AE', // azul marino
              '#45157C', // morado oscuro
              '#B28ADF', // morado claro
              '#E696F4', // rosa
              '#CE0FF0', // rosa oscuro
              '#F00FCA', // fucsia
              '#F00F38', // rojo
              '#F78096', // rojo claro
              '#473820', // marron oscuro
              '#C07805'];  // marron claro
            s = [];
            for (c = 0; c < datos.length; c++) {
                s[c] = new Tee.Bubble();
                s[c].data.values = [datos[c].valor12];
                s[c].data.x = [datos[c].valor11];
                s[c].data.radius = [datos[c].valor13];
                s[c].title = datos[c].Nombre;
                s[c].palette.colors = [colors[c%19]];
                s[c].colorEach = true;
                vchart.addSeries(s[c]);
            }

¿Alguna idea?

Un saludo y gracias.

[QuickTrend]

Hola, anteriormente ya puse un post sobre esto en el que no obtuve ninguna respuesta. Estoy haciendo un grafico de burbujas, y no se como conseguir que cada burbuja tenga un color y que ese mismo color salga en el recuadro de la leyenda.

Seria posible ver un ejemplo de como hacerlo? he visto el ejemplo que proponeis, pero obtiene los datos de una funcion Ramdom.

Gracias

[Yeray]

Hola,

Puse en la lista de mejoras para futuras versiones la posibilidad de tener etiquetas en los ejes con incrementos irregulares (TF77016620), cosa que deberia ofecerte la posibilidad de conseguir el resultado que deseas, pero parece que me olvidé de comunicartelo.
Disculpa la falta de respuesta.

[Yeray]

Hola,

Disculpa la falta de respuesta en el otro hilo.
Acabo de contestarte allí:
http://www.teechart.net/support/viewtop ... 068#p63068

[QuickTrend]

Hola, gracias por la respuesta, pero el problema principal no es ese.

Mi problema es que teniendo las burbujas cada una con diferente color, a traves de un array de un solo color en la propiedad palette de cada serie que representa una burbuja ( esto lo hace correctamente, salen las burbujas de diferentes colores, en la leyenda, el simbolo que deberia tener el color de la burbuja, desaparece, no existe y sale el nombre de la serie, con lo cual es imposible saber de quien es cada burbuja.




necesito solucionar ese problema, por que se puede poner un tool tip, pero en ipad no salen los tool tip.

Gracias Yeray

[Yeray]

Hola,

Siendo ambos hilos relativos al mismo tema, los he unido.

Diria que habia reproducido el problema (y por eso lo puse en el tracker) pero ahora lo veo bien.
Modificando el primer código que pusiste al principio del hilo para que haya datos aleatorios, a mi me queda así:

Code: Select all

var Chart1;

function draw() {	
  Chart1 = new Tee.Chart( "canvas1");	

  s = new Tee.Bubble();
  etiquetas = [];
  valoresY = [];
  valoresX = [];
  radios = [];
  for (c = 0; c < 10; c++) {
    valoresX.push(trunc(Math.random()*100));
    valoresY.push(trunc(Math.random()*100));
    radios.push(trunc(Math.random()*10));
    etiquetas.push("bub " + (c+1));
  }
  s.data.labels = etiquetas;
  s.data.values = valoresY;
  s.data.x = valoresX;
  s.data.radius = radios;
  Chart1.addSeries(s);
  
  Chart1.draw();
}

function trunc(value) {
  return value | 0;
}

2013-09-12_1631.png (43.62 KiB) Viewed 22171 times

Quizá no son valores redondos pero hay valores en el eje X. Y hay símbolos en la leyenda y las burbujas estan bien,...
Quizá los valores aleatorios que he puesto no són los adecuados para reproducir el problema? Puedes sugerir valores que reproduzcan el problema?

Tomando el segundo código del primer post del hilo como referencia, y con datos aleatorios similares a los de arriba, obtengo ésto:

Code: Select all

var Chart1;

function draw() {	
  Chart1 = new Tee.Chart( "canvas1");	
  
  var colors = ['#DDCC33', // Amarillo
  '#DF8C33', // Naranja
  '#F44009', // Rojo
  '#6B8427', // Verde oscuro
  '#B7F117', // Verde lima
  '#3BF117', // Verde
  '#1AF9C1', // turquesa
  '#24846C', // turquesa oscuro
  '#2AAAEB', // azul
  '#0A33AE', // azul marino
  '#45157C', // morado oscuro
  '#B28ADF', // morado claro
  '#E696F4', // rosa
  '#CE0FF0', // rosa oscuro
  '#F00FCA', // fucsia
  '#F00F38', // rojo
  '#F78096', // rojo claro
  '#473820', // marron oscuro
  '#C07805'];  // marron claro
  s = [];
  for (c = 0; c < 10; c++) {
    s[c] = new Tee.Bubble();
    s[c].data.values = [trunc(Math.random()*100)];
    s[c].data.x = [trunc(Math.random()*100)];
    s[c].data.radius = [trunc(Math.random()*10)];
    s[c].title = "bub " + (c+1);
    s[c].palette.colors = [colors[c%19]];
	
	Chart1.addSeries(s[c]);
  }
  
  Chart1.draw();
}

function trunc(value) {
  return value | 0;
}

2013-09-12_1710.png (37.08 KiB) Viewed 22233 times

Donde efectivamente la leyenda no muestra los colores representativos.

Con el primer intento parecemos estar más cerca, por eso, revisando el ticket del tracker, investigué en esa dirección, con éste resultado:

Code: Select all

Chart1=new Tee.Chart("canvas1");
s = new Tee.PointXY();
Chart1.addSeries(s);
s.data.labels = ["text1", "text2", "text3", "text4", "text5"];
s.data.values = [50, 20, 30, 10, 40];
s.data.x = [0, 1.5, 2.5, 3.5, 4];
s.marks.visible="true";
Chart1.axes.bottom.labels.labelStyle = "mark";
Chart1.draw();

2013-09-12_1714.png (26.03 KiB) Viewed 22175 times

Por eso deduje que ese debia ser el problema que estabas reproduciendo: Con una sola series (igual Point que Bubble), con valores X irregulares, y con labels en la series, no se pintan todas las labels en el eje. No es ese básicamente el problema que has observado?

[QuickTrend]

Hola Yerai.

Logre resolver el problema utilizando una unica serie en la que defino todas las burbujas, y utilizo la propiedad colorEach a true, de esa manera aparece como en el ejemplo de valores aleatorios.

Aun asi el comportamiento de añadir cada burbuja en una serie (por si quiero ocultar una burbuja por ejemplo) deberia corregirse para que aparecieran los colores en la leyenda.

un saludo y gracias

[Yeray]

Hola,

Logre resolver el problema utilizando una unica serie en la que defino todas las burbujas, y utilizo la propiedad colorEach a true, de esa manera aparece como en el ejemplo de valores aleatorios.

Perfecto, me alegro que hayas encontrado una manera de hacerlo funcionar como deseas.

Aun asi el comportamiento de añadir cada burbuja en una serie (por si quiero ocultar una burbuja por ejemplo) deberia corregirse para que aparecieran los colores en la leyenda.

Volviendo a mirar el tema, si no me equivoco el problema seria el que reproduje aquí, concretamente cuando dije:

Tomando el segundo código del primer post del hilo como referencia, y con datos aleatorios similares a los de arriba, obtengo ésto:

Code: Select all

    var Chart1;

    function draw() {   
      Chart1 = new Tee.Chart( "canvas1");   
     
      var colors = ['#DDCC33', // Amarillo
      '#DF8C33', // Naranja
      '#F44009', // Rojo
      '#6B8427', // Verde oscuro
      '#B7F117', // Verde lima
      '#3BF117', // Verde
      '#1AF9C1', // turquesa
      '#24846C', // turquesa oscuro
      '#2AAAEB', // azul
      '#0A33AE', // azul marino
      '#45157C', // morado oscuro
      '#B28ADF', // morado claro
      '#E696F4', // rosa
      '#CE0FF0', // rosa oscuro
      '#F00FCA', // fucsia
      '#F00F38', // rojo
      '#F78096', // rojo claro
      '#473820', // marron oscuro
      '#C07805'];  // marron claro
      s = [];
      for (c = 0; c < 10; c++) {
        s[c] = new Tee.Bubble();
        s[c].data.values = [trunc(Math.random()*100)];
        s[c].data.x = [trunc(Math.random()*100)];
        s[c].data.radius = [trunc(Math.random()*10)];
        s[c].title = "bub " + (c+1);
        s[c].palette.colors = [colors[c%19]];
       
       Chart1.addSeries(s[c]);
      }
     
      Chart1.draw();
    }

    function trunc(value) {
      return value | 0;
    }

Donde efectivamente la leyenda no muestra los colores representativos.

Pues bien, volviendo a probar el mismo código ahora me he dado cuenta de un error en el mismo. Intento explicarme:
En ese código estamos creando 10 series, cada una con un solo valor. Y la leyenda está mostrando un item por series, no sus valores. Fíjate que los colores los hemos añadido como un array más en la palette:

Code: Select all

        s[c].palette.colors = [colors[c%19]];

Si sólo tenemos un valor en cada series, simplemente deberíamos asignar un color a la series (format.fill) y forzar que los puntos se dibujen utilizando el color de la series, en vez de la palette (pointer.colorEach=false):

Code: Select all

  s = [];
  for (c = 0; c < 10; c++) {
    s[c] = new Tee.Bubble();
    s[c].data.values = [trunc(Math.random()*100)];
    s[c].data.x = [trunc(Math.random()*100)];
    s[c].data.radius = [trunc(Math.random()*10)];
    s[c].title = "bub " + (c+1);
    s[c].pointer.colorEach = false;
    s[c].format.fill = colors[c%19];
   
    Chart1.addSeries(s[c]);
  }

2014-03-05_1134.png (45.36 KiB) Viewed 21927 times

[QuickTrend]

perfecta esta solucion, pero, por que ocurre esto solo en burbujas?, si yo hago un grafico de puntos, añadiendo cada punto en una serie diferente ( para poder ocultarlos, etc etc), me sale cada uno de un color, por que las burbujas no?

ese es el que creo que es el bug.


Gracias por todo Yerai, espero que sean utiles mis comentarios.

[Yeray]

Hola,

perfecta esta solucion, pero, por que ocurre esto solo en burbujas?, si yo hago un grafico de puntos, añadiendo cada punto en una serie diferente ( para poder ocultarlos, etc etc), me sale cada uno de un color, por que las burbujas no?

ese es el que creo que es el bug.

Bien, se diseñó la Tee.Bubble inicializando pointer.colorEach a true, mientras que la Tee.PointXY hereda pointer.colorEach a false de Tee.CustomSeries.
De hecho, podemos ver que pasa lo mismo con multiples Tee.PointXY, si ponemos pointer.colorEach a true:

Code: Select all

  s = [];
  for (c = 0; c < 10; c++) {
    s[c] = new Tee.PointXY();
    s[c].data.values = [trunc(Math.random()*100)];
    s[c].data.x = [trunc(Math.random()*100)];
    s[c].title = "poin " + (c+1);
    s[c].pointer.colorEach = true;
   
    Chart1.addSeries(s[c]);
  }

Y lo mismo con multiples Tee.Bar, si ponemos colorEach a "yes":

Code: Select all

  s = [];
  for (c = 0; c < 10; c++) {
    s[c] = new Tee.Bar();
    s[c].data.values = [trunc(Math.random()*100)];
    s[c].title = "bar " + (c+1);
    s[c].colorEach="yes";   
    Chart1.addSeries(s[c]);
  }

El problema es que las series no estan pensadas para ser varias con un solo punto teniendo colorEach activado. Si no se les asigna una palette, todas utilizan los colores de la palette por defecto:

Code: Select all

  this.palette=new Tee.Palette([ "#4466a3", "#f39c35", "#f14c14", "#4e97a8", "#2b406b",
                "#1d7b63", "#b3080e", "#f2c05d", "#5db79e", "#707070",
                "#f3ea8d", "#b4b4b4"]);

Y al tener las series un solo valor, siempre se está cogiendo el primer color. Por eso, cuando cargabas una palette de un array de un solo color, pero diferente para cada series, estabas solucionando ese problema:

Code: Select all

	s[c].palette.colors = [colors[c%19]];