You could use a ScatterChart but give each Set a Number and tell the
name/label for each Set in the Title.
Set 1 = Male, Set 2 = Female (use in your titleX option, for example).
Also, to make the Chart look nicer, I added two "dummy points" for Set
0 and Set 3 so Set 1 and Set 2 are in the middle of the Chart.
There may be a way to make these two points invisible and add
"Average" lines using the API, but so far
the quickest way I've found is using Firebug or the Chrome "Inspect
Element" feature and drill down into the iFrame SVG element and edit
the SVG directly.
(see below for a non-cross browser method using jQuery).
// START CODE
// Added Set (number) column and two extra rows of dummy data.
var dt = new google.visualization.DataTable( {
cols: [{id: 'Set', 'label': 'Set', type: 'number'},
{id: 'sex', label: 'Sex', type: 'string'},
{id: 'weight', label: 'Weight', type: 'number'}
],
rows: [{c:[{v: 1}, {v: 'male'}, {v: 55}]},{c:[{v: 1}, {v: 'male'},
{v: 59}]},{c:[{v: 1}, {v:
'male'}, {v: 66}]},{c:[{v: 1}, {v: 'male'}, {v: 70}]},
{c:[{v: 2}, {v: 'female'}, {v: 45}]},{c:[{v: 1}, {v:
'male'}, {v: 49}]},{c:
[{v: 1}, {v: 'male'}, {v: 46}]},{c:[{v: 1}, {v: 'male'}, {v: 50}]}
,{c:[{v:0},{v:'--'},{v:0}]} // empty left Set
,{c:[{v:3},{v:'--'},{v:0}]} // empty right Set
]
} );
var vizDiv = document.getElementById('visualization'); // put ID of
your visualization container here.
vizDiv.innerHTML = ""; // clear old visualization, if any.
var dl = new google.visualization.ScatterChart(vizDiv);
dl.draw(dt, {titleX:'Set 1 is Male, Set 2 is Female', height:313,
width:400}) // put Set descriptions in titleX
// dt.toJSON()
// END CODE
Could add a "select" or "onmouseover" listener to interact with the
Chart.
For other options, see also:
http://code.google.com/apis/visualization/documentation/gallery/scatterchart.html#Configuration_Options
->> Josh W. <<-
http://www.redthreadtapestry.com
PS: If you get *desperate* to change the x-axis labels, a really
*ugly* jQuery hack that I DO NOT recommend follows:
google.load("jquery", "1", {}); // in your header
try {
// This works in IE 7 -- change first SVG element with string="2" and
replace with string="Female".
var iframed=$($('iframe')[0].contentWindow.document);
iframed.find('[string=2]')[0].string='Female';
iframed.find('[string=1]')[0].string='Male';
iframed.find('[string=0]')[0].string=' ';
iframed.find('[string=3]')[0].string=' ';
// Warning: May incorrectly match other numbers in the data set.
Assumes Y axis labels are drawn before X axis labels.
} catch(err) {
try {
// This is works in Google Chrome -- find 2nd element with font-
size=16 in iFrame and change from "1" to "Male"
var res = $($('iframe')[0].contentWindow.document).find('text[font-
size=16]');
res[1].firstChild.textContent='Male';
res[2].firstChild.textContent='Female';
res[0].firstChild.textContent=' ';
res[3].firstChild.textContent=' ';
} catch(err) {
if (self.console) console.log(err.message);
}
}
// The above hack only works with the given dataset and the current
version of visualization ... not recommended for production use.
// You've been warned.
On Dec 4, 4:58 am, LaFouine <[email protected]> wrote:
> I want to make dotplot likehttp://www.bmj.com/statsbk/fig1_3.gif.
> I tried to use scatterchart in Google Visualization API. But it
> couldn't display letters on x-axis.
> Do you know the way to create dotplot by using Google Visualization
> API?
>
> Sample data is below.
>
> var dt = new google.visualization.DataTable(
> {
> cols: [{id: 'sex', label: 'Sex', type: 'string'},
> {id: 'weight', label: 'Wetight', type: 'number'}
> ],
> rows: [{c:[{v: 'male'}, {v: 55}]},{c:[{v: 'male'}, {v: 59}]},{c:[{v:
> 'male'}, {v: 66}]},{c:[{v: 'male'}, {v: 70}]},
> {c:[{v: 'female'}, {v: 45}]},{c:[{v: 'male'}, {v: 49}]},{c:
> [{v: 'male'}, {v: 46}]},{c:[{v: 'male'}, {v: 50}]}
> ]
>
> }
>
> Thanks in advance.
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-visualization-api?hl=en.
