We Keep Coding

Google charts - delete gridline for first of month

Same issue with scattercharts and linecharts. Have a working chart, vAxis - sensor readings, hAxis - datetime. Chart shows daily readings for the last eight weeks - works.
And what it looks like, unwanted gridlines for the first of the month:
I have hAxis gridlines set up to display every 7 days - that works, but in addition to the weekly gridlines, google charts insists on displaying gridlines for the first of the month. Tried every permutation of gridlines count and minor gridlines I can think of. The only success I have had is gridlines color none, but that turns off all hAxis gridlines.
How can I turn off the gridlines showing for the 1st of each month?
Relevant options:
var levelOptions = {
title: "Remaining",
width: 420, //column is 420 with padding 5px, but this gives a right
//margin the same as the left
height: 250,
// chart area needs to be less than 100% to make room for axis labels
chartArea: {width: '85%', height: '80%'},
titlePosition: 'in',
axisTitlesPosition: 'none',
titleTextStyle: {color: 'DimGray',
fontSize: 14,
bold: false},
curveType: 'function',
lineWidth: 2, //width of lines connecting points
pointsVisible: false,
vAxis: {minValue: 0, //no need for max value, calc automatically
gridlines: {color:'Gainsboro'},
baselineColor: 'DimGray',
baseline: 0},
//Gridlines: {count: 0}, does nothing
//minorGridlines: {count: 0}, gets rid of all gridlines except 1st of month
//but leaves the ticklabels there, so why does gridlines count = 0 not work
//gridlines: {color:'none',}, //this gets rid of all of them but
//adding back in minor grid colour does not put them back
hAxis: {ticks: ticklabels,
textStyle : {fontSize: 9},
gridlines: {count: 0,},
//minorgridlines: {color:'Gainsboro',},
//gridlines: 0,
format: 'dd MMM', //so dates appear as, e.g. 1 Apr
baselineColor: 'DimGray',
baseline: data.getColumnRange(2).min},
legend: 'none',
};
ticklabels is an array of dates generated by parsing the arrayData and picking every 7th date.

Put 2 line charts to one Google Chart

I am trying to put 2 graphics with different scale to one Google Chart:
var options = {
curveType: 'function',
legend: { position: 'bottom' },
vAxis: {
0: {
gridlines: { count: 10 },
viewWindow:{
max:250,
min:0
}
},
1: {
gridlines: { count: 10 },
viewWindow:{
max:20000,
min:0
}
},
},
series:{
0:{targetAxisIndex:0},
1:{targetAxisIndex:1}
},
'chartArea': {'width': '90%', 'height': '75%'}
};
But I received this result:
All the data is positive numbers for both charts. Why I received -100 on the left side? What is wrong?
Thanks!

The solution is quite simple:
hAxis and vAxis contain the options of the horizontal and vertical axes, respectively. And if you want multiple vertical axes, you have to use vAxes (not vAxis)!!!

How do I show x axis labels in a Google LinChart

I'm trying out Google charts for rendering a line chart for my app. Things mostly work, I get the following:
The one remaining issue I have is that I am only getting a single x-axis label. (The 12:00).
I'd like to show more x-axis labels, so I tried adding a gridlines property:
// Line chart visualization
var myLine = new google.visualization.ChartWrapper({
'chartType': 'LineChart',
'containerId': 'line_div'
});
myLine.setOptions({
'title': 'My Chart',
lineWidth: 1,
colors: ['#006600', '#FF0000'],
vAxes: [
{title: 'AAA', titleTextStyle: {color: '#000000'}}, // Left axis
{title: 'BBB', titleTextStyle: {color: '#000000'}} // Right axis
],
hAxis: {
format: 'hh:mm',
gridlines: {count: 20}
},
series: [
{targetAxisIndex: 1},
{targetAxisIndex: 0}
]
});
But no luck, it still only displays one label and no x-axis gridlines.
How do I get more x-axis labels?

The problem turned out to be how I was populating my DataTable. I was using:
dataTable.addColumn({type: 'date', label: 'Date'})
because in my thinking a new Date() is a date. Google charts has a different opinion, so what I needed to do was:
dataTable.addColumn({type: 'datetime', label: 'Date'})
and that sorted it.

