Re: 1st and last cols are incorrectly positioned along the x axis

[asgallant]

That happens when you use a continuous-type domain axis (number/date/datetime/timeofday).  Set the hAxis.viewWindow.min and hAxis.viewWindow.max options to values just outside your data range.  In your case, you might want to use May 2012 for the min and Dec 2012 for the max.

On Friday, November 16, 2012 1:41:20 PM UTC-5, Ed wrote:

The code was written back in Jan of this year; I'm a n00b to the GV API and just inherited the burden of fixing whatever is causing this.

I checked the release notes for everything since January and nothing jumps out.  Looking at the configuration options there doesn't appear to be a way for me to control where the columns are positioned (please correct me if I'm wrong), so we must be pissing of the GV API in some other way.

I can't seem to run my code through the playground, either.  No error messages come from the playground, just a mess of text.

Thanks for any hints!

Ed

This is the entire js:

    <script type="text/javascript">

    var cdata = null;

    var rdata = null;

    var drawMChart = function()

    {

    var options = {

     width: '100%', 

     height: '100%', 

     isStacked: true, 

     legend: {position: 'none'}, 

     chartArea: {width: '80%', height: '80%'}

    };

   

    var chart = new google.visualization.ColumnChart(document.getElementById('mchart'));

    chart.draw(rdata, options);

    google.visualization.events.addListener( chart, 'select',

    function() {

    var url = "/biz/dashboard/1310/revDetails.ajax";

    var sel = chart.getSelection();

    var dVal = rdata.getValue( sel[0].row, 0 );

    var dFormat = new google.visualization.DateFormat({pattern: "MM-dd-yyyy"});

    url += '?date=' + dFormat.formatValue( dVal );

    lightWindow( url );      

    }

);

    }

   

google.load("visualization", "1", {packages:["corechart", "controls"]});

google.setOnLoadCallback(drawCharts);

function drawCharts() 

{

var colors = ['gold','blue','purple','violet','orange','lightblue'];

// mChart

{

cdata = new google.visualization.DataTable();

rdata = new google.visualization.DataTable();

var formatter = new google.visualization.NumberFormat( {prefix: '$', negativeColor: 'red', negativeParens: true} );

var dFormat = null;

dFormat = new google.visualization.DateFormat({pattern: "MMM"});

rdata.addColumn( "date", 'Month' );

cdata.addColumn( "date", 'Month' );

cdata.addColumn( "number", "New" );

cdata.addColumn( "number", "Repeat" );

rdata.addRows(6);

cdata.addRows(6);

rdata.addColumn( "number", 'Revenue' );

rdata.setValue( 0, 0, new Date('2012', '5', '1') );

cdata.setValue( 0, 0, new Date('2012', '5', '1') );

cdata.setValue( 0, 1, 167 );

cdata.setValue( 0, 2, 31 );

rdata.setValue( 0, 1, 7882.01 );

formatter.format(rdata, 1);

rdata.addColumn( "number", 'Revenue' );

rdata.setValue( 1, 0, new Date('2012', '6', '1') );

cdata.setValue( 1, 0, new Date('2012', '6', '1') );

cdata.setValue( 1, 1, 152 );

cdata.setValue( 1, 2, 23 );

rdata.setValue( 1, 2, 7982.34 );

formatter.format(rdata, 2);

rdata.addColumn( "number", 'Revenue' );

rdata.setValue( 2, 0, new Date('2012', '7', '1') );

cdata.setValue( 2, 0, new Date('2012', '7', '1') );

cdata.setValue( 2, 1, 104 );

cdata.setValue( 2, 2, 25 );

rdata.setValue( 2, 3, 7994.36 );

formatter.format(rdata, 3);

rdata.addColumn( "number", 'Revenue' );

rdata.setValue( 3, 0, new Date('2012', '8', '1') );

cdata.setValue( 3, 0, new Date('2012', '8', '1') );

cdata.setValue( 3, 1, 149 );

cdata.setValue( 3, 2, 35 );

rdata.setValue( 3, 4, 9337.52 );

formatter.format(rdata, 4);

rdata.addColumn( "number", 'Revenue' );

rdata.setValue( 4, 0, new Date('2012', '9', '1') );

cdata.setValue( 4, 0, new Date('2012', '9', '1') );

cdata.setValue( 4, 1, 175 );

cdata.setValue( 4, 2, 37 );

rdata.setValue( 4, 5, 9922.58 );

formatter.format(rdata, 5);

rdata.addColumn( "number", 'Revenue' );

rdata.setValue( 5, 0, new Date('2012', '10', '1') );

cdata.setValue( 5, 0, new Date('2012', '10', '1') );

cdata.setValue( 5, 1, 50 );

cdata.setValue( 5, 2, 19 );

rdata.setValue( 5, 6, 2572.78 );

formatter.format(rdata, 6);

if( dFormat != null )

{

dFormat.format( rdata, 0 );

dFormat.format( cdata, 0 );

}

drawMChart();

}

}

    </script>

[Ed]

