Google chart chart graph to cover the whole month
Hi guys I have a google column chart that I go through a month and a year and will format the axis to show MMM yyyy format, but on the actual graph and google grid-lines chart insert the default day as 1 for the chart does not look nice ... I want a whole column to cover a whole month and I don't know how.
My code
static drawChartIssuesPerMonthForCompany(data) {
let dataTable = new google.visualization.DataTable();
dataTable.addColumn("date", "Months");
dataTable.addColumn("number", "Issue Count");
data.forEach(row => {
console.log(data);
dataTable.addRow([new Date(row.yearId, row.monthId - 1), row.issueCount]);
});
let chart = new google.visualization.ColumnChart(document.getElementById("detailedCharts"));
let options = {
title: "Monthly issues",
hAxis: {
title: "Months",
gridelines: {
count: -1
},
format: 'MMM yyyy'
},
vAxis: {
gridlines: { color: 'none' },
minValue: 0,
title: "Issue Count",
format: '#',
maxValue: 4
}
};
chart.draw(dataTable, options);
}
+3
source to share
1 answer
try using "string"
for the x axis, instead of"date"
dataTable.addColumn("string", "Months");
see next working snippet ...
google.charts.load('current', {
callback: drawChart,
packages:['corechart']
});
function drawChart() {
let data = [
{yearId: 2017, monthId: 2, issueCount: 9},
{yearId: 2017, monthId: 3, issueCount: 2},
{yearId: 2017, monthId: 4, issueCount: 8}
];
let dataTable = new google.visualization.DataTable();
dataTable.addColumn("string", "Months");
dataTable.addColumn("number", "Issue Count");
let formatDate = new google.visualization.DateFormat({
pattern: 'MMM yyyy'
});
data.forEach(row => {
dataTable.addRow([formatDate.formatValue(new Date(row.yearId, row.monthId - 1)), row.issueCount]);
});
let chart = new google.visualization.ColumnChart(document.getElementById("detailedCharts"));
let options = {
title: "Monthly issues",
hAxis: {
title: "Months",
gridelines: {
count: -1
}
},
vAxis: {
gridlines: { color: 'none' },
minValue: 0,
title: "Issue Count",
format: '#',
maxValue: 4
}
};
chart.draw(dataTable, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="detailedCharts"></div>
+1
source to share