Develop Reference

What is the configuration in Google Chart to lessen the number of number/dates display on the hAxis?

I'm using a line graph in Google Chart and there's just one thing left I need to configure, the hAxis dates.
The dates have 2 days gap only, like Feb 2, Feb 4, Feb 6, Feb 8, and so on, and so it shows 15 dates on the hAxis. I want to widen the gap maybe by 7 days or lessen the number of dates displayed by just 4 dates. How to achieve that? I can't seem to find the right config for it here: https://developers.google.com/chart/interactive/docs/gallery/linechart.
Here's my chart: https://jsfiddle.net/hpx7Lj91/1/
google.charts.load('current', {
packages: ['corechart', 'line']
});
google.charts.setOnLoadCallback(drawBasic);
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Price');
data.addRows([
[new Date(2022, 1, 1), 0.2500],
[new Date(2022, 1, 2), 0.2500],
[new Date(2022, 1, 3), 0.2600],
[new Date(2022, 1, 4), 0.2700],
[new Date(2022, 1, 5), 0.2800],
[new Date(2022, 1, 6), 0.3000],
[new Date(2022, 1, 7), 0.2900],
[new Date(2022, 1, 8), 0.3300],
[new Date(2022, 1, 9), 0.3100],
[new Date(2022, 1, 10), 0.3200],
[new Date(2022, 1, 11), 0.3200],
[new Date(2022, 1, 12), 0.3200],
[new Date(2022, 1, 13), 0.3100],
[new Date(2022, 1, 14), 0.3200],
[new Date(2022, 1, 15), 0.3000],
[new Date(2022, 1, 16), 0.3100],
[new Date(2022, 1, 17), 0.3000],
[new Date(2022, 1, 18), 0.3000],
[new Date(2022, 1, 19), 0.2900],
[new Date(2022, 1, 20), 0.2800],
[new Date(2022, 1, 21), 0.2700],
[new Date(2022, 1, 22), 0.2700],
[new Date(2022, 1, 23), 0.2700],
[new Date(2022, 1, 24), 0.2600],
[new Date(2022, 1, 25), 0.2700],
[new Date(2022, 1, 26), 0.2600],
[new Date(2022, 1, 27), 0.2500],
[new Date(2022, 1, 28), 0.2500],
[new Date(2022, 1, 29), 0.2400],
[new Date(2022, 1, 30), 0.2500]
]);
var options = {
hAxis: {
gridlines: {
color: 'none'
},
format: 'MMM dd',
textStyle: {
color: '#677185',
fontSize: 12,
bold: true
}
},
vAxis: {
gridlines: {
color: '#DFE3EB'
},
minorGridlines: {
color: 'none'
},
textStyle: {
color: '#677185',
fontSize: 12,
bold: true
}
},
tooltip: {
textStyle: {
color: '#677185',
fontSize: 12
}
},
series: {
0: {
color: '#26a172'
}
},
legend: {
position: 'none'
},
curveType: 'function'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}

