Problema con el color en las series bubble.

TeeChart for JavaScript for the HTML5 Canvas
Post Reply
QuickTrend
Newbie
Newbie
Posts: 15
Joined: Fri Mar 15, 2013 12:00 am

Problema con el color en las series bubble.

Post by QuickTrend » Tue May 21, 2013 3:24 pm

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
Newbie
Newbie
Posts: 15
Joined: Fri Mar 15, 2013 12:00 am

color de los simbolos de la leyenda.

Post by QuickTrend » Mon Sep 09, 2013 10:29 am

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
Site Admin
Site Admin
Posts: 9514
Joined: Tue Dec 05, 2006 12:00 am
Location: Girona, Catalonia
Contact:

Re: Problema con el color en las series bubble.

Post by Yeray » Mon Sep 09, 2013 3:10 pm

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.
Best Regards,
ImageYeray Alonso
Development & Support
Steema Software
Av. Montilivi 33, 17003 Girona, Catalonia (SP)
Image Image Image Image Image Image Please read our Bug Fixing Policy

Yeray
Site Admin
Site Admin
Posts: 9514
Joined: Tue Dec 05, 2006 12:00 am
Location: Girona, Catalonia
Contact:

Re: color de los simbolos de la leyenda.

Post by Yeray » Mon Sep 09, 2013 3:11 pm

Hola,

Disculpa la falta de respuesta en el otro hilo.
Acabo de contestarte allí:
http://www.teechart.net/support/viewtop ... 068#p63068
Best Regards,
ImageYeray Alonso
Development & Support
Steema Software
Av. Montilivi 33, 17003 Girona, Catalonia (SP)
Image Image Image Image Image Image Please read our Bug Fixing Policy

QuickTrend
Newbie
Newbie
Posts: 15
Joined: Fri Mar 15, 2013 12:00 am

Re: color de los simbolos de la leyenda.

Post by QuickTrend » Mon Sep 09, 2013 6:31 pm

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.

Image


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

Gracias Yeray

Yeray
Site Admin
Site Admin
Posts: 9514
Joined: Tue Dec 05, 2006 12:00 am
Location: Girona, Catalonia
Contact:

Re: Problema con el color en las series bubble.

Post by Yeray » Thu Sep 12, 2013 3:17 pm

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
2013-09-12_1631.png (43.62 KiB) Viewed 18624 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
2013-09-12_1710.png (37.08 KiB) Viewed 18686 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
2013-09-12_1714.png (26.03 KiB) Viewed 18628 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?
Best Regards,
ImageYeray Alonso
Development & Support
Steema Software
Av. Montilivi 33, 17003 Girona, Catalonia (SP)
Image Image Image Image Image Image Please read our Bug Fixing Policy

QuickTrend
Newbie
Newbie
Posts: 15
Joined: Fri Mar 15, 2013 12:00 am

Re: Problema con el color en las series bubble.

Post by QuickTrend » Tue Mar 04, 2014 11:23 am

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
Site Admin
Site Admin
Posts: 9514
Joined: Tue Dec 05, 2006 12:00 am
Location: Girona, Catalonia
Contact:

Re: Problema con el color en las series bubble.

Post by Yeray » Wed Mar 05, 2014 10:35 am

Hola,
QuickTrend wrote: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.
QuickTrend wrote: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:
Yeray wrote: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;
    }
Image

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
2014-03-05_1134.png (45.36 KiB) Viewed 18380 times
Best Regards,
ImageYeray Alonso
Development & Support
Steema Software
Av. Montilivi 33, 17003 Girona, Catalonia (SP)
Image Image Image Image Image Image Please read our Bug Fixing Policy

QuickTrend
Newbie
Newbie
Posts: 15
Joined: Fri Mar 15, 2013 12:00 am

Re: Problema con el color en las series bubble.

Post by QuickTrend » Wed Mar 05, 2014 1:11 pm

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
Site Admin
Site Admin
Posts: 9514
Joined: Tue Dec 05, 2006 12:00 am
Location: Girona, Catalonia
Contact:

Re: Problema con el color en las series bubble.

Post by Yeray » Thu Mar 06, 2014 1:02 pm

Hola,
QuickTrend wrote: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]];
Best Regards,
ImageYeray Alonso
Development & Support
Steema Software
Av. Montilivi 33, 17003 Girona, Catalonia (SP)
Image Image Image Image Image Image Please read our Bug Fixing Policy

Post Reply