javascript - Google Charts: Line Chart with dynamic month names in hAxis - Stack Overflow

admin管理员组

文章数量:1391976

I'm trying to build a line chart with the following type of data points. Each data point consits of the folowing data:

• Date
• Value 1
• Value 2

An example for such a point would be: (2015-01-15, 'Value 1', 'Value 2')

I was able to bring these data into a Line Chart with two separate Lines, one for Value 1 and one for Value 2.

The problem now is the hAxis. I want to have the month names there dynamic to the data displayed. If I display data from January 2015 to March 2015, I want the hAxis to have 3 parts: January, February, March.

I tried the following approach:

hAxis: {
   format: 'MM'
}

This basically works, but it only separates my graph in 3 parts now with 04, 07 and 10. How could I solve to have every single month, that also exists in the data, in the hAxis with its month name ('March' instead of '03').

Here is a codepen of the problem: How you can see, the hAxis shows 04, 07, 10 instead of January, February, March, April, May, June, July, August, September, October, November, December.

Edit: Vadim Gremyachev provided the solution to the label formatting problem, i have to use 'MMMM' for having the full month names. The missing point now is to have all used months and not only 3.

Thank you!

I'm trying to build a line chart with the following type of data points. Each data point consits of the folowing data:

• Date
• Value 1
• Value 2

An example for such a point would be: (2015-01-15, 'Value 1', 'Value 2')

I was able to bring these data into a Line Chart with two separate Lines, one for Value 1 and one for Value 2.

The problem now is the hAxis. I want to have the month names there dynamic to the data displayed. If I display data from January 2015 to March 2015, I want the hAxis to have 3 parts: January, February, March.

I tried the following approach:

hAxis: {
   format: 'MM'
}

This basically works, but it only separates my graph in 3 parts now with 04, 07 and 10. How could I solve to have every single month, that also exists in the data, in the hAxis with its month name ('March' instead of '03').

Here is a codepen of the problem: http://codepen.io/anon/pen/XmXQEO How you can see, the hAxis shows 04, 07, 10 instead of January, February, March, April, May, June, July, August, September, October, November, December.

Edit: Vadim Gremyachev provided the solution to the label formatting problem, i have to use 'MMMM' for having the full month names. The missing point now is to have all used months and not only 3.

Thank you!

• javascript
• date
• charts
• google-visualization
• linechart

Share Improve this question Follow edited Sep 16, 2015 at 9:57 NthDegree asked Sep 16, 2015 at 8:14 NthDegreeNthDegree 1,34122 gold badges1515 silver badges3030 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

You could set hAxis.format to MMMM to display label as month names. And you could provide hAxis.ticks to manually specify X-axis labels, the following example demonstrates how to display all months labels

google.load('visualization', '1', { packages: ['corechart', 'line'] });
google.setOnLoadCallback(drawCurveTypes);

function drawCurveTypes() {
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Day');
    data.addColumn('number', 'Value 1');
    data.addColumn('number', 'Value 2');

    data.addRows([
        [new Date('2015-01-01'), 40, 50],
        [new Date('2015-01-15'), 20, 80],
        [new Date('2015-02-01'), 20, 80],
        [new Date('2015-02-15'), 60, 30],
        [new Date('2015-03-01'), 40, 50],
        [new Date('2015-03-15'), 20, 80],
        [new Date('2015-04-01'), 20, 80],
        [new Date('2015-04-15'), 60, 30],
        [new Date('2015-05-01'), 40, 50],
        [new Date('2015-05-15'), 20, 80],
        [new Date('2015-06-01'), 20, 80],
        [new Date('2015-06-15'), 60, 30],
        [new Date('2015-07-01'), 40, 50],
        [new Date('2015-07-15'), 20, 80],
        [new Date('2015-08-01'), 20, 80],
        [new Date('2015-08-15'), 60, 30],
        [new Date('2015-09-01'), 40, 50],
        [new Date('2015-09-15'), 20, 80],
        [new Date('2015-10-01'), 20, 80],
        [new Date('2015-10-15'), 60, 30],
        [new Date('2015-11-01'), 40, 50],
        [new Date('2015-11-15'), 20, 80],
        [new Date('2015-12-01'), 20, 80],
        [new Date('2015-12-15'), 60, 30],
    ]);

    var dateTicks = [];
    for (var m = 1; m <= 12; m++)
        dateTicks.push(new Date('2015-' + m + '-1'));

    var options = {
        hAxis: {
            format: 'MMMM',
            ticks: dateTicks
        }
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}

<script type="text/javascript" src="https://www.google./jsapi"></script>
<div id="chart_div"></div>

本文标签： javascriptGoogle Charts Line Chart with dynamic month names in hAxisStack Overflow