Google Charts Y轴未排序

Question

I try to use Google Charts in one of my projects. Everything works pretty good, but my Y-Axis is completely unsorted.

This is the actual code I use to display my chart:

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    google.charts.load('current', { 'packages': ['corechart', 'bar'] });

    google.charts.setOnLoadCallback(function () {
        var title = 'Total Sales By Market and Year';
        var subtitle = 'Cincinnati, Cleveland, Columbus, and Dayton';
        var dataTable = new google.visualization.DataTable(
            {"cols":[{"label":"UsageDates","type":"string"},{"label":"C1","type":"string"},{"label":"C2","type":"string"},{"label":"C3","type":"string"},{"label":"C4","type":"string"}],"rows":[{"c":[{"v":"14.06.2016"},{"v":0},{"v":0},{"v":6},{"v":7}]},{"c":[{"v":"15.06.2016"},{"v":50},{"v":0},{"v":0},{"v":0}]},{"c":[{"v":"16.06.2016"},{"v":0},{"v":13},{"v":1},{"v":3}]},{"c":[{"v":"20.06.2016"},{"v":5},{"v":7},{"v":0},{"v":0}]}]}
        );

        drawBarChart('chart_div', title, subtitle, dataTable);
        //drawColumnChart('chart', title, dataTable);
    });

    function drawColumnChart(elementId, title, dataTable) {
        var options = {
            title: title,
            vAxis: { format: 'decimal' }
        };
        var chart = new google.visualization.ColumnChart(document.getElementById(elementId));
        chart.draw(dataTable, options);
    }
</script>

The result looks a bit strange, I think the values for the Y-Axis aren't sorted but are taken as they come in. I hope someone can help me out on this.

Answer 1

Try changing the cols definitions for C1..C4 from "string" to "number" to match the data you provided.

"cols":[{"label":"UsageDates","type":"string"},{"label":"C1","type":"number"},{"label":"C2","type":"number"},{"label":"C3","type":"number"},{"label":"C4","type":"number"}]

Codepen example