Develop Reference

Making a Google line chart from spreadsheet

I have a very simple spreadsheet that looks like this: https://docs.google.com/spreadsheets/d/1T8eNrLpk7bOuvHGDojsHALzoxHHHoQ6iJ7AZIAnZntE/edit?usp=sharing
How can I have a HTML line chart like the one in the code snippet, but that uses my spreadsheet as data? I want the dates as the X-axis and the weight as the Y-axis. It should look something like in the image.
I have tried to follow the tutorials on https://developers.google.com/chart/interactive/docs/gallery/linechart but they are a bit too hard for me.
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawBasic);
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Dogs');
data.addRows([
[0, 0], [1, 10], [2, 23], [3, 17], [4, 18], [5, 9],
[6, 11], [7, 27], [8, 33], [9, 40], [10, 32], [11, 35],
[12, 30], [13, 40], [14, 42], [15, 47], [16, 44], [17, 48],
[18, 52], [19, 54], [20, 42], [21, 55], [22, 56], [23, 57],
[24, 60], [25, 50], [26, 52], [27, 51], [28, 49], [29, 53],
[30, 55], [31, 60], [32, 61], [33, 59], [34, 62], [35, 65],
[36, 62], [37, 58], [38, 55], [39, 61], [40, 64], [41, 65],
[42, 63], [43, 66], [44, 67], [45, 69], [46, 69], [47, 70],
[48, 72], [49, 68], [50, 66], [51, 65], [52, 67], [53, 70],
[54, 71], [55, 72], [56, 73], [57, 75], [58, 70], [59, 68],
[60, 64], [61, 60], [62, 65], [63, 67], [64, 68], [65, 69],
[66, 70], [67, 72], [68, 75], [69, 80]
]);
var options = {
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Popularity'
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

After reviewing Google Documentation on Charts and Line Charts in specific, I was able to create a conclusive snippet for you.
Firstly, find below all links I've searched to get to the conclusion:
Google Line Chart & Options
Loading Google Spreadsheets
Google Charts Query
The idea is to allow the library to parse the URL using a Query and give options to the draw() call. Using the response handler, we can retrieve the DataTable using getDataTable.
Since Stackoverflow has a strict CORS policy, follow FiddleJS.

Drawing a line from the first point to last point in Google Charts [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I've built this chart using Google Charts API.
I would like to draw a line from the first point to the last one to obtain the (hand made) following.
How can I achieve this ?
Thanks!

this can be achieved by adding another column, or series, to the data table.
once the data has loaded,
add another column to the data table for the new series.
data.addColumn('number', 'y1');
then we can set value of the first and last rows to the same value as the first series.
data.setValue(0, 2, data.getValue(0, 1));
data.setValue(data.getNumberOfRows() - 1, 2, data.getValue(data.getNumberOfRows() - 1, 1));
in order to draw an actual line between the two points,
we need to set the following option...
var options = {
interpolateNulls: true
};
this will allow the line to connect the two points.
see following working snippet...
google.charts.load('current', {
packages:['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('number', 'x');
data.addColumn('number', 'y0');
data.addRows([
[0, 0], [1, 10], [2, 23], [3, 17], [4, 18], [5, 9],
[6, 11], [7, 27], [8, 33], [9, 40], [10, 32], [11, 35],
[12, 30], [13, 40], [14, 42], [15, 47], [16, 44], [17, 48],
[18, 52], [19, 54], [20, 42], [21, 55], [22, 56], [23, 57],
[24, 60], [25, 50], [26, 52], [27, 51], [28, 49], [29, 53],
[30, 55], [31, 60], [32, 61], [33, 59], [34, 62], [35, 65],
[36, 62], [37, 58], [38, 55], [39, 61], [40, 64], [41, 65],
[42, 63], [43, 66], [44, 67], [45, 69], [46, 69], [47, 70],
[48, 72], [49, 68], [50, 66], [51, 65], [52, 67], [53, 70],
[54, 71], [55, 72], [56, 73], [57, 75], [58, 70], [59, 68],
[60, 64], [61, 60], [62, 65], [63, 67], [64, 68], [65, 69],
[66, 70], [67, 72], [68, 75], [69, 80]
]);
data.addColumn('number', 'y1');
data.setValue(0, 2, data.getValue(0, 1));
data.setValue(data.getNumberOfRows() - 1, 2, data.getValue(data.getNumberOfRows() - 1, 1));
var options = {
interpolateNulls: true
};
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 Chart Tooltip position issue

I have displayed the line chart using google chart. But the tool-tip is having position issue. I have looked for the solution but i could not get any solution for that. This is my code. Please give me solution.
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Price');
data.addRows([
[0, 0],
[1, 10],
[2, 23],
[3, 17],
[4, 18],
[5, 9],
[6, 11],
[7, 27],
[8, 33],
[9, 40],
[10, 32],
[11, 35],
[12, 30],
[13, 40],
[14, 42],
[15, 47],
[16, 44],
[17, 48],
[18, 52],
[19, 54],
[20, 42],
[21, 55],
[22, 56],
[23, 57],
[24, 60],
[25, 50],
[26, 52],
[27, 51],
[28, 49],
[29, 53],
[30, 55],
[31, 60],
[32, 61],
[33, 59],
[34, 62],
[35, 65],
[36, 62],
[37, 58],
[38, 55],
[39, 61],
[40, 64],
[41, 65],
[42, 63],
[43, 66],
[44, 67],
[45, 69],
[46, 69],
[47, 70],
[48, 72],
[49, 68],
[50, 66],
[51, 65],
[52, 67],
[53, 70],
[54, 71],
[55, 72],
[56, 73],
[57, 75],
[58, 70],
[59, 68],
[60, 64],
[61, 60],
[62, 65],
[63, 67],
[64, 68],
[65, 69],
[66, 70],
[67, 72],
[68, 75],
[69, 80]
]);
var options = {
'height': 200,
trendlines: {
0: {
color: 'green',
tooltip: false,
labelInLegend: 'Trendline',
visibleInLegend: true
}
},
title: '2 Year Historical Daily Stock Price',
chartArea: {
left: 70,
width: "60%"
},
legend: {
position: 'right',
textStyle: {
fontSize: 8
}
},
timeline: {
groupByRowLabel: true
},
hAxis: {
title: 'Date (drag to zoom, right click to reset)',
format: 'MMM yy',
textStyle: {
fontSize: 5
},
gridlines: {
count: 6
}
},
vAxis: {
title: 'USD $'
},
explorer: {
axis: 'horizontal',
actions: ['dragToZoom', 'rightClickToReset']
}
};
var chart = new google.visualization.LineChart(document.getElementById('previewTwoYearChart'));
chart.draw(data, options);
}

Remove the following options from the js
tooltip: { isHtml: true }
isStacked: 'relative'
and add the following css in stylesheet
text {
font: 8px sans-serif;
pointer-events: none;
}
Hopefully this solution would be worked

How implement the following chart in latest google chart api?

Any ideas how to implement the x and y values on the same row ?
Currently im up to this and have quite big problem to set the x and y on two rows 1 under other.
var options = {
isStacked:true,
hAxis: {
gridlines: {
color: '#fff',
count: 8
},
showTextEvery: 1,
title: 'КМ/Ч'
},
vAxis: {
gridlines: {
color: '#fff',
count: 8
},
minorGridlines: {
color: 'red'
},
viewWindowMode: 'explicit',
viewWindow: {
max: 100
},
title: 'ЧАС'
},
axisTitlesPosition: 'out',
axes: {
y: {
0: { side: 'top'}
}
},
legend: {
position: 'none'
},
annotations: {
},
backgroundColor: {
stroke: '#fff',
fill: '#fff',
strokeWidth: 0
}
};
http://jsfiddle.net/Qquse/1645/

If I understand your question, you want to plot both values from each row in the array.
The problem is the LineChart is looking for some sort of label in the first column to use on the h-axis.
Here, I use a view to create a duplicate column for the row labels...
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Dogs');
data.addRows([
[1, 10], [2, 23], [3, 17], [4, 18], [5, 9], [11, 35],
[6, 11], [7, 27], [8, 33], [9, 40], [10, 32], [11, 35],
[12, 30], [13, 40], [14, 42], [15, 47], [16, 44], [17, 48],
[18, 52], [19, 54], [20, 42], [21, 55], [22, 56], [23, 57],
[24, 60], [25, 50], [26, 52], [27, 51], [28, 49], [29, 53],
[30, 55], [31, 60], [32, 61], [33, 59], [34, 62], [35, 65],
[36, 62], [37, 58], [38, 55], [39, 61], [40, 64], [41, 65],
[42, 63], [43, 66], [44, 67], [45, 69], [46, 69], [47, 70],
[48, 72], [49, 68], [50, 66], [51, 65], [52, 67], [53, 70],
[54, 71], [55, 72], [56, 73], [57, 75], [58, 70], [59, 68],
[60, 64], [61, 60], [62, 65], [63, 67], [64, 68], [65, 69],
[66, 70], [67, 72], [68, 75], [69, 80]
]);
var view = new google.visualization.DataView(data);
view.setColumns([{calc: "stringify", sourceColumn: 0, type: "string"},0,1]);
var chart = new google.visualization.LineChart(document.getElementById('chart'));
chart.draw(view, {});
}
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
<script src="https://www.google.com/jsapi"></script>
<div id="chart"></div>

google charts remove text on bottom

i am using google charts for displaying some user stats.
How can I remove text on bottom of google line chart?
Check in red circle
http://i49.tinypic.com/se3cpj.jpg

hAxis: { textPosition: 'none' }
View the related documentation here (search for "textPosition"): https://google-developers.appspot.com/chart/interactive/docs/gallery/linechart
So a full, simple example would be this:
google.charts.load('current', { packages: ['corechart', 'line'] });
google.charts.setOnLoadCallback(drawBasic);
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Dogs');
data.addRows([
[0, 0], [1, 10], [2, 23], [3, 17], [4, 18], [5, 9],
[6, 11], [7, 27], [8, 33], [9, 40], [10, 32], [11, 35],
[12, 30], [13, 40], [14, 42], [15, 47], [16, 44], [17, 48],
[18, 52], [19, 54], [20, 42], [21, 55], [22, 56], [23, 57],
[24, 60], [25, 50], [26, 52], [27, 51], [28, 49], [29, 53],
[30, 55], [31, 60], [32, 61], [33, 59], [34, 62], [35, 65],
[36, 62], [37, 58], [38, 55], [39, 61], [40, 64], [41, 65],
[42, 63], [43, 66], [44, 67], [45, 69], [46, 69], [47, 70],
[48, 72], [49, 68], [50, 66], [51, 65], [52, 67], [53, 70],
[54, 71], [55, 72], [56, 73], [57, 75], [58, 70], [59, 68],
[60, 64], [61, 60], [62, 65], [63, 67], [64, 68], [65, 69],
[66, 70], [67, 72], [68, 75], [69, 80]
]);
var options = {
hAxis: {
textPosition: 'none'
},
vAxis: {
title: 'Popularity'
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
Run the code yourself here: ​https://jsfiddle.net/p80uggL0/1/

Try changing x-axis label font color same as background color like this
chart.draw(daily, {
hAxis : {textColor: '#ffffff'},
[... your other options here ...]
});
if its not working use hAxis: {baselineColor: '#FFFFFF'} instead of textColor, anyone of these should work.

if it is PieChart, and then like this.
legend : { position : 'none' }
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities',
fontSize: 10,
legend : { position : 'none' }
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}