How to get multiple colors for scatter chart(image)

[ambarish biswas]

Dear all,
I was trying to plot a scatter chart where each data cell
will be plotted with separate color,
ref: http://code.google.com/apis/ajax/playground/?type=visualization#scatter_chart

I tried adding another DataColumn as string named color, specified
this attribute for all points but didn't work.

can you guys help...


Ambarish Biswas.

[wsaleem]

Hi Ambarish,

One solution could be to use the Google Chart API, especially if your
chart is not going to change much.

Regards,

waqar

On Aug 21, 9:44 am, ambarish biswas <ambarishbis...@gmail.com> wrote:
> Dear all,
>              I was trying to plot a scatter chart where each data cell
> will be plotted with separate color,

> ref:http://code.google.com/apis/ajax/playground/?type=visualization#scatt...

[ChartMan]

Try this

function drawVisualization() {
  // Create and populate the data table.
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'Height');
  data.addColumn('number', 'Height2');
  data.addRows([[200,300], [300,400]]);

  // Create and draw the visualization.
  new google.visualization.ScatterChart(document.getElementById('visualization')).
    draw(data, {'colors': ['red', 'black']});  
}
​

ChartMan

[ambarish biswas]

Hi,
Thanks for replying, but the code you have given didn't work the
way I wanted, however its plotting with the color red,

function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('number', 'Height');
data.addColumn('number', 'Height2');
data.addRows([[200,300], [300,400]]);

// Create and draw the visualization.
new google.visualization.ScatterChart(document.getElementById
('visualization')).
draw(data, {'colors': ['red', 'black']});
}

Then I modified the code which is shown bellow:

function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('number', 'Height');
data.addColumn('number', 'Height2');

data.addColumn('string', 'Name');
data.addRows([[200,300,'abc'], [300,400,'def'], [100,400,'ghi'],
[200,400,'ghi']]);

// Create and draw the visualization.
new google.visualization.ScatterChart(document.getElementById
('visualization')).

draw(data, {'colors': ['yellow', 'blue','red']});
}



But I want each point to be plotted with a different color, Let me
explain in detail, I have 10 columns of data, I want to plot that with
10 different colors (i;e: all the points belongs to the same column
should be plotted with 1 colour, and next to the chart there should
be labels ( or legend) stating the column header (which I have to
pass of course as another column), more like a group name for each
point. I tried the following code:

function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();

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

data.addColumn('number', 'Height');
data.addColumn('number', 'Height2');

data.addColumn('string', 'Group');
data.addRows(3);
data.setCell(0, 0, 'Tong');
data.setCell(0, 1, 174);
data.setCell(0, 2, 100);
data.setCell(0, 3, 'A');

data.setCell(1, 0, 'Huang');
data.setCell(1, 1, 523);
data.setCell(1, 2, 200);
data.setCell(1, 3, 'B');

data.setCell(2, 0, 'Tong');
data.setCell(2, 1, 86);
data.setCell(2, 2, 100);
data.setCell(2, 3, 'A');

// Create and draw the visualization.
new google.visualization.ScatterChart(document.getElementById
('visualization')).

draw(data, {'colors': ['yellow', 'blue','red','green']});
}

which produced an image, but not the way I wanted.

Can you please help..

I will really appreciate any suggestion.

Regards,
---
Ambar.

[MC Get Vizzy]

I'm not sure why the title of this thread says "(image)". you are using the interactive scatter chart, which does not support the feature you're looking for.  to use the image scatter chart, use google.visualization.ImageChart with options.cht='s'.  the colors option has a somewhat different format (you pass in the html codes instead of the names of the colors) but it should do what you want.

documentation for google.visualization.ImageChart is here:

http://code.google.com/apis/visualization/documentation/gallery/genericimagechart.html

the ImageChart can be kind of tricky, so if you have further questions, reply to this thread.

[MC Get Vizzy]

the Google Visualization API has a wrapper for the Google Chart API called google.visualization.ImageChart.  you can read about it here:

http://code.google.com/apis/visualization/documentation/gallery/genericimagechart.html