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);
}
Related
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.
Customize google linechart to show box instead tool tip on hover. Kindly check the wireframe attached to understand the customization i need.
Tried google line charts examples , no option to add customized html inside function.
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);
}
I add a baseline to v-axis in Google Chart.
vAxis: {
title: 'Popularity', baseline: 20, baselineColor: 'red'
}
And I want to show the value of the baseline like this.
How can I do it?
This is the whole code in jsfiddle.
https://jsfiddle.net/ztn5fmnw/
need a few more options to get exactly as the posted image
but first, need to add another column to the data table
no data is needed in the new column,
just add it after the orignal data has been loaded
data.addColumn('number', 'y1');
the new series will be assigned to a second y-axis (on the right side)
this will allow customization of the second y-axis
series: {
1: {
targetAxisIndex: 1, // <-- assign y1 to second y-axis
visibleInLegend: false // <-- hide from legend
}
},
next, both y-axis will need the same range
use vAxis.viewWindow to set the range for both
vAxis: {
title: 'Popularity', baseline: 20, baselineColor: 'red',
viewWindow: {
min: 0,
max: 100
}
},
then use the vAxes option to customize only the second y-axis
use ticks to add the value of the baseline
vAxes: {
1: {
textStyle: {
color: 'red'
},
ticks: [20]
}
}
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');
var options = {
hAxis: {
title: 'Time'
},
series: {
1: {
targetAxisIndex: 1,
visibleInLegend: false
}
},
vAxis: {
title: 'Popularity', baseline: 20, baselineColor: 'red',
viewWindow: {
min: 0,
max: 100
}
},
vAxes: {
1: {
textStyle: {
color: 'red'
},
ticks: [20]
}
}
};
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>
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
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>