CODEWITHSUNDEEP
javascripthtmlgraphgoogle-visualizationaxis
Aurax22
Aurax22

Reputation: 111

JS - How to rotate labels (hAxis) on Google Graphs (slantedText)?

I have been trying to simply rotate my hAxis on the following graph for long now. Tried several solutions explained below! Cant believe something that simple seems that hard to do. Source code below:

<html>

 <title>VM Allocation Performance</title>
 <meta http-equiv="refresh" content="30">

    <head>



        <script type="text/javascript" src="http://www.google.com/jsapi"></script>
        <script type="text/javascript">

        google.load("visualization", "1", {packages:["bar"]});
        google.setOnLoadCallback(drawChart);



            function drawChart() {
                var data = google.visualization.arrayToDataTable([
                ['09/12/2015 10:00:00',3.52],['09/12/2015 10:30:00',7.56],['09/12/2015 11:00:00',8.99],['09/12/2015 11:30:00',4.93],['09/12/2015 12:00:00',10.26],['09/12/2015 12:30:00',9.82],['09/12/2015 13:00:00',12.62],['09/12/2015 13:30:00',9.07],['09/12/2015 14:00:00',4.94],['09/12/2015 14:30:00',8.98],['09/12/2015 15:00:00',7.85],['09/12/2015 15:30:00',3.59],['09/12/2015 16:00:00',5.64]],true);              


            var options = {
                    chart: {
                            title: 'VM Allocation',
                            subtitle: 'Since Shift Start',
                    }
//I tried with slantedText: true here but while my graph was rendering, labels were not rotated!
                    };              

                var chart = new google.charts.Bar(document.getElementById('chart_div'));
                chart.draw(data, google.charts.Bar.convertOptions(options));
            }

        </script>

    </head>

<body>
    <div id='chart_div' style='width: 450px; height: 400px;'></div>
</body>

</html>

Here is what I tried so far:

I read the Google documentation, changed my code accordingly (because it is a "material" graph etc...) and still nothing.

I tried using the same hAxis block from this jsfiddle I found, no luck.

I went into a bit more details and saw on the Google doc that the option "slantedText" would work only on discrete axis, so I thought I had to change my hAxis type from Date/Time to String, I tried and did not succeed.

I kept on and tried using this solution from SO and while I can still render the graph, my date/time labels are still not showing entirely (which is why I want to rotate them).

Can anybody please help on this?

Upvotes: 2

Views: 4437

Answers (1)

Kevin Brown
Kevin Brown

Reputation: 8877

Change to a columnchart and not a bar. See http://jsfiddle.net/Swtv3/51/

function drawChart() {
var data = google.visualization.arrayToDataTable([
            ['09/12/2015 10:00:00',3.52],['09/12/2015 10:30:00',7.56],['09/12/2015 11:00:00',8.99],['09/12/2015 11:30:00',4.93],['09/12/2015 12:00:00',10.26],['09/12/2015 12:30:00',9.82],['09/12/2015 13:00:00',12.62],['09/12/2015 13:30:00',9.07],['09/12/2015 14:00:00',4.94],['09/12/2015 14:30:00',8.98],['09/12/2015 15:00:00',7.85],['09/12/2015 15:30:00',3.59],['09/12/2015 16:00:00',5.64]],true);              


        var options = {
                chart: {
                        title: 'VM Allocation',
                        subtitle: 'Since Shift Start',
                },
                    chartArea: {
   top: 28,
   height: '40%' 
},
                hAxis: {
    title: 'Sources', 
    slantedText: true
}
//I tried with slantedText: true here but while my graph was rendering, labels were not rotated!
                };              
 var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
 chart.draw(data, options); 
        }

    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);

enter image description here

Upvotes: 5

Related Questions