Reputation: 13
I'm currently making this graph with a ton of labels on the x access which make it look crowded, can someone please point me to the right direction where I can change it where the x-axis only shows 1990, 1995, 2000, 2005, 2010, and 2015. Thank you very much
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Moore', 'Edmond', 'Norman'],
['1990', 40332, 52380, 80435],
['1991', 40904, 53884, 81718],
['1992', 41554, 55477, 83300],
['1993', 42427, 57334, 85004],
['1994', 43151, 59470, 86932],
['1995', 43679, 61281, 88387],
['1996', 44241, 62892, 89562],
['1997', 44859, 64115, 91921],
['1998', 45233, 65145, 93073],
['1999', 45431, 66757, 94193],
['2000', 41477, 68607, 96882],
['2001', 42439, 69357, 98530],
['2002', 43909, 70644, 99222],
['2003', 45071, 71707, 100437],
['2004', 46595, 73254, 100983],
['2005', 48179, 75456, 102297],
['2006', 49966, 77172, 105622],
['2007', 51279, 78066, 106168],
['2008', 52852, 79890, 107636],
['2009', 54026, 81653, 109447],
['2010', 55396, 81466, 111380],
['2011', 56706, 82943, 113872],
['2012', 57840, 84936, 115629],
['2013', 58358, 86988, 118136],
['2014', 59018, 88656, 117693],
['2015', 60170, 90168, 119745],
['2016', 61081, 91469, 121512],
['2017', 61588, 91830, 122965],
['2018', 62103, 93127, 123471],
]);
var options = {
title: 'Population of Moore Oklahoma',
curveType: 'function',
legend: { position: 'bottom' },
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
Upvotes: 0
Views: 393
Reputation: 61230
if you use numbers --> 2010
-- instead of strings --? '2010'
then you can control which labels appear by using the ticks
option...
hAxis: {
ticks: [1990, 1995, 2000, 2005, 2010, 2015]
}
see following working snippet...
google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Moore', 'Edmond', 'Norman'],
[1990, 40332, 52380, 80435],
[1991, 40904, 53884, 81718],
[1992, 41554, 55477, 83300],
[1993, 42427, 57334, 85004],
[1994, 43151, 59470, 86932],
[1995, 43679, 61281, 88387],
[1996, 44241, 62892, 89562],
[1997, 44859, 64115, 91921],
[1998, 45233, 65145, 93073],
[1999, 45431, 66757, 94193],
[2000, 41477, 68607, 96882],
[2001, 42439, 69357, 98530],
[2002, 43909, 70644, 99222],
[2003, 45071, 71707, 100437],
[2004, 46595, 73254, 100983],
[2005, 48179, 75456, 102297],
[2006, 49966, 77172, 105622],
[2007, 51279, 78066, 106168],
[2008, 52852, 79890, 107636],
[2009, 54026, 81653, 109447],
[2010, 55396, 81466, 111380],
[2011, 56706, 82943, 113872],
[2012, 57840, 84936, 115629],
[2013, 58358, 86988, 118136],
[2014, 59018, 88656, 117693],
[2015, 60170, 90168, 119745],
[2016, 61081, 91469, 121512],
[2017, 61588, 91830, 122965],
[2018, 62103, 93127, 123471],
]);
var options = {
title: 'Population of Moore Oklahoma',
curveType: 'function',
legend: { position: 'bottom' },
hAxis: {
format: '0',
ticks: [1990, 1995, 2000, 2005, 2010, 2015]
}
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="curve_chart"></div>
Upvotes: 0