Scratter with Two Groups

[Santiago Fernandez]

Dear,

I'm not a developer. Then, a lot of effort to achieve graph a Scratter with the following code.

This One...

<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'coox');
data.addColumn('number', 'cooy');
    data.addColumn({type:'string', role:'tooltip', 'jugador': {'html': true}}); // tooltip for first series
    <?php
    $listar_grafico = mysql_query("SELECT * FROM jugadores");
    while ($row = mysql_fetch_array($listar_grafico)) {
    ?>
    data.addRow([<?=$row['coox']?>, <?=$row['cooy']?>, '<?=$row['jugador']?>']);
    <?
    }
    mysql_free_result($listar_grafico);
    ?>
    var options = {
    title: 'Mapa de Alianza',
    hAxis: {title: 'Eje X', minValue: 0, maxValue: 1020},
    vAxis: {title: 'Eje Y', minValue: 0, maxValue: 1020},
    pointSize:4,
    legend: 'none'
    };
    var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
    chart.draw(data, options);
    }
 </script>

I have some form of cross-checking with another?

Or failing and add one more and with an IF color to the two groups of the same DataTable?

Do you under stand me?

Thanks!!

[asgallant]

I'm sorry, but I don't understand your questions.  If you ask the questions in your native language, I can try to have them translated.

[Fernandez Santiago]

Mi ingles es muy malo.

Gracias por la atención, asgallant.

Quiero crear un grafico de intersecciones. Lo he logrado. Ahora la idea es dividir en 2. Con un color en base a un campo de la tabla y con otro color en base a ese mismo campo.

Ejemplo.

var data = new google.visualization.DataTable();
data.addColumn('number', 'coox');
data.addColumn('number', 'cooy');
     data.addColumn({type:'string', role:'tooltip', 'jugador': {'html': true}}); // tooltip for first series

agregar,

data.addColumn(’string’,’alianza’);

Datos de la Tabla

Si alianza = ‘alianza’ uso color Rojo y si no uso color Azul.

Dividir en 2 grupos el grafico.

Logras entender?

Muchisimas gracias!!

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/XXJkiugovDA/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.

[asgallant]

I think I understand: you want to split your data into two groups of different colors depending on the value of the "alliance" field.  Here's a quick way to do it:

