Line chart (google chart) custom labels - javascript

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>

Related

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>

Google Charts: how to deal with monthly data

I'm trying to use Google Charts to present monthly data in a stacked column chart.
I'd like to use Date values for the x-axis, since Google Charts is smart about labels and gridlines. But you can only specify exact days in a Javascript Date, not a whole month.
In my first attempt, I simply always used the first day of the month. But then the January bar straddles the year gridline (e.g. January 2020 is on the gridline separating 2019 and 2020) which just looks funny.
My second attempt uses day 15 for every month. That looks a bit better.
google.charts.load('current', {'packages':['corechart'], 'language': 'nl'});
google.charts.setOnLoadCallback(drawChart2);
function drawChart2() {
var data = google.visualization.arrayToDataTable([["","Appels","Peren","Bananen","dec?"],[new Date(2018, 0, 15),5217,4162,3014,0],[new Date(2018, 1, 15),4691,3582,2552,0],[new Date(2018, 2, 15),5427,4651,4160,0],[new Date(2018, 3, 15),4272,3571,3765,0],[new Date(2018, 4, 15),4409,3266,3020,0],[new Date(2018, 5, 15),4566,3566,3131,0],[new Date(2018, 6, 15),4628,3329,3742,0],[new Date(2018, 7, 15),4175,3309,3390,0],[new Date(2018, 8, 15),4794,3695,3047,0],[new Date(2018, 9, 15),5075,3976,2856,0],[new Date(2018, 10, 15),7568,6737,3056,0],[new Date(2018, 11, 15),7978,7551,4634,0],[new Date(2019, 0, 15),5300,5101,3730,0],[new Date(2019, 1, 15),4526,4310,3342,0],[new Date(2019, 2, 15),5399,5053,4335,0],[new Date(2019, 3, 15),4380,4187,4045,0],[new Date(2019, 4, 15),4940,4560,3854,0],[new Date(2019, 5, 15),4819,4529,3617,0],[new Date(2019, 6, 15),5158,4723,4783,0],[new Date(2019, 7, 15),4813,4290,3673,0],[new Date(2019, 8, 15),5935,5147,3504,0],[new Date(2019, 9, 15),5886,5362,3620,0],[new Date(2019, 10, 15),8565,7706,5652,0],[new Date(2019, 11, 15),9373,8416,4719,0],[new Date(2020, 0, 15),6054,6173,4367,0],[new Date(2020, 1, 15),5691,5458,4340,0],[new Date(2020, 2, 15),14864,6467,8200,0],[new Date(2020, 3, 15),21182,9031,7064,0],[new Date(2020, 4, 15),16590,9828,6981,0],[new Date(2020, 5, 15),13621,10060,7240,0],[new Date(2020, 6, 15),9966,7411,6878,0],[new Date(2020, 7, 15),9771,6948,6265,0],[new Date(2020, 8, 15),11033,7584,4794,0],[new Date(2020, 9, 15),13606,8981,5241,0],[new Date(2020, 10, 15),24279,11658,5889,0],[new Date(2020, 11, 15),2615,1523,439,49463]]);
var options = {'title':'Consumptie per maand',
'titleTextStyle': { 'fontSize': 15 },
'width':640,
'height':240,
'legend': { 'position':'bottom' },
'series': {"0":{"color":"66aabb"},"1":{"color":"66ddee"},"3":{"color":"e8f8ff"},"2":{"color":"bbeeff"}},
'chartArea': { 'width': '90%', 'left': 60, 'right': 20 },
'bar': { 'groupWidth': '80%' },
'isStacked':true};
var chart = new google.visualization.ColumnChart(document.getElementById('chart2'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div style="display: inline-block; width: 640px; height: 240px;" id="chart2"></div>
However, the tooltips now show the exact date, e.g. “15 jan. 2020”. I can't find a way to customize that (except by using custom HTML tooltips, which would be a bit of a hassle – and that don't look as pretty as the default tooltips).
Is there a better way to deal with monthly data in Google Charts?
(Of course, I can just use string values (e.g. 'jan. 2020'), but then I lost the smart x-axis labels and gridlines that using Date values provides.

you can use the DateFormat class, to format the date values.
by default, the tooltip will display the formatted value.
create the date format using a format pattern...
var formatMonth = new google.visualization.DateFormat({
pattern: 'MMM yyyy'
});
then use the format method to format the data table column...
format(dataTable, columnIndex)
formatMonth.format(data, 0);
see following working snippet...
google.charts.load('current', {
packages: ['corechart'],
language: 'nl'
}).then(function () {
var data = google.visualization.arrayToDataTable([["","Appels","Peren","Bananen","dec?"],[new Date(2018, 0, 15),5217,4162,3014,0],[new Date(2018, 1, 15),4691,3582,2552,0],[new Date(2018, 2, 15),5427,4651,4160,0],[new Date(2018, 3, 15),4272,3571,3765,0],[new Date(2018, 4, 15),4409,3266,3020,0],[new Date(2018, 5, 15),4566,3566,3131,0],[new Date(2018, 6, 15),4628,3329,3742,0],[new Date(2018, 7, 15),4175,3309,3390,0],[new Date(2018, 8, 15),4794,3695,3047,0],[new Date(2018, 9, 15),5075,3976,2856,0],[new Date(2018, 10, 15),7568,6737,3056,0],[new Date(2018, 11, 15),7978,7551,4634,0],[new Date(2019, 0, 15),5300,5101,3730,0],[new Date(2019, 1, 15),4526,4310,3342,0],[new Date(2019, 2, 15),5399,5053,4335,0],[new Date(2019, 3, 15),4380,4187,4045,0],[new Date(2019, 4, 15),4940,4560,3854,0],[new Date(2019, 5, 15),4819,4529,3617,0],[new Date(2019, 6, 15),5158,4723,4783,0],[new Date(2019, 7, 15),4813,4290,3673,0],[new Date(2019, 8, 15),5935,5147,3504,0],[new Date(2019, 9, 15),5886,5362,3620,0],[new Date(2019, 10, 15),8565,7706,5652,0],[new Date(2019, 11, 15),9373,8416,4719,0],[new Date(2020, 0, 15),6054,6173,4367,0],[new Date(2020, 1, 15),5691,5458,4340,0],[new Date(2020, 2, 15),14864,6467,8200,0],[new Date(2020, 3, 15),21182,9031,7064,0],[new Date(2020, 4, 15),16590,9828,6981,0],[new Date(2020, 5, 15),13621,10060,7240,0],[new Date(2020, 6, 15),9966,7411,6878,0],[new Date(2020, 7, 15),9771,6948,6265,0],[new Date(2020, 8, 15),11033,7584,4794,0],[new Date(2020, 9, 15),13606,8981,5241,0],[new Date(2020, 10, 15),24279,11658,5889,0],[new Date(2020, 11, 15),2615,1523,439,49463]]);
var formatMonth = new google.visualization.DateFormat({
pattern: 'MMM yyyy'
});
formatMonth.format(data, 0);
var options = {'title':'Consumptie per maand',
'titleTextStyle': { 'fontSize': 15 },
'width':640,
'height':240,
'legend': { 'position':'bottom' },
'series': {"0":{"color":"66aabb"},"1":{"color":"66ddee"},"3":{"color":"e8f8ff"},"2":{"color":"bbeeff"}},
'chartArea': { 'width': '90%', 'left': 60, 'right': 20 },
'bar': { 'groupWidth': '80%' },
'isStacked':true};
var chart = new google.visualization.ColumnChart(document.getElementById('chart2'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart2"></div>
NOTE: formatting the data table sets the formatted value of each cell of the data table column.
you can also provide the formatted value directly in the data by using object notation.
if you wanted, you could load the data table rows as follows...
[{v: new Date(2018, 0, 15), f: 'jan 2018'},5217,4162,3014,0]
where v: is the value, and f: is the formatted value...

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.

Google Visualization Horizontal Axis Labels

I am trying to create a line chart showing the number of hits on a page for an entire year. However I just want the horizontal axis to show one label per month on the first of each month. I've currently got something like this but it only shows the first month.
view.setColumns([{
type: 'string',
label: 'Month',
calc: function(dt, row) {
var date = dt.getValue(row, 0).split('/');
date = new Date(date[2], date[1] - 1, date[0]);
var current_month = date.getMonth();
if (current_month > month || (current_month == 0 && month != 0)) {
month = current_month;
return months[month];
} else {
return null;
}
}
}, 1]);

If your category values are of the Date() type, Google will usually nicely make them display by month by default. See the below example:
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Cats');
data.addColumn('number', 'Dogs');
data.addColumn('number', 'Rabbits');
data.addRows([
[new Date(1990, 0, 5), 1, 1, 0.5],
[new Date(1990, 1, 10), 2, 0.5, 1],
[new Date(1990, 2, 15), 4, 1, 0.5],
[new Date(1990, 3, 20), 8, 0.5, 1],
[new Date(1990, 4, 25), 7, 1, 0.5],
[new Date(1990, 5, 30), 7, 0.5, 1],
[new Date(1990, 6, 5), 8, 1, 0.5],
[new Date(1990, 7, 10), 4, 0.5, 1],
]);
// Create and draw the visualization.
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, null);
}
If your first column is not stored as a date, and they are just values, then I would suggest converting them to dates instead in order to make Google do the hard work for you.

Categories

Resources