the ticks option offers the most flexibility
it takes an array of the ticks you want to display, such as...
[new Date(2022, 1, 1), new Date(2022, 1, 8), new Date(2022, 1, 15), ...]
you can obviously hard-code them as shown above, or...
we can use data table method getColumnRange(colIndex) to find the min and max dates from the data table.
here is a routine to display a certain number of dates,
evenly spaced between the min and max dates from the data table.
var datesToDisplay = 6;
var dateRange = data.getColumnRange(0);
var timeRange = dateRange.max.getTime() - dateRange.min.getTime();
var interval = timeRange / (datesToDisplay - 1);
var ticks = [];
var tick = dateRange.min;
while (tick.getTime() <= dateRange.max.getTime()) {
ticks.push(tick);
tick = new Date(tick.getTime() + interval);
}
then add the ticks option...
hAxis: {
gridlines: {
color: 'none'
},
format: 'MMM dd',
textStyle: {
color: '#677185',
fontSize: 12,
bold: true
},
ticks: ticks // <-- ticks option
},
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Price');
data.addRows([
[new Date(2022, 1, 1), 0.2500],
[new Date(2022, 1, 2), 0.2500],
[new Date(2022, 1, 3), 0.2600],
[new Date(2022, 1, 4), 0.2700],
[new Date(2022, 1, 5), 0.2800],
[new Date(2022, 1, 6), 0.3000],
[new Date(2022, 1, 7), 0.2900],
[new Date(2022, 1, 8), 0.3300],
[new Date(2022, 1, 9), 0.3100],
[new Date(2022, 1, 10), 0.3200],
[new Date(2022, 1, 11), 0.3200],
[new Date(2022, 1, 12), 0.3200],
[new Date(2022, 1, 13), 0.3100],
[new Date(2022, 1, 14), 0.3200],
[new Date(2022, 1, 15), 0.3000],
[new Date(2022, 1, 16), 0.3100],
[new Date(2022, 1, 17), 0.3000],
[new Date(2022, 1, 18), 0.3000],
[new Date(2022, 1, 19), 0.2900],
[new Date(2022, 1, 20), 0.2800],
[new Date(2022, 1, 21), 0.2700],
[new Date(2022, 1, 22), 0.2700],
[new Date(2022, 1, 23), 0.2700],
[new Date(2022, 1, 24), 0.2600],
[new Date(2022, 1, 25), 0.2700],
[new Date(2022, 1, 26), 0.2600],
[new Date(2022, 1, 27), 0.2500],
[new Date(2022, 1, 28), 0.2500],
[new Date(2022, 1, 29), 0.2400],
[new Date(2022, 1, 30), 0.2500]
]);
var datesToDisplay = 6;
var dateRange = data.getColumnRange(0);
var timeRange = dateRange.max.getTime() - dateRange.min.getTime();
var interval = timeRange / (datesToDisplay - 1);
var ticks = [];
var tick = dateRange.min;
while (tick.getTime() <= dateRange.max.getTime()) {
ticks.push(tick);
tick = new Date(tick.getTime() + interval);
}
var options = {
hAxis: {
gridlines: {
color: 'none'
},
format: 'MMM dd',
textStyle: {
color: '#677185',
fontSize: 12,
bold: true
},
ticks: ticks
},
vAxis: {
gridlines: {
color: '#DFE3EB'
},
minorGridlines: {
color: 'none'
},
textStyle: {
color: '#677185',
fontSize: 12,
bold: true
}
},
tooltip: {
textStyle: {
color: '#677185',
fontSize: 12
}
},
series: {
0: {
color: '#26a172'
}
},
legend: {
position: 'none'
},
curveType: 'function'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Line chart (google chart) custom labels

Well, I am using a LineChart with Angular 4 and I make sure to change labels according to window size like the following:
#HostListener('window:resize', ['$event']) onResize(event) {
if (event.target['innerWidth'] < 420) {
this.stockAnalysisService.getOptionsY()['hAxis']['format'] = 'MMM';
} else if (event.target['innerWidth'] < 760) {
this.stockAnalysisService.getOptionsY()['hAxis']['format'] = 'MM. yy\'';
} else { this.stockAnalysisService.getOptionsY()['hAxis']['format'] = 'MMM d, yyyy'; }
this.drawBasic();
}
This is just basic Angular syntax to detect resize or window and change the hAxis labels accordingly.
My question is, if I want a custom label where I present months on the labels and the months are presented with values of DAY OF THE MONTH and ONLY the first day of the month will have an addition of text to it like the following image:
RED: days of the month (jumps 5 days each time but not relevant)
BLACK: first indication of the month (Should not be NOV 10, but NOV 1, not relevant)
Any idea?