<script type="text/javascript">
google.load ("visualization", "1", {packages: ["corechart"]});
google.setOnLoadCallback (drawChart);
drawChart function () {

var data = new google.visualization.DataTable();
data.addColumn('number', 'coox');

data.addColumn('number', 'COOY'); // alliance = "alliance"
data.addColumn({type: 'string' role: 'tooltip', 'player': {'html': true}}) // tooltip for first series
data.addColumn('number', 'COOY'); // alliance != "alliance"
data.addColumn({type: 'string' role: 'tooltip', 'player': {'html': true}}) // tooltip for second series
<?php
$Listar_grafico = mysql_query("SELECT * FROM players");
while ($row = mysql_fetch_array($listar_graph)) {
if ($row['alliance'] == 'alliance') {
?>
  data.addRow ([<?=$row['coox']?>, <?=$row['COOY']?>, '<?=$row['player']?>', null, null]);
<?
else {
?>
data.addRow ([<?=$row['coox']?>, null, null, <?=$row['COOY']?>, '<?=$row['player']?>']);
<?
}
}
mysql_free_result($listar_graph);
?>
var options = {
title: 'Map of Alliance',
hAxis: {title: 'X Axis', minValue: 0, maxValue: 1020},
vAxis: {title: 'Y-axis', minValue: 0, maxValue: 1020},

pointSize: 4,
legend: 'none'
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.

[Fernandez Santiago]

Asgallant,

Thanks for the reply.

If so. But that way, gender 2 datatable. Once I have these two data table, as I do to have each color? Each group?

I would like the name of the group, go to the edge of the graph.

For ejemple.

First Aliance= Name EJE - Color red

Second Aliance = Americans - Color Blue

THANKS FOR THE HELP!

PD: I don’t find the colors! jajaj

[asgallant]

If I understood that correctly, then you want to change the name in the columns (assuming "alliance" is for "Name EJE"):

data.addColumn('number', 'Name EJE'); data.addColumn('number', 'COOY'); // alliance = "alliance"

data.addColumn({type: 'string' role: 'tooltip', 'player': {'html': true}}) // tooltip for first series

data.addColumn('number', 'Americans'); // alliance != "alliance"

data.addColumn({type: 'string' role: 'tooltip', 'player': {'html': true}}) // tooltip for second series

Then in the chart options, you can set the colors with the "colors" option:

var options = {
     title: 'Map of Alliance',
     hAxis: {title: 'X Axis', minValue: 0, maxValue: 1020},
     vAxis: {title: 'Y-axis', minValue: 0, maxValue: 1020},
     pointSize: 4,

     legend: 'none',
     colors: ['#FF0000', '#0000FF']
};

[Fernandez Santiago]

Unfortunately, I fail to make myself understood.

Let's steps.

I show you the Base …

Now…this is de graph!

I want to have all points of Walter White in blue and Reino del Plata points in Red.

Walter White and Reino del Plata, are the names of alliances!

And if you want add something like this…

But, put the name of de alliances….

Do you under stand me? Can you see the image? I m going to send you to your personal mail to!

Thank you very much for your help.

It is invaluable.

-- 
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/XXJkiugovDA/unsubscribe.

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

[asgallant]

Ok, try this:

data.addColumn('number', 'COOX');
data.addColumn('number', 'Walter White');
data.addColumn({type: 'string' role: 'tooltip', 'player': {'html': true}});
data.addColumn('number', 'Reino del Plata');
data.addColumn({type: 'string' role: 'tooltip', 'player': {'html': true}});

<?php
$Listar_grafico = mysql_query("SELECT * FROM players");
while ($row = mysql_fetch_array($listar_graph)) {

     if ($row['alianza'] == 'Walter White') {
          ?>
          data.addRow ([<?=$row['coox']?>, <?=$row['cooy']?>, '<?=$row['jugador']?>', null, null]);
          <?php
      else {
          ?>
          data.addRow ([<?=$row['coox']?>, null, null, <?=$row['cooy']?>, '<?=$row['jugador']?>']);
          <?php
      }

}
mysql_free_result($listar_graph);
?>

var options = {

    title: 'Mapa de Alianza',

    hAxis: {title: 'X Axis', minValue: 0, maxValue: 1020},
    vAxis: {title: 'Y-axis', minValue: 0, maxValue: 1020},
    pointSize: 4

};

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.

[Fernandez Santiago]

Assgalant,

Thanks…

I am very kind,

But I do not arm the DataTable.

My current weapon code so the DataTable

data.addColumn('number', 'coox’); // Coordinate axis X

data.addColumn('number', 'cooy’); // Coordinate axis Y

    data.addColumn({type:'string', role:'tooltip', 'jugador': {'html': true}}); // Player Name

It should not add a column with alliance?

Something like that?

data.addColumn('number', 'coox’); // Coordinate axis X

data.addColumn('number', 'cooy’); // Coordinate axis Y

     data.addColumn({type:'string', role:'tooltip', 'jugador': {'html': true}}); // Player Name

     data.addColumn({type:'string', role:'tooltip', ‘aliance': {'html': true}}); // Aliance Name

Then, put your code

     <?php

    $listar_grafico = mysql_query("SELECT * FROM jugadores");

   

    while ($row = mysql_fetch_array($listar_grafico)) {

     if ($row['alianza'] == 'Walter White') {

?>

    data.addRow ([<?=$row['coox']?>, <?=$row['cooy']?>, '<?=$row['jugador']?>', '<?=$row[‘aliance']?>']); 

    <?

else {

?>

data.addRow ([<?=$row['coox']?>, <?=$row['cooy']?>, '<?=$row['jugador']?>’], '<?=$row[‘aliance']?>']); 

<?php

}

    }

    mysql_free_result($listar_grafico);

    ?>

    var options = {

    title: 'Mapa de Alianza',

    hAxis: {title: 'Eje X', minValue: 0, maxValue: 1020},

    vAxis: {title: 'Eje Y', minValue: 0, maxValue: 1020},

    pointSize:4,

    legend: 'none'

    };

    var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));

    chart.draw(data, options);

    }

The DataTable and construction make me dizzy. Where specific color for each group?

Many thanks for your help!

I apologize for my ignorance.

    

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

[Fernandez Santiago]

En mi pais hay un dicho, que Una imagen dice mas que mil palabras.

http://imm.io/1jMa7

Esto es lo que pretendo hacer Assgalant.

[asgallant]

I see.  Yes, you can add "Alianza" to the DataTable in order to make the table at the top of your image.  That format will not work for the chart, however, so you have to create a DataView that splits the data into different columns depending on the value of "Alianza".

data.addColumn('number', 'COOX');

data.addColumn('number', 'COOY');
data.addColumn({type: 'string' role: 'tooltip', properties: {html: true}});
data.addColumn('string', 'Alianza');

<?php

$Listar_grafico = mysql_query("SELECT * FROM players");
while ($row = mysql_fetch_array($listar_

graph)) {
?>

    data.addRow ([<?=$row['coox']?>, <?=$row['cooy']?>, '<?=$row['jugador']?>', '<?=$row['alianza']?>']);
<?php

mysql_free_result($listar_graph);
?>

var alianzas = data.getDistinctValues(3); // get a list of all "Alianza"s
var columns = [0];
for (var i = 0; i < alianzas.length; i++) {
    columns.push({
        type: 'number',
        label: alianzas[i],
        calc: (function (x) {
            return function (dt, row) {
                return (dt.getValue(row, 3) == alianzas[x]) ? dt.getValue(row, 1) : null;
            };
        })(i)
    });
    columns.push({
        type: 'number',
        role: 'tooltip',
        properties: {isHtml: true},
        calc: (function (x) {
            return function (dt, row) {
                return (dt.getValue(row, 3) == alianzas[x]) ? dt.getValue(row, 2) : null;
            };
        })(i)
    });
}
var view = new google.visualization.DataView(data);

Draw the chart using the DataView instead of the DataTable.  You can set the colors in the chart's "colors" option.  I made an example of this for you to follow: http://jsfiddle.net/asgallant/bMNYE/

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.

[Fernandez Santiago]

The truth that you're a genius.

The programming is not my thing. I am new and I realize this consisting

Do not know how to thank you ... But I have some error in the Copy Paste.

I Try this,

<!-- Google Api -->

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<script type="text/javascript">

google.load("visualization", "1", {packages:["corechart"]});

google.setOnLoadCallback(drawChart);

function drawChart() {

var data = new google.visualization.DataTable();

data.addColumn('number', 'coox');

data.addColumn('number', 'cooy');

data.addColumn('string', 'alianza');

    data.addColumn({type: 'string', role: 'tooltip', properties: {html: true}});

   

<?php

    $listar_grafico = mysql_query("SELECT * FROM jugadores");

    while ($row = mysql_fetch_array($listar_grafico)) {

    ?>

    data.addRow([<?=$row['coox']?>, <?=$row['cooy']?>, <?=$row['alianza']?>,'<?=$row['jugador']?>']);

    <?

    }

    mysql_free_result($listar_grafico);

    ?>

    var alianzas = data.getDistinctValues(3); // get a list of all "Alianza"s

    var columns = [0];

    for (var i = 0; i < alianzas.length; i++) {

        columns.push({

            type: 'number',

            label: alianzas[i],

            calc: (function (x) {

                return function (dt, row) {

                    return (dt.getValue(row, 3) == alianzas[x]) ? dt.getValue(row, 1) : null;

                };

            })(i)

        });

        columns.push({

            type: 'string',

            role: 'tooltip',

            properties: {isHtml: true},

            calc: (function (x) {

                return function (dt, row) {

                    return (dt.getValue(row, 3) == alianzas[x]) ? dt.getValue(row, 2) : null;

                };

            })(i)

        });

    }

  var options = {

        title: 'Mapa de Alianza',

        hAxis: {title: 'Eje X', minValue: 0, maxValue: 1020},

        vAxis: {title: 'Eje Y', minValue: 0, maxValue: 1020},

        pointSize: 4

    };

    var view = new google.visualization.DataView(data);

    view.setColumns(columns);

    var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));

    chart.draw(view, options);

    var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));

    chart.draw(data, options);

    }

google.load('visualization', '1', {packages:['corechart'], callback: drawChart});

    </script>

    <!-- Grafico -->

  And this!

<!-- Google Api -->

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<script type="text/javascript">

google.load("visualization", "1", {packages:["corechart"]});

google.setOnLoadCallback(drawChart);

function drawChart() {

var data = new google.visualization.DataTable();

data.addColumn('number', 'coox');

data.addColumn('number', 'cooy');

    data.addColumn({type: 'string', role: 'tooltip', properties: {html: true}});

    data.addColumn('string', 'alianza');

   

    data.addRows([

        [346, 348, 'SirSantiago', 'Walter White'],

        [453, 453, 'Terminator34', 'Reino Plata'],

        [555, 555, 'GamerSabalero', 'Walter White'],

        [432, 334, 'AlexGamer', 'Walter White'],

        [232, 232, 'elFiaco8', 'Walter White']]);

    var alianzas = data.getDistinctValues(3); // get a list of all "Alianza"s

    var columns = [0];

    for (var i = 0; i < alianzas.length; i++) {

        columns.push({

            type: 'number',

            label: alianzas[i],

            calc: (function (x) {

                return function (dt, row) {

                    return (dt.getValue(row, 3) == alianzas[x]) ? dt.getValue(row, 1) : null;

                };

            })(i)

        });

        columns.push({

            type: 'string',

            role: 'tooltip',

            properties: {isHtml: true},

            calc: (function (x) {

                return function (dt, row) {

                    return (dt.getValue(row, 3) == alianzas[x]) ? dt.getValue(row, 2) : null;

                };

            })(i)

        });

    }

  var options = {

        title: 'Mapa de Alianza',

        hAxis: {title: 'Eje X', minValue: 0, maxValue: 1020},

        vAxis: {title: 'Eje Y', minValue: 0, maxValue: 1020},

        pointSize: 4

    };

    var view = new google.visualization.DataView(data);

    view.setColumns(columns);

    var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));

    chart.draw(view, options);

    var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));

    chart.draw(data, options);

    }

google.load('visualization', '1', {packages:['corechart'], callback: drawChart});

    </script>

    <!-- Grafico —>

Look...

http://imm.io/1jMTR

I'll have to pay you! Jajaj! or send an Argentine Wine!

Thanks a lot!

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

[asgallant]

In this part:

var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(view, options);
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, options);

remove the second "var chart" and "chart.draw" lines (you just want one chart and the "chart.draw(view, options);" line).

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsubs...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.

-- 
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/XXJkiugovDA/unsubscribe.

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.

[Fernandez Santiago]

ASGALLANT!!!!

I CAN!

Thanks!!!!!!!

Espero aprender mas para poder sacar distancias y agrupar….pero la lógica es confusa

MIL GRACIAS HERMANO!

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

[Fernandez Santiago]

AGallant Como estas?

Tengo una pregunta que hacerte. Necesito espejear un eje.

Mas alla que agrego bien los ejes no lo veo como en el juego. Tiene otra óptica. Necesito espejear, invertir, el eje Y.

Agrego imágenes para que comprendas…

http://imm.io/1kbyk

http://imm.io/1kbyU

WarriorEdu esta arriba de SirSantiago cuando debería estar abajo.

http://imm.io/1kbz0

http://imm.io/1kbzb

El usuario Sanagus, esta arriba de Uri1-1 cuando debería estar abajo.

http://imm.io/1kbzn

http://imm.io/1kbzx

No se como hacer para cambiar la orientación. Probe con números negativos y invirtiendo los valores. No se si es lógica o Charts no permite el mirroring

Como siempre muchas gracias!

El 03/11/2013, a las 20:00, asgallant <drew_g...@abtassoc.com> escribió:

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

[asgallant]

Are your coordinates measuring from the top left corner?  If yes, then you can set the vAxis.direction option to -1 to flip the y-axis so it matches your data.

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.

[Fernandez Santiago]

Algo así?

   var options = {

    title: 'Mapa de Alianza',

    vAxis.direction: -1;

    vAxis: {title: 'Eje Y', maxValue: 200, minValue:400},

    hAxis: {title: 'Eje X', maxValue: 200, minValue:400},

    pointSize: 4

   };

Seria?

O tengo que multiplicar el valor de la coordenada por -1? mmm

Tengo que ver como hacer el FLIP...

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

[asgallant]

Like this:

var options = {

title: 'Mapa de Alianza',

vAxis: {title: 'Eje Y', maxValue: 200, minValue:400, direction: -1},

hAxis: {title: 'Eje X', maxValue: 200, minValue:400},

pointSize: 4
};

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.

[Fernandez Santiago]

Muchas gracias hermano!

Funciono!

Como siempre, te agradezco!

El 03/11/2013, a las 20:00, asgallant <drew_g...@abtassoc.com> escribió:

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.