Google Charts -- Axis Values overlapping and how to avoid

Question

How do I avoid this axis overlap in google charts? I am working with a large data set and not sure what to do to solve this issue. I am using a large number of dates for the x axis. The options I use for my chart are

var options = {
    tooltip: {
        trigger: 'both',
    },
    width: 1900,
    height: 400,
    vAxis: { 'title': 'Volume' },
    crosshair: { trigger: 'both'}
};

EDIT:: PHP creation of the containers

if( isset($db_graph_query)){
    while($row = mysqli_fetch_array($db_graph_query)) {
        $rowcount2++;
        // removed the hard coded column set and made it driven off of the array below
        // could have pulled it from the $cols array above, but there might be columns that we don't wish to show
        echo "                                <tr>";
        $colindex = 0;
        foreach( $cols as $column_name ) {
            $style = "";
            $val = $row[$column_name];
            if ( isset($column_callback)) {
                $style=$column_callback($colindex, $val);
            }
            if ($colindex == 0) {
                echo "<td style='text-align: left;  width: 1pt;'><a href='#' class='toggle' onClick='drawChart(\"$val\");'>$val</a></td>";
                $tempval = $val;
            } else {
                echo "<td $style>$val</td>";
            }
            $colindex++;
        }
        echo "</tr>";
        echo "<tr class='tablesorter-childRow'>";
            echo "<td colspan='12'>";
                echo "<div id='$tempval' style='height: 400px;'></div>";
            echo "</td>";
        echo "</tr>";
    }
}

EDIT:: Draw Chart Script, creates the chart options, grabs data from SQL DB and adds into the data:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    google.charts.load('current', {'packages':['corechart']});
    function drawChart(inputname) {
        var data = new google.visualization.DataTable();
            data.addColumn('string', 'Name');
            data.addColumn('string', 'RunDate');
            data.addColumn('number', 'Runs');
            data.addColumn('number', 'Fails');
            data.addRows([
                <?php
                    $dbName = "mydb";
                    $config = parse_ini_file("configfile.ini",true);
                    $dbUser = $config["DB"]["db_user"];
                    $dbServer = $config["DB"]["db_ip"];
                    $dbPassword = $config["DB"]["db_pass"];

                    $con = mysql_connect($dbServer, $dbUser, $dbPassword);

                    if (!$con) {
                        die('Could not connect: ' . mysql_error());
                    }

                    mysql_select_db($dbName, $con);
                    $sql = mysql_query("SELECT * From MyTestTable");

                    $output = array();

                    while($row = mysql_fetch_array($sql)) {
                        // create a temp array to hold the data
                        $temp = array();

                        // add the data
                        $temp[] = '"' . $row['Name'] . '"';
                        $temp[] = '"' . $row['RunDate'] . '"';
                        $temp[] = (int) $row['Runs'];
                        $temp[] = (int) $row['FailCount'];
                        // implode the temp array into a comma-separated list and add to the output array
                        $output[] = '[' . implode(', ', $temp) . ']';
                    }
                    // implode the output into a comma-newline separated list and echo
                    echo implode(",\n", $output);

                    mysql_close($con);
                ?>
        ]);
        var view = new google.visualization.DataView(data);
        view.setRows(data.getFilteredRows([
            {column: 0, value: inputname}
        ]));
        view.setColumns([1,2,3]);

            var options = {
                tooltip: {
                    trigger: 'both',
                },
                vAxis: { 'title': 'Volume' },
                crosshair: { trigger: 'both'},
                width: 1900,
                height: 400
            };

        var chart = new google.visualization.LineChart(document.getElementById(inputname));
        chart.draw(view, options);
    }
</script>

Answer 1

The horizontal axis ticks should not be overlapping at all, and I believe the only way this could be happening is if your chart is not visible at the time you draw it, in which case the chart thinks the ticks don't take up any space and can be packed in as dense as possible. Slanting or alternating would not necessarily help until you get down to the minimum spacing constraint.

So the only real solution, at this time, is to make sure your chart is visible when you draw it.

Answer 2

try using option for slanted text...

hAxis: {slantedText: true}