Thanks much, asgallant.  Your suggestion worked great, but adding the extra months before and after seems to result in an unwanted extra month label to appear at the end of the data:

but thankfully not at the beginning.  Is this something I can control?

Thanks again for any hints,

Ed

Here's the new code:

    <script type="text/javascript">

    var cdata = null;

    var rdata = null;

    var haxisOpts = {};

    var drawMChart = function()

    {

    var options = {

     width: '100%', 

     height: '100%', 

     isStacked: true, 

     legend: {position: 'none'}, 

     chartArea: {width: '80%', height: '80%'},

     hAxis: haxisOpts

    };

   

    var chart = new google.visualization.ColumnChart(document.getElementById('mchart'));

    chart.draw(rdata, options);

    google.visualization.events.addListener( chart, 'select',

    function() {

    var url = "/biz/dashboard/1018/revDetails.ajax";

    var sel = chart.getSelection();

    var dVal = rdata.getValue( sel[0].row, 0 );

    var dFormat = new google.visualization.DateFormat({pattern: "MM-dd-yyyy"});

    url += '?date=' + dFormat.formatValue( dVal );

    lightWindow( url );      

    }

);

    }

   

google.load("visualization", "1", {packages:["corechart", "controls"]});

google.setOnLoadCallback(drawCharts);

function drawCharts() 

{

var colors = ['gold','blue','purple','violet','orange','lightblue'];

// mChart

{

cdata = new google.visualization.DataTable();

rdata = new google.visualization.DataTable();

var formatter = new google.visualization.NumberFormat( {prefix: '$', negativeColor: 'red', negativeParens: true} );

var dFormat = null;

dFormat = new google.visualization.DateFormat({pattern: "MMM"});

rdata.addColumn( "date", 'Month' );

cdata.addColumn( "date", 'Month' );

cdata.addColumn( "number", "New" );

cdata.addColumn( "number", "Repeat" );

rdata.addRows(6);

cdata.addRows(6);

rdata.addColumn( "number", 'Revenue' );

haxisOpts.viewWindowMode='explicit';

haxisOpts.viewWindow = {};

haxisOpts.viewWindow.min = new Date('2012', '4', '1');

rdata.setValue( 0, 0, new Date('2012', '5', '1') );

cdata.setValue( 0, 0, new Date('2012', '5', '1') );

cdata.setValue( 0, 1, 376 );

cdata.setValue( 0, 2, 185 );

rdata.setValue( 0, 1, 32923.87 );

formatter.format(rdata, 1);

rdata.addColumn( "number", 'Revenue' );

rdata.setValue( 1, 0, new Date('2012', '6', '1') );

cdata.setValue( 1, 0, new Date('2012', '6', '1') );

cdata.setValue( 1, 1, 256 );

cdata.setValue( 1, 2, 288 );

rdata.setValue( 1, 2, 31346.8399999999 );

formatter.format(rdata, 2);

rdata.addColumn( "number", 'Revenue' );

rdata.setValue( 2, 0, new Date('2012', '7', '1') );

cdata.setValue( 2, 0, new Date('2012', '7', '1') );

cdata.setValue( 2, 1, 269 );

cdata.setValue( 2, 2, 266 );

rdata.setValue( 2, 3, 33314.18 );

formatter.format(rdata, 3);

rdata.addColumn( "number", 'Revenue' );

rdata.setValue( 3, 0, new Date('2012', '8', '1') );

cdata.setValue( 3, 0, new Date('2012', '8', '1') );

cdata.setValue( 3, 1, 314 );

cdata.setValue( 3, 2, 216 );

rdata.setValue( 3, 4, 33018.3 );

formatter.format(rdata, 4);

rdata.addColumn( "number", 'Revenue' );

rdata.setValue( 4, 0, new Date('2012', '9', '1') );

cdata.setValue( 4, 0, new Date('2012', '9', '1') );

cdata.setValue( 4, 1, 366 );

cdata.setValue( 4, 2, 242 );

rdata.setValue( 4, 5, 48925.4900000002 );

formatter.format(rdata, 5);

rdata.addColumn( "number", 'Revenue' );

haxisOpts.viewWindow.max = new Date('2012', '11', '1');

rdata.setValue( 5, 0, new Date('2012', '10', '1') );

cdata.setValue( 5, 0, new Date('2012', '10', '1') );

cdata.setValue( 5, 1, 64 );

cdata.setValue( 5, 2, 62 );

rdata.setValue( 5, 6, 6391.55 );

formatter.format(rdata, 6);

if( dFormat != null )

{

dFormat.format( rdata, 0 );

dFormat.format( cdata, 0 );

}

drawMChart();

}

}

    </script>

[asgallant]

It's not really something you can control.  When using continuous axes, the API determines all axis labels for you; generally the only control you have is over the number of labels.  Unfortunately, this control is broken for Date axes, so you actually have no control options at all (see the bug report for this, you can "star" the issue to get informed of updates).  One thing you might try is using an offset other than 1 month for the hAxis.viewWindow.min/max values.  Maybe 10-15 days would work better.