google chart api draws negative axis as well though minValue is 0

I have a google chart as follows which plots Age for various IDs. However, as age cannot be negative, I want it to be only on the positive axis.
I have given the minValue for vertical axis as 0, however it still shows the negative axis. How can I fix this?
My code below
function AgeChart() {
google.load("visualization", "1", {packages:["corechart"]});
var age_data = new google.visualization.DataTable();
var divname = "agediv";
age_data.addColumn('number', 'ID');
age_data.addColumn('number', 'Age');
age_data.addRow([1,10]);
age_data.addRow([1,20]);
age_data.addRow([1,30]);
age_data.addRow([1,40]);
age_data.addRow([1,50]);
var options = {'title':'Age line graph',
curveType: 'function',
viewWindowMode:'explicit',
vAxis: {title: 'Age (years)',
minValue: 0,
},
hAxis: {title: 'ID'},
height: 600,
width: 1000
};
var chart = new google.visualization.LineChart(document.getElementById(divname));
chart.draw(age_data, options);
}
EDIT: After adding the viewWindow.min value, it works for me.
function AgeChart() {
google.load("visualization", "1", {packages:["corechart"]});
var age_data = new google.visualization.DataTable();
var divname = "agediv";
age_data.addColumn('number', 'ID');
age_data.addColumn('number', 'Age');
age_data.addRow([1,10]);
age_data.addRow([1,20]);
age_data.addRow([1,30]);
age_data.addRow([1,40]);
age_data.addRow([1,50]);
var options = {'title':'Age line graph',
curveType: 'function',
viewWindowMode:'explicit',
vAxis: {title: 'Age (years)',
minValue: 0,
viewWindowMode:'explicit',
viewWindowMode:'explicit',
viewWindow:{
min:0,
}
},
hAxis: {title: 'ID'},
height: 600,
width: 1000
};
var chart = new google.visualization.LineChart(document.getElementById(divname));
chart.draw(age_data, options);
}

The minValue and maxValue may be used to extend the axis to include those values, but they do not restrict the axis to those values. What you want to do instead is use the viewWindow.min value.

On the date 26/10/2015 the actual version of Google charts requires only the following to stop displaying the negatives on the vertical axis.
var options = {
hAxis: { title: 'Dates',
},
vAxis: { title: 'Count of something',
viewWindow:{min:0},
},
};
As an option you can set up min value for more than 0 - it will give you same view.
vAxis: { title: 'Count',
minValue: 2,
},

Google Charts - Avoid showing negative values in yAxis

I have the following code:
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Year', 'People'],
['2010',0]
]);
// Create and draw the visualization.
new google.visualization.ColumnChart(document.getElementById('visualization')).
draw(data,
{title:"Yearly Coffee Consumption by Country",
width:600, height:400,
hAxis: {title: "Year"},
backgroundColor: 'none'
}
);
}
Which gives me the following chart
How can I do to avoid showing negative values in the yAxis? I have tried adding
vAxis: {minValue:0} without any luck.
There is a playground/sandbox for these charts: Google Charts Playground
​

You need to set viewWindowMode as explicit
vAxis: {viewWindowMode: "explicit", viewWindow:{ min: 0 }}

viewWindowMode: "explicit" is deprecated in current version which uses: vAxis.viewWindow.min:
vAxis: {
viewWindow: {
min: 0
}
}

It was not working form me. I needed to add the max value:max:1
The negative axis only appears if all the values are 0, so, for not bounding in the max, I only put the vAxis if there are no positives values (using PHP).
The example of my code is:
$hayPositivos = false;
foreach($valores as $valor){
$html[]=",
['".$valor['dia']."', ".intval($valor['validadas']).", ".intval($valor['totales'])."]";
if(!$hayPositivos && (intval($valor['validadas']) >0 || intval($valor['totales']) >0)){
$hayPositivos = true;
}
}
$html[]="]);
var options = {
title: '".t('News by time:').$periodo_nombre."',
legend: { position: 'bottom' }";
if(!$hayPositivos){
$html[] = ",
vAxis: {
viewWindow: {min: 0, max:1}
}";
}
$html[] = "};
And this is how it is seen:
If all values are negative
If there is any positive value