Cusomizing haxis label in google charts

Question

I do have the following function to draw a chart, which represents some value for a given time. The horizontal axis should be the dates an not the numbers (which are important to make the trendline work). How can i achieved that?

chart_data contains of the following

[["Year","accept","error","total"],[{"v":0,"f":"20.09.2018"},1,3,4], 
[{"v":1,"f":"21.09.2018"},4,5,9],[{"v":2,"f":"22.09.2018"},0,7,7], 
[{"v":3,"f":"24.09.2018"},14,14,28],[{"v":4,"f":"25.09.2018"},2,2,4], 
[{"v":5,"f":"26.09.2018"},6,16,22]]

The js function looks like this:

function drawChart(chart_id, chart_title, chart_data) {

        var data = google.visualization.arrayToDataTable(
            chart_data
        );


        var options = {
            title: chart_title,

            hAxis: {
                title: 'Datum',
                titleTextStyle: {color: '#333'}},
            vAxis: {minValue: 0},
            trendlines: {
                0: {
                    type: 'polynomial',
                    degree: 3,
                },
                1:{
                    type: 'polynomial',
                    degree: 3,
                },
                2:{
                    type: 'polynomial',
                    degree: 3,
                } }    // Draw a trendline for data series 0.
        };

        var chart = new google.visualization.AreaChart(document.getElementById(chart_id));
        chart.draw(data, options);
    }

Answer 1

to customize the haxis labels, use option hAxis.ticks

in this case, we can pull the first value from each row to use for our ticks

var chart_data = [
  ["Year","accept","error","total"],
  [{"v":0,"f":"20.09.2018"},1,3,4],
  [{"v":1,"f":"21.09.2018"},4,5,9],
  [{"v":2,"f":"22.09.2018"},0,7,7],
  [{"v":3,"f":"24.09.2018"},14,14,28],
  [{"v":4,"f":"25.09.2018"},2,2,4],
  [{"v":5,"f":"26.09.2018"},6,16,22]
];

// extract first value from each row
var ticks = chart_data.map(function (row) {
  return row[0];
});
ticks.splice(0, 1); // remove column label

see following working snippet...

 google.charts.load('current', { packages: ['corechart'] }).then(function () { var chart_data = [ ["Year","accept","error","total"], [{"v":0,"f":"20.09.2018"},1,3,4], [{"v":1,"f":"21.09.2018"},4,5,9], [{"v":2,"f":"22.09.2018"},0,7,7], [{"v":3,"f":"24.09.2018"},14,14,28], [{"v":4,"f":"25.09.2018"},2,2,4], [{"v":5,"f":"26.09.2018"},6,16,22] ]; // extract first value from each row var ticks = chart_data.map(function (row) { return row[0]; }); ticks.splice(0, 1); // remove column label var data = google.visualization.arrayToDataTable(chart_data); var options = { title: 'chart_title', hAxis: { ticks: ticks, // custom labels title: 'Datum', titleTextStyle: {color: '#333'} }, vAxis: {minValue: 0}, trendlines: { 0: { type: 'polynomial', degree: 3, }, 1:{ type: 'polynomial', degree: 3, }, 2:{ type: 'polynomial', degree: 3, } } }; var chart = new google.visualization.AreaChart(document.getElementById('chart_div')); chart.draw(data, options); });

 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div>