I am new to javascript and the Google Visualization library. I've created a line chart as below 1, but cannot get the Y Axis to display anything; I'm looking for the axis itself to be drawn, along with the values from the Data Table.
Here's my code (the chart labels are changed from the screenshot, but nothing more):
google.setOnLoadCallback(drawLineChart);
function drawLineChart(){var data=google.visualization.arrayToDataTable(
[
[
'Day',
'Label 1','Label 2','Label 3','Label 4','Label 5',
'Label 6','Label 7','Label 8','Label 9','Label 10',
],
['19 Aug 2013',1,0,0,0,0,0],
['20 Aug 2013',2,2,2,0,0,0],
['21 Aug 2013',5,5,0,6,5,0],
['22 Aug 2013',1,4,3,2,0,0],
['23 Aug 2013',0,0,0,4,0,0],
['24 Aug 2013',3,2,1,2,0,15],
['25 Aug 2013',1,2,1,2,0,0],
['26 Aug 2013',3,1,2,1,0,0],
['27 Aug 2013',0,0,3,2,0,1]
]);
var options = {
title:'Title',
legend:{position:'bottom'},
curveType:'none',
interpolateNulls:true,
chartArea:{left:0,top:10,width:"100%"}
};
var chart=new google.visualization.LineChart(document.getElementById('visits_by_day1'));chart.draw(data,options);}
An alternative answer that keeps the chartArea.width option at 100%: set the vAxis.textPosition option to "in", which will draw the labels inside the chartArea:
var options = {
title:'Title',
legend:{position:'bottom'},
curveType:'none',
interpolateNulls:true,
chartArea:{left:0,top:10,width:"100%"},
vAxis:{textPosition: 'in'}
};
That will give you the axis labels just inside the edge of the chartArea
A couple of things:
You have extra labels you don't need. Your code, as written won't work at all. Strip the number of labels down to the number of columns you have.
Adding strings, and hoping they're interpreted as dates doesn't work well. Make it explicit.
Your chart area also excluded the vAxis labels.
Try the following:
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Day');
data.addColumn('number', 'Label 1');
data.addColumn('number', 'Label 2');
data.addColumn('number', 'Label 3');
data.addColumn('number', 'Label 4');
data.addColumn('number', 'Label 5');
data.addColumn('number', 'Label 6');
data.addRows([
[new Date('19 Aug 2013'),1,0,0,0,0,0],
[new Date('20 Aug 2013'),2,2,2,0,0,0],
[new Date('21 Aug 2013'),5,5,0,6,5,0],
[new Date('22 Aug 2013'),1,4,3,2,0,0],
[new Date('23 Aug 2013'),0,0,0,4,0,0],
[new Date('24 Aug 2013'),3,2,1,2,0,15],
[new Date('25 Aug 2013'),1,2,1,2,0,0],
[new Date('26 Aug 2013'),3,1,2,1,0,0],
[new Date('27 Aug 2013'),0,0,3,2,0,1]
]);
var options = {
title:'Title',
legend:{position:'bottom'},
curveType:'none',
interpolateNulls:true,
//chartArea:{left:0,top:10,width:"100%"}
};
var chart=new google.visualization.LineChart(document.getElementById('visits_by_day1'));
chart.draw(data,options);
}
I have similar issue. But, in my case, I am NOT using chartArea option at all. Hence, I doubt #asgallant's explanation is correct.
The following is my code:
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
// Declare columns
data.addColumn('date', 'Date');
data.addColumn('number', 'MM8');
data.addColumn('number', 'S&P');
data.addRows([[new Date('01/03/2017'),98517.96,100278.03],[new Date('01/10/2017'),99606.27,100769.69],[new Date('01/17/2017'),97409.55,100724.83],[new Date('01/24/2017'),101596.78,101265.78],[new Date('01/31/2017'),103283.59,101212.49],[new Date('02/07/2017'),106136.74,101843.6],[new Date('02/14/2017'),102568.42,103820.0],[new Date('02/21/2017'),102253.38,105054.7],[new Date('02/28/2017'),98587.77,104977.42],[new Date('03/07/2017'),97623.69,105188.38],[new Date('03/14/2017'),99571.71,105057.8],[new Date('03/21/2017'),98026.27,104106.02],[new Date('03/28/2017'),100641.93,104752.24],[new Date('04/04/2017'),98556.17,104822.86],[new Date('04/11/2017'),99200.09,104539.5],[new Date('04/18/2017'),98695.49,104024.75],[new Date('04/25/2017'),102622.71,106086.42],[new Date('05/02/2017'),100472.95,106200.12],[new Date('05/09/2017'),98574.4,106455.5],[new Date('05/16/2017'),106159.07,106622.05],[new Date('05/23/2017'),104296.55,106522.12],[new Date('05/30/2017'),105035.88,107165.67],[new Date('06/06/2017'),107811.48,107894.94],[new Date('06/13/2017'),110670.8,108384.37],[new Date('06/20/2017'),110152.66,108236.92],[new Date('06/27/2017'),109044.62,107453.02],[new Date('07/03/2017'),108633.82,107880.72],[new Date('07/11/2017'),111239.13,107726.16],[new Date('07/18/2017'),113238.32,109284.19],[new Date('07/25/2017'),114516.89,110017.9],[new Date('08/01/2017'),114235.76,109983.26],[new Date('08/08/2017'),118583.33,109919.74],[new Date('08/15/2017'),117029.48,109461.84],[new Date('08/22/2017'),115461.52,108924.44],[new Date('08/29/2017'),113553.88,108648.63],[new Date('09/05/2017'),112772.29,109161.61],[new Date('09/12/2017'),113241.54,110877.3],[new Date('09/19/2017'),116056.94,111328.98],[new Date('09/26/2017'),114991.2,110893.29],[new Date('10/03/2017'),119650.15,112569.45],[new Date('10/10/2017'),119326.16,113282.73],[new Date('10/17/2017'),124032.6,113670.02],[new Date('10/24/2017'),125599.48,114103.94],[new Date('10/31/2017'),126408.48,114376.19],[new Date('11/07/2017'),126213.65,115059.27],[new Date('11/14/2017'),128414.88,114536.52],[new Date('11/21/2017'),132050.66,115431.9],[new Date('11/28/2017'),133242.73,116675.92],[new Date('12/05/2017'),130042.14,116788.29],[new Date('12/12/2017'),130220.51,118322.33],[new Date('12/19/2017'),133182.72,119093.34],[new Date('12/26/2017'),133313.89,119050.26],[new Date('01/02/2018'),133892.53,119730.23]
]);
var options = {
title: 'Portfolio Performance Comparison',
curveType: 'function',
legend: { position: 'bottom' },
hAxis: {
format: 'M/d/yy'
}
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
</script>
resulted graph
Related
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Male', 51],
['Female', 49],
]);
// Set options for Sarah's pie chart.
var options = {title:"",
width:600,
height:400,
is3D: true};
Above is my code. I'm looking to remove the value on the hover but keep the percentages in the pie chart. So on my chart it says Male: 51(51%) Female: 49(49%). It won't let me attach a picture since I'm fairly new so I apologize for that as well.
Just add one more configuration tooltip in options object:
var options = {
title:"",
width:600,
height:400,
tooltip: {
text: 'percentage'
},
is3D: true
};
Here is demo : https://jsfiddle.net/fs6tc5nq/1/
I am using Google Charts to generate charts with javascript. It works fine when I set multiple rows of data into my data array, but it does not work when I only have 1 row of data. Then I get the error "Cannot read property 'getTime' of null".
This array works fine:
[
["Date", "Amount"]
[Wed Oct 20 2019 00:00:00 GMT+200 (Mitteleuropäische Sommerzeit), 9576]
[Wed Oct 21 2019 00:00:00 GMT+200 (Mitteleuropäische Sommerzeit), 4810]
[Wed Oct 22 2019 00:00:00 GMT+200 (Mitteleuropäische Sommerzeit), 5058]
[Wed Oct 23 2019 00:00:00 GMT+200 (Mitteleuropäische Sommerzeit), 5381]
]
This array does not work:
[
["Date", "Amount"]
[Wed Oct 16 2019 00:00:00 GMT+200 (Mitteleuropäische Sommerzeit), 51099]
]
Ofcourse date is a date object.
// Set chart style
switch(chart_style) {
case "linien":
google.charts.load('current', {packages:['corechart'], 'language': 'de'});
break;
case "timeseries":
google.charts.load('current', {packages:['annotationchart'], 'language': 'de'});
break;
case "spalten":
google.charts.load('current', {packages:['corechart'], 'language': 'de'});
break;
case "tabelle":
google.charts.load('current', {packages: ['table'], 'language': 'de'});
break;
default:
google.charts.load('current', {packages:['corechart'], 'language': 'de'});
}
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable(dataArray);
var options = {
displayAnnotations: true,
animation:{
duration: 600,
easing: 'out',
startup: true
},
//theme: 'material',
curveType: 'function',
legend: { position: 'right' },
hAxis: {title: hAxisTitle, format: hAxisFormat},
vAxis: {title: "Besuchermenge für Abfrage", minValue: 0, maxValue: 0},
pointSize: 5,
series: {
0: { color: '#1f4e79'},
1: { color: '#FF8C00'},
},
explorer: {
axis: 'horizontal',
keepInBounds: false,
maxZoomIn:0.1,
maxZoomOut:4
},
language: 'de'
};
switch(chart_style) {
case "linien":
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
break;
case "timeseries":
var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));
break;
case "spalten":
var chart = new google.visualization.ColumnChart(document.getElementById("chart_div"));
break;
case "tabelle":
var chart = new google.visualization.Table(document.getElementById("chart_div"));
break;
default:
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
}
chart.draw(data, options);
}
Since I need at least 10 reputation to post images, I can only post links to the screenshots.
Screenshot of the array that works:
https://i.imgur.com/xHsEZrl.png
Screenshot of the working chart:
https://i.imgur.com/LZUt7zN.png
Screenshot of the array that does not work:
https://i.imgur.com/Qy0InSy.png
Screenshot of the chart with the array that does not work:
https://i.imgur.com/WRRIlRV.png
I would have expected the chart to show the single column in the middle, with the date under it as the x axis label.
this looks like some sort of bug.
as a work around, you can check the number of rows,
if there is only one, add an empty row to the data table.
this will allow the chart to draw properly.
you may also want to add a tick, else it will just display a wide range of years...
var ticks = null;
if (data.getNumberOfRows() === 1) {
data.addRow([null, null]);
ticks = [data.getValue(0, 0)];
}
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
["Date", "Amount"],
[new Date(2019, 9, 16), 51099]
]);
var ticks = null;
if (data.getNumberOfRows() === 1) {
data.addRow([null, null]);
ticks = [data.getValue(0, 0)];
}
console.log('abc');
var options = {
displayAnnotations: true,
animation:{
duration: 600,
easing: 'out',
startup: true
},
//theme: 'material',
curveType: 'function',
legend: { position: 'right' },
hAxis: {title: 'Title', format: 'MM/dd/yy', ticks: ticks},
vAxis: {title: "Besuchermenge für Abfrage", minValue: 0, maxValue: 0},
pointSize: 5,
series: {
0: { color: '#1f4e79'},
1: { color: '#FF8C00'},
},
explorer: {
axis: 'horizontal',
keepInBounds: false,
maxZoomIn:0.1,
maxZoomOut:4
},
language: 'de'
};
var chart = new google.visualization.ColumnChart(document.getElementById("chart_div"));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
Using this code from google line charts I get the following error all the time:
Uncaught SyntaxError: missing ) after argument list
code:
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawLogScales);
google.charts.setOnLoadCallback(drawLogScalesLTC);
function drawLogScales() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'PTH/s');
data.addRows([
[new Date(2016-12-15 21:23:07), 0.78],
[new Date(2016-12-14 21:23:07), 5.31],
[new Date(2016-12-13 21:23:07), 8.38],
[new Date(2016-12-12 21:23:07), 0.72],
[new Date(2016-12-11 21:23:07), 3.27],
[new Date(2016-12-10 21:23:07), 0.78],
]);
var options = {
hAxis: {
title: 'Time (h)',
logScale: true
},
vAxis: {
title: 'PTH/s',
logScale: false
},
colors: ['#a52714', '#097138']
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
I'm totally baffled where things go wrong. The synatx is fine I think.
The problem is actually how you're creating your dates. Since you're passing in a string you should declare a new date with quotes around the date string:
new Date('2016-01-01 01:01:01')
To get your code working I also cast each date to a string and changed the column type for the dates from 'number' to 'string'. See fiddle for working code.
https://jsfiddle.net/nz5yto73/
I have a google line chart I'm using and in many cases the numbers on the axis represent decimals point. Obviously since my data represents people it makes no sense to show the axis in decimal points. I would like for them to rounded up to whole numbers. So far I've been toiling with the format option in the xAxis like so.
var options = {
legend: 'none',
hAxis: {
title: 'Dogs',
format: 'long'
}
};
However, the points on the xAxis are represented as decimals. The jsfiddle can be found here. What's wrong and how can I fix this?
You could set custom format specifiers such as:
# (Digit placeholder)
0 (Zero placeholder)
Example
google.load('visualization', '1', { packages: ['corechart', 'line'] });
google.setOnLoadCallback(drawBasic);
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Dogs');
data.addRows([
[0, 0]
]);
var options = {
legend: 'none',
hAxis: {
title: 'Dogs',
format: '#'
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>
Another option is to specify hAxis.ticks:
Replaces the automatically generated X-axis ticks with the specified
array.
Example
google.load('visualization', '1', { packages: ['corechart', 'line'] });
google.setOnLoadCallback(drawBasic);
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Dogs');
data.addRows([
[0, 0]
]);
var options = {
legend: 'none',
hAxis: {
title: 'Dogs',
//format: '#'
ticks: [-1,0,1]
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>
I am trying to draw a baseline on a chart that uses date values to chart. Here is the code, and here is what the chart looks like:
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Assignment');
data.addColumn('date', 'Dummy');
data.addRows([
['A', new Date(2011,1,1)],
['B', new Date(2012,1,1)],
['C', new Date(2013,1,1)],
]);
// Create and draw the visualization.
new google.visualization.BarChart(document.getElementById('visualization')).
draw(data,
{
width:600, height:400,
hAxis: {baseline: new Date(2012,6,1), baselineColor: 'red'}
}
);
}
This is not the expected behavior -- the baseline is set to be on July 1st, 2012, yet it is appearing all the way to the left (January 1st, 2011).
If you do this with a non-date Axis chart, the behavior is different:
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Assignment');
data.addColumn('number', 'Dummy');
data.addRows([
['A', 1],
['B', 2],
['C', 3],
]);
// Create and draw the visualization.
new google.visualization.BarChart(document.getElementById('visualization')).
draw(data,
{
width:600, height:400,
hAxis: {baseline: 1.5, baselineColor: 'red'}
}
);
}
What the heck is going on here? Is it impossible to set the baseline of a date-axis chart?