javascript - Google Charts - ScatterChart Tick Marks and Styling -

i created scatterchart visualize relationships between different data-fields. visualized data can numeric or nominal/ordinal in nature. nominal/ordinal values therefore mapped numeric values. simple example "age + gender", gender nominal , map 'male' => 1, 'female ' => 2 desired output.

so far good, chart working, need formatting it.

as can see first gender column displayed on y axis , second 1 @ far right side of graph. them layed out "pretty" in space y-axis, space right end.

also display appropriate tick marks "male" , "female" on y-axis.

extension:

i want split data different series able colorize e.g. 'male' , 'female' data points in different colors.

what build 3 columns in data-table (age, male, female), can't quite output correctly. it's merging 1 displayed column.

here's code far:

var drawme = function(){        var columns = 0;        var xcolumns = 0;        var ycolumns = 0;        var gdata = new google.visualization.datatable();        /**         * data object:         * data.xname = name of x parameter         * data.yname = name of y parameter         * data.x = data x paramter         * data.y = data y parameter         * data.xtype = type of x parameter, either num (= number) or other (= string)         * data.ytype = type of y parameter, either num (= number) or other (= string)         * data.xchoices = array of strings representing availble choices x if xtype !== num         * daty.ychoices = array of strings representing availble choices y if ytype !== num         *          */        if(data.xtype === 'num'){            gdata.addcolumn('number', data.xname);            xcolumns++;            columns++;        } else {            for(var = 0; < data.xchoices.length; i++){                gdata.addcolumn('number', data.xchoices[i]);                xcolumns++;                columns++;            }        }        if(data.ytype === 'num'){            gdata.addcolumn('number', data.yname);            ycolumns++;            columns++;        } else {            for(var = 0; < data.ychoices.length; i++){                gdata.addcolumn('number', data.ychoices[i]);                columns++;                ycolumns++;            }        }        var x;        var y;        for(var = 0; < count; i++){ // count set closure, cause data paged via ajax            // initialize 0 row            var row = [];            for(var j = 0; j < columns; j++){                row[j] = null;            }            if(data.xtype === 'num'){                x = parsefloat(data.x[i]);                row[0] = x;            } else {                var index = data.xchoices.indexof(data.x[i]);                x = {                    v: index + 1, // don't start @ 0                    f: data.xchoices[index],                };                row[index] = x;            }            if(data.ytype === 'num'){                y = parsefloat(data.y[i]);                row[xcolumns] = y;            } else {                var index = data.ychoices.indexof(data.y[i]);                y = {                    v: index + 1, // don't start @ 0                    f: data.ychoices[index],                };                row[xcolumns + index] = y;            }            gdata.addrow(row);        }        var xtitle = data.xname;        if(data.xunit){            xtitle += ' [' + data.xunit + ']';        }        var ytitle = data.yname;        if(data.yunit){            ytitle += ' [' + data.yunit + ']';        }        var xgridlines = -1;        var ygridlines = -1;        var xticks = false;        var yticks = false;        if(data.xtype !== 'num' && data.xchoices){            xgridlines = data.xchoices.length + 2;            xticks = [{v: 0, f: ''}]; // empty tick @ beginning            for(var = 0; < data.xchoices.length; i++){                xticks.push({v: i+1, f: data.xchoices[i]});            }            xticks.push({v: 3, f: ''}); // empty tick @ end        }        if(data.ytype !== 'num' && data.ychoices){            ygridlines = data.ychoices.length + 2;            yticks = [{v: 0, f: ''}];            for(var = 0; < data.ychoices.length; i++){                yticks.push({v: i+1, f: data.ychoices[i]});            }            yticks.push({v: 3, f: ''});        }        var options = {          title: data.xname + ' vs. ' + data.yname,          haxis: {              title: xtitle,              gridlines: {                  count: xgridlines              }          },          vaxis: {              title: ytitle,              gridlines: {                  count: ygridlines              }          }        };        if(xticks !== false){            options.haxis.ticks = xticks;            options.haxis.viewwindowmode = 'pretty';        }        if(yticks !== false){            options.vaxis.ticks = yticks;            options.vaxis.viewwindowmode = 'pretty';        }        options.series = {};        for(var = 0; < columns; i++){            options.series[i] = {color: atk.colors[i], visibleinlegend: true};        }        var chart = new google.visualization.scatterchart(element);        chart.draw(gdata, options);    }; 

thanks , time!

you're in luck, there update api in rc version (1.1) should able want. load rc version first:

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

then set haxis.ticks option this:

haxis: {     ticks: [{v: 0, f: ''}, {v: 1, f: 'male'}, {v: 2, f: 'female'}, {v: 3, f: ''}] } 

try , see if works.

edit:

to make males , females different colors, need split data 2 separate columns. can accomplish using dataview:

// assumes male/female column 0 , age column 1 in datatable var view = new google.visualization.dataview(data); view.setcolumns([0, {     type: 'number',     label: 'age',     calc: function (dt, row) {         // return value if male         return (dt.getvalue(row, 0) == 1) ? dt.getvalue(row, 1) : null;     } }, {     type: 'number',     label: 'age',     calc: function (dt, row) {         // return value if female         return (dt.getvalue(row, 0) == 2) ? dt.getvalue(row, 1) : null;     } }]); 

draw chart using dataview instead of datatable.