Google charts API scatter chart with legend and other colors

Question

I have this one example:

// Load the Visualization API and the piechart package.
        google.load('visualization', '1.0', {'packages':['corechart']});

        // Set a callback to run when the Google Visualization API is loaded.
        google.setOnLoadCallback(drawChart1);

        // Callback that creates and populates a data table,
        // instantiates the pie chart, passes in the data and
        // draws it.
        function drawChart1() {
            var data = new google.visualization.DataTable(
            {
                cols: [
                    {id: 'A', label: 'A', type: 'number'},
                    {id: 'B', label: 'B', type: 'number'},
                    {id: 'C', label: 'C', type:'tooltip', p:{role:'tooltip'}}
                ],
                rows: [
                    {c:[{v: 2}, {v: 3}, {v:'Allen'}]},
                    {c:[{v: 4}, {v: 2}, {v:'Tom'}]},
                    {c:[{v: 1}, {v: 3}, {v:'Sim'}]}

                ]
            })

            var options = {
                title: 'Age vs. Weight comparison',
                hAxis: {title: 'Age', minValue: 1, maxValue: 5},
                vAxis: {title: 'Weight', minValue: 1, maxValue: 5},
                legend: ''
            };

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

http://jsfiddle.net/eAWcC/1/

when i hover once data, tooltip will see me label for this data. That is good.

But I want to see all the values ​​are different color and placed in the legend.

How to do it?

Answer 1

The columns in the datatable of a scatterchart are the ones that are shown in the legend, and are colored differently. In order to display them separately you need to rearrange your data so that each person has their own column.

For instance, replace your data table variable with this:

            var data = google.visualization.arrayToDataTable([
              ['x', 'Allen', 'Tom', 'Sim'],
              [1, null, null, 3],
              [2, 3, null, null],
              [4, null, 2, null],
            ]);

Doing this will give you the desired output (I believe, check here).

However, the issue with this method is that you end up with a lot of 'null' values in each series (since you just have single points). In order to simplify this process, you could write a loop to go through your data and format it appropriately for the new table. The basic code would be:

1. Add a column for your X values to a new table
2. For each row in column 2 (tooltips) create a new column in the new table
3. For each row in column 1 (Y values) fill diagonally down/right

This would look something like this:

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

          newTable.addColumn('number', 'Age');
          for (var i = 0; i < data.getNumberOfRows(); ++i) {
            newTable.addColumn('string', data.getValue(i, 2));
            newTable.addRow();
          }

          for (var j = 0; j < data.getNumberOfRows(); ++j) {
            newTable.setValue(j, j + 1, data.getValue(j, j + 1));
          }

(Above code has been tested but doesn't like the second for() loop for reasons beyond my comprehension).