to have one or more labels different from than rest,
will need to use option --> hAxis.ticks
this means you will need to build an array of the labels that should be displayed
using object notation, for each tick you can provide
the value of the tick (v:)
and the formatted value of the tick (f:)
{v: dateValue, f: displayValue}
the value (v:) should be the same type as the x-axis, in this case --> 'date'
the formatted value (f:) should be --> 'string'
if you don't use object notation, and just provide a date for the tick,
the label will be displayed according to --> hAxis.format
so, for the dates that should have the month prefix,
use object notation, for the rest, just provide the date
see following working snippet for an example...
google.charts.load('current', {
packages: ['controls', 'corechart', 'table']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('date', 'x');
data.addColumn('number', 'y0');
data.addRows([
[new Date(2017, 7, 1), 2],
[new Date(2017, 7, 2), 3],
[new Date(2017, 7, 4), 1],
[new Date(2017, 7, 8), 5],
[new Date(2017, 7, 16), 6],
[new Date(2017, 7, 20), 7],
[new Date(2017, 7, 24), 1],
[new Date(2017, 7, 26), 2],
[new Date(2017, 7, 27), 3],
[new Date(2017, 8, 1), 2],
[new Date(2017, 8, 2), 3],
[new Date(2017, 8, 4), 9],
[new Date(2017, 8, 8), 5],
[new Date(2017, 8, 16), 6],
[new Date(2017, 8, 20), 7],
[new Date(2017, 8, 24), 1],
[new Date(2017, 8, 26), 2],
[new Date(2017, 8, 27), 3]
]);
var oneDay = (1000 * 60 * 60 * 24);
var dateRange = data.getColumnRange(0);
var formatMonth = new google.visualization.DateFormat({
pattern: 'MMM dd'
});
// build ticks
var ticksX = [];
for (var i = dateRange.min.getTime(); i <= dateRange.max.getTime(); i = i + oneDay) {
var rowDate = new Date(i);
if (rowDate.getDate() === 1) {
// add first day of month
ticksX.push({
v: rowDate,
f: formatMonth.formatValue(rowDate)
});
} else if (((i - dateRange.min.getTime()) % 7) === 0) {
// add date every seven days
ticksX.push(rowDate);
}
}
var container = document.getElementById('chart_div');
var chart = new google.visualization.LineChart(container);
chart.draw(data, {
chartArea: {
bottom: 36,
left: 48,
right: 12,
top: 12,
width: '100%',
height: '100%'
},
hAxis: {
format: 'dd',
ticks: ticksX
},
width: 800
});
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

How do I include a date column in a google visualisation datatable column taken from a spreadsheet

I have a Google sheet that look like this:
Date Sales
31/03/2017 1000
30/06/2017 2000
30/09/2017 1500
31/12/2017 2500
31/03/2018 4000
If I import this using .arrayToDataTable in Google charts and set the type of column 0 to 'date' or 'string' - it doesn't like it, because the date is only a formatted number i.e 43190 = 31/3/2018. so the type has to be 'number' which then only displays the underlying number on the chart and not the date
I can loop through each of the row values and I've tried changing them with this
function formatDate(date) {
var d = new Date((date - 25569)*86400*1000),
locale = "en-us",
month = d.toLocaleString(locale, { month: "short" });
var formattedDate = d.getDay() + "/" + month + "/" + d.getFullYear();
return formattedDate
}
this converts the number to a date string - so with an input of, say, 43190 it returns 31/Mar/2018 but I still can't change the column type to 'date'
I could output the dates as strings but they don't sort in chronological order but alphabetical - I want them chronological.
can anybody show me where I'm going wrong?
EDIT:
If I change the function to
function formatDate(date) {
var d = new Date((date - 25569)*86400*1000)
return d
}
this now sets the column values to the full date object
but I get an error a saying "Value Sun Jun 30 2013 01:00:00 GMT+0100 (GMT Summer Time) does not match type number in column index 0"
Now this must be referring to the datatable column zero, which in the original table, is a date number. I've tried adding:
data.setColumnProperty(0, 'type' , 'date')
but seem to get the same error.
perhaps I'm not changing the type at the correct point in the code.
to clarify: I'm getting the original values from a range in the google sheet then converting that range to a datatable using .arrayToDataTable. So I'm not sure I can define the column type at the point of making the datatable hence the separate attempt with:
data.setColumnProperty(0, 'type' , 'date')

You have to supply the complete date object in the date-type column.
Good documentation about dates can be found here
https://developers.google.com/chart/interactive/docs/datesandtimes#axesgridlinesticks
An example of dates and sales could be
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Sales');
data.addRows([
[new Date(2015, 0, 1), 5], [new Date(2015, 0, 2), 7], [new Date(2015, 0, 3), 3],
[new Date(2015, 0, 4), 1], [new Date(2015, 0, 5), 3], [new Date(2015, 0, 6), 4],
[new Date(2015, 0, 7), 3], [new Date(2015, 0, 8), 4], [new Date(2015, 0, 9), 2],
[new Date(2015, 0, 10), 5], [new Date(2015, 0, 11), 8], [new Date(2015, 0, 12), 6],
[new Date(2015, 0, 13), 3], [new Date(2015, 0, 14), 3], [new Date(2015, 0, 15), 5],
[new Date(2015, 0, 16), 7], [new Date(2015, 0, 17), 6], [new Date(2015, 0, 18), 6],
[new Date(2015, 0, 19), 3], [new Date(2015, 0, 20), 1], [new Date(2015, 0, 21), 2],
[new Date(2015, 0, 22), 4], [new Date(2015, 0, 23), 6], [new Date(2015, 0, 24), 5],
[new Date(2015, 0, 25), 9], [new Date(2015, 0, 26), 4], [new Date(2015, 0, 27), 9],
[new Date(2015, 0, 28), 8], [new Date(2015, 0, 29), 6], [new Date(2015, 0, 30), 4],
[new Date(2015, 0, 31), 6], [new Date(2015, 1, 1), 7], [new Date(2015, 1, 2), 9]
]);
You could than add the following to options to format your date
hAxis: {
format: 'MM/dd/yyyy'
}

How to fill a Google chart with PHP from a TXT data file?

I have a DATAS.TXT file automatically filled-in with TIME and TEMPERATURE datas.
TIME is already formatted as per Google Charts requirements:
new Date(Year, Month, Day, Hours, Minutes)
TIME datas and TEMPERATURES datas are separated by a SPACE character and each line terminates with \r.
The DATAS.TXT file shows something like this:
new Date(2017, 01, 01, 05, 15) 20.5
new Date(2017, 01, 01, 18, 50) 21.7
new Date(2017, 01, 19, 12, 35) 22.4
etc ...
From this DATA file I would like to generate a Google Chart like this example:
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {'packages':['annotatedtimeline']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Date');
data.addColumn('number', 'Temperatures');
data.addRows([
[new Date(2001, 0, 1, 0), 0.0],
[new Date(2001, 0, 1, 1), 4.8],
[new Date(2001, 0, 1, 2), 4.6],
[new Date(2001, 0, 1, 3), 2.6],
[new Date(2001, 0, 1, 4), 3.6],
// ...
// Rest of year data here...
// ...
[new Date(2001, 11, 31, 20), 9.4],
[new Date(2001, 11, 31, 21), 7.0],
[new Date(2001, 11, 31, 22), 8.5],
[new Date(2001, 11, 31, 23), 2.2]
]);
var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
chart.draw(data, {displayAnnotations: true});
}
</script>
My question is, how can I fill-in data.addRows([ ... ] contents with the datas issued from my DATAS.TXT file?
I need a function that could pick-up TIMES, detect the space character insertion, pick-up the associated TEMPERATURE data and detect the \r character.
I'm not confortable with PHP, any help will be highly appreciated.

Wrong dates on Google Chart API Line Graph

So I am trying to map Tide times on a line graph using Google's Chart API.
However, the points plotted on the Graph don't correspond to the correct date and time values.
The data is in the form date time (x-axis) and height of tide (y-axis).
I'm not sure if I am creating the date time value correctly, or it the API is just doing something weird.
For instance, the last date in the tideTimes array is for the 1st of November, but the Graph is showing data points for December, you can see this behaviour in image below. I added the code below to allow you to recreate these errors.
If anyone could tell me what I am doing wrong, it would be greatly appreciated.
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawWeekChart);
function drawWeekChart() {
var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Date');
data.addColumn('number', 'Wave Height (Meters)');
var tideTimes = [
[new Date(2012, 10, 29, 05, 44, 00, 00), 9.12],
[new Date(2012, 10, 29, 11, 47, 00, 00), 1.62],
[new Date(2012, 10, 29, 18, 01, 00, 00), 9.23],
[new Date(2012, 10, 30, 00, 01, 00, 00), 1.55],
[new Date(2012, 10, 30, 06, 16, 00, 00), 9.20],
[new Date(2012, 10, 30, 12, 16, 00, 00), 1.58],
[new Date(2012, 10, 30, 18, 33, 00, 00), 9.21],
[new Date(2012, 10, 31, 00, 29, 00, 00), 1.54],
[new Date(2012, 10, 31, 06, 46, 00, 00), 9.21],
[new Date(2012, 10, 31, 12, 45, 00, 00), 1.60],
[new Date(2012, 10, 31, 19, 04, 00, 00), 9.12],
[new Date(2012, 11, 01, 00, 58, 00, 00), 1.59]
// new Date( YYYY, MM, DD, HH, MM, SS, MS), height]
];
data.addRows(tideTimes);
var options = {
title: 'Tide Times',
smoothLine: true,
width: 984,
height: 600
};
var chart = new google.visualization.LineChart(document.getElementById('tide_chart_week'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="tide_chart_week" stye="float:left; height:800px; background:blue;"></div>
</body>
</html>

Month must be a integer b/w 0-11.
Check the Date() constructor docs [0]
month Integer value representing the month, beginning with 0 for
January to 11 for December.
Just change your tideTimes variable accordingly
var tideTimes = [
[new Date(2012, 9, 29, 05, 44, 00, 00), 9.12], // october
//.....
[new Date(2012, 10, 01, 00, 58, 00, 00), 1.59] // november
];
Also, you might want to change your chart's horizontal axis format to show friendlier dates
var options = {
/*.. current options ..*/
hAxis: {format:'MMM d, y'}
};
Here's an example: http://jsfiddle.net/jaimem/F4Gzr/1/
[0] https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Date

As jm pointed out, in ECMAScript months are zero based so:
new Date(2012, 10, 31, 19, 04, 00, 00)
is 31 November 2012, which creates a date for 1 December 2012 (since November only has 30 days) and:
new Date(2012, 11, 01, 00, 58, 00, 00)
is also 1 December, 2012.

<div id="tide_chart_week" stye="float:left; height:800px; background:blue;"></div>
Note the use of stye instead of style !