admin管理员组文章数量:1318570
I am trying to create a line chart using google material design. The chart is displaying correctly however, I want to change the format of the date shown on the chart.
I want only "Month, Year" (e.g. Jun, 1994) format instead of the current format which is "Month/Day/Year Hours:Seconds" How do I do that?
Also, I would like to increase the width of the line. The "linewidth" option is also not working.
How do I increase width of the line chart? Also, How do I control the number of labels on the x-axis?
The code for the chart is as shown below.
google.charts.load('current', {
'packages': ['line']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Year');
data.addColumn('number', 'DataSize');
data.addRows(22);
data.setValue(0, 0, new Date('1994-01-01'));
data.setValue(0, 1, 25506);
data.setValue(1, 0, new Date('1994-02-01'));
data.setValue(1, 1, 26819);
data.setValue(2, 0, new Date('1994-03-01'));
data.setValue(2, 1, 31685);
data.setValue(3, 0, new Date('1994-04-01'));
data.setValue(3, 1, 25611);
data.setValue(4, 0, new Date('1994-05-01'));
data.setValue(4, 1, 29976);
data.setValue(5, 0, new Date('1994-06-01'));
data.setValue(5, 1, 32590);
data.setValue(6, 0, new Date('1994-07-01'));
data.setValue(6, 1, 33309);
data.setValue(7, 0, new Date('1994-08-01'));
data.setValue(7, 1, 35825);
data.setValue(8, 0, new Date('1994-09-01'));
data.setValue(8, 1, 41973);
data.setValue(9, 0, new Date('1994-10-01'));
data.setValue(9, 1, 54067);
data.setValue(10, 0, new Date('1994-11-01'));
data.setValue(10, 1, 45895);
var formatter_medium = new google.visualization.DateFormat({
formatType: 'medium'
});
formatter_medium.format(data, 1);
var chart = new google.charts.Line(document.getElementById('dvRise'));
chart.draw(data, {
lineWidth: '3',
left: 0,
top: 0,
'height': '300',
'width': '450',
colors: ['#44AFED'],
legend: {
position: 'none'
},
hAxis: {}
});
}<script src=".js"></script>
<div style="text-align: center; height: 320px" id="dvRise"></div>I am trying to create a line chart using google material design. The chart is displaying correctly however, I want to change the format of the date shown on the chart.
I want only "Month, Year" (e.g. Jun, 1994) format instead of the current format which is "Month/Day/Year Hours:Seconds" How do I do that?
Also, I would like to increase the width of the line. The "linewidth" option is also not working.
How do I increase width of the line chart? Also, How do I control the number of labels on the x-axis?
The code for the chart is as shown below.
google.charts.load('current', {
'packages': ['line']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Year');
data.addColumn('number', 'DataSize');
data.addRows(22);
data.setValue(0, 0, new Date('1994-01-01'));
data.setValue(0, 1, 25506);
data.setValue(1, 0, new Date('1994-02-01'));
data.setValue(1, 1, 26819);
data.setValue(2, 0, new Date('1994-03-01'));
data.setValue(2, 1, 31685);
data.setValue(3, 0, new Date('1994-04-01'));
data.setValue(3, 1, 25611);
data.setValue(4, 0, new Date('1994-05-01'));
data.setValue(4, 1, 29976);
data.setValue(5, 0, new Date('1994-06-01'));
data.setValue(5, 1, 32590);
data.setValue(6, 0, new Date('1994-07-01'));
data.setValue(6, 1, 33309);
data.setValue(7, 0, new Date('1994-08-01'));
data.setValue(7, 1, 35825);
data.setValue(8, 0, new Date('1994-09-01'));
data.setValue(8, 1, 41973);
data.setValue(9, 0, new Date('1994-10-01'));
data.setValue(9, 1, 54067);
data.setValue(10, 0, new Date('1994-11-01'));
data.setValue(10, 1, 45895);
var formatter_medium = new google.visualization.DateFormat({
formatType: 'medium'
});
formatter_medium.format(data, 1);
var chart = new google.charts.Line(document.getElementById('dvRise'));
chart.draw(data, {
lineWidth: '3',
left: 0,
top: 0,
'height': '300',
'width': '450',
colors: ['#44AFED'],
legend: {
position: 'none'
},
hAxis: {}
});
}<script src="https://www.gstatic./charts/loader.js"></script>
<div style="text-align: center; height: 320px" id="dvRise"></div>4 Answers
Reset to default 6As for the Date Format, that can be set on the hAxis, which changes the hover value as well.
No need for a formatter...
As for lineWidth, that option doesn't appear to work for Material Charts, even with...
google.charts.Line.convertOptions
google.charts.load('current', {
'packages': ['line']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Year');
data.addColumn('number', 'DataSize');
data.addRows(22);
data.setValue(0, 0, new Date('1994-01-01'));
data.setValue(0, 1, 25506);
data.setValue(1, 0, new Date('1994-02-01'));
data.setValue(1, 1, 26819);
data.setValue(2, 0, new Date('1994-03-01'));
data.setValue(2, 1, 31685);
data.setValue(3, 0, new Date('1994-04-01'));
data.setValue(3, 1, 25611);
data.setValue(4, 0, new Date('1994-05-01'));
data.setValue(4, 1, 29976);
data.setValue(5, 0, new Date('1994-06-01'));
data.setValue(5, 1, 32590);
data.setValue(6, 0, new Date('1994-07-01'));
data.setValue(6, 1, 33309);
data.setValue(7, 0, new Date('1994-08-01'));
data.setValue(7, 1, 35825);
data.setValue(8, 0, new Date('1994-09-01'));
data.setValue(8, 1, 41973);
data.setValue(9, 0, new Date('1994-10-01'));
data.setValue(9, 1, 54067);
data.setValue(10, 0, new Date('1994-11-01'));
data.setValue(10, 1, 45895);
var chart = new google.charts.Line(document.getElementById('dvRise'));
chart.draw(data, google.charts.Line.convertOptions({
lineWidth: 10,
left: 0,
top: 0,
'height': '300',
'width': '450',
colors: ['#44AFED'],
legend: {
position: 'none'
},
hAxis: {format: 'MMM, yyyy'}
}));
}<script src="https://www.gstatic./charts/loader.js"></script>
<div style="text-align: center; height: 320px" id="dvRise"></div>try this..
var date_formatter = new google.visualization.DateFormat({
pattern: "MMM dd, yyyy"
});
date_formatter.format(data_table, 0);
You can set your format in hAxis options while drawing chart
ex
// If the format option matches, change it to the new option,
// if not, reset it to the original format.
options.hAxis.format === 'M/d/yy' ?
options.hAxis.format = 'MMM dd, yyyy' :
options.hAxis.format = 'M/d/yy';
chart.draw(data, options);
Working example https://jsfiddle/api/post/library/pure/
Try This
function convertDate(inputFormat) {
function pad(s) { return (s < 10) ? '0' + s : s; }
var d = new Date(inputFormat);
return [pad(d.getDate()),pad(d.getMonth()+1),d.getFullYear()].join('/');
}
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Year');
data.addColumn('number', 'DataSize');
data.addRows(22);
data.setValue(0, 0, convertDate('1994-01-01'));
data.setValue(0, 1, 25506);
data.setValue(1, 0, convertDate('1994-02-01'));
data.setValue(1, 1, 26819);
data.setValue(2, 0, convertDate('1994-03-01'));
data.setValue(2, 1, 31685);
data.setValue(3, 0, convertDate('1994-04-01'));
data.setValue(3, 1, 25611);
data.setValue(4, 0, convertDate('1994-05-01'));
data.setValue(4, 1, 29976);
data.setValue(5, 0, convertDate('1994-06-01'));
data.setValue(5, 1, 32590);
data.setValue(6, 0, convertDate('1994-07-01'));
data.setValue(6, 1, 33309);
data.setValue(7, 0, convertDate('1994-08-01'));
data.setValue(7, 1, 35825);
data.setValue(8, 0, convertDate('1994-09-01'));
data.setValue(8, 1, 41973);
data.setValue(9, 0, convertDate('1994-10-01'));
data.setValue(9, 1, 54067);
data.setValue(10, 0, convertDate('1994-11-01'));
data.setValue(10, 1, 45895);
var formatter_medium = new google.visualization.DateFormat({
formatType: 'medium'
});
In the convert date function you can change the format of your date as you require in the output
本文标签： javascriptHow to change date format in google material design line chartStack Overflow
版权声明：本文标题：javascript - How to change date format in google material design line chart? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742047760a2417890.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论