Thanks Josh for your concrete example. The jQuery code works well as I hope.
If you know, could you kindly tell me how to see the chart svg source? I cannot get the svg source by any browsers ( e.g. chrome, IE, Opera.) I'm wondering why I cannot see the google chart source though I can see a general svg source of other site. I'm interested in your approach to search text by font-size. On Dec 4, 2:01 pm, "Josh W." <[email protected]> wrote: > 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/scatt... > > ->> 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.
