Sounds like what you want is the hAxis.slantedText and .slantedTextAngle
options to specify that the tick labels for the hAxis should be slanted.
You can override the heuristics that decide whether to use slantedText, and
then override the default angle with those two options. Try this:
var options = {
hAxis: {
slantedText: true,
slantedTextAngle: 90
}
}
On Sat, Apr 11, 2015 at 9:57 AM, 'Jon Orwant' via Google Chart API <
[email protected]> wrote:
> hAxis is for the horizontal axis; vAxis is for the vertical axis. Did you
> mean to use vAxis?
>
> Jon
>
> On Fri, Apr 10, 2015 at 8:12 PM, G Z <[email protected]> wrote:
>
>> Hello, I can't seem to get any of the options for my charts as far as
>> stylization to work. I'm trying a few different things like putting the
>> legend on the bottom and making haxis labels horizontal but no luck.
>>
>>
>>
>>
>>
>>
>>
>> <!DOCTYPE HTML>
>> <html>
>> <head>
>> <title>TheWayWardJourney</title>
>> <script src="http://.com/cynergi.js";></script>
>> <script src="
>> https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js";
>> ></script>
>> <script type="text/javascript" src="
>> https://www.google.com/jsapi";></script>
>> <link rel="stylesheet" href="
>> https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css";>
>> <link rel="stylesheet" href="
>> https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css
>> ">
>> <script src="
>> https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js";
>> ></script>
>> <script src="js/cookie.js"></script>
>> <script>
>>
>>
>> $(document).ready(function() {
>> $("#computer_info").html(html_insert);
>> $("#computer_stats").html(stats);
>> $("#profile_data").html(profile_data_html);
>> });
>>
>>
>>
>>
>> var username = '';
>> var first_name = '';
>> var last_name = '';
>> var profile_data_html = '';
>> var logged = '';
>> var cookie_token = cookie.get('token');
>> var user_data = Cynergi.get(':3000/user?token=eq.' + cookie_token);
>>
>>
>> $.each(user_data, function(i, item) {
>> username = item.username;
>> first_name = item.first_name;
>> last_name = item.last_name;
>> });
>> profile_data_html = username + '<br>' + first_name + '<br>' + last_name;
>>
>>
>>
>>
>>
>>
>> //if there is userdata then there is a valid login token for the user.
>> if (user_data != ''){
>>
>>
>> function updateData(callback) {
>> // this is retrieving rows from the db and looping through
>> them.
>> var data = Cynergi.get(':3000/computer_stats?order=time.asc'
>> );
>> var data_array = []
>> var data_arrayMem = []
>> var net_array = []
>>
>>
>> $.each(data, function(i, item) {
>> html_insert = 'Computer Name:' + item.computer_name +
>> '<br>Operating
>> System:' + item.operating_system + '<br>CPU Model: ' + item.cpu_model +
>> '<br>Cores
>> Assigned: ' + item.cores + '<br>CPU MHz: ' + item.cpu_mhz + '<br>CPU
>> Cache: ' + item.cpu_cache + '<br>Net Devices: ' + item.net_devices +
>> '<br>Devices:
>> ' + item.devices;
>>
>>
>> stats = 'Total Memory: ' + item.total_memory + '<br>Free
>> Memory:' + item.free_memory + '<br> Active Memory:' + item.active_memory
>> + '<br> Bounce Memory:' + item.bounce_memory + '<br> Buffered Memory:' +
>> item.buffers_memory + '<br> Locked Memory:' + item.locked_memory + '<br>
>> Swap Memory:' + item.swap_memory + '<br> Swap Free:' + item.
>> swapfree_memory
>>
>> var time = item.time;
>>
>>
>> data_array.push([
>> {v: time.toString()},
>> {v: parseInt(item.cpu_usage)},
>> {v: parseInt(((item.total_memory-item.free_memory) /
>> item.total_memory)*100)}
>> ]);
>>
>>
>> net_array.push([
>> {v: time.toString()},
>> {v: parseInt(item.net_devices.split("-")[0])},
>> {v: parseInt(item.net_devices.split("-")[1])}
>> ]);
>> });
>> callback(data_array,net_array);
>> $("#computer_info").html(html_insert);
>> $("#computer_stats").html(stats);
>> }
>>
>>
>> (function() {
>> google.load('visualization', '1.1', { packages: ['line',
>> 'corechart'] });
>> google.setOnLoadCallback(chartsLoaded);
>>
>>
>> var loadTracker = {
>> charts: false,
>> data: null
>> };
>>
>>
>> function maybeRenderChart() {
>> if (loadTracker.charts && loadTracker.data) {
>> drawChart(loadTracker.data[0], loadTracker.data[1])
>> }
>> }
>>
>>
>> function dataLoaded(data_array, net_array) {
>> loadTracker.data = [data_array, net_array];
>> maybeRenderChart()
>> }
>>
>>
>> function chartsLoaded() {
>> loadTracker.charts = true;
>> maybeRenderChart();
>> }
>>
>>
>> var chart1 = null;
>> var chart2 = null;
>>
>>
>> updateData(dataLoaded);
>>
>>
>> function drawChart(data_array, net_array) {
>>
>>
>> var data = new google.visualization.DataTable();
>> data.addColumn('string', 'Time');
>> data.addColumn('number', 'CPU Usage');
>> data.addColumn('number', 'Mem Usage');
>> data.addRows(data_array);
>>
>>
>> var options = {
>> chart: {title: "Playground's CPU/MEM Usage",subtitle
>> : 'you know you likie.'},
>> legend: { position: 'bottom' },
>> lineWidth: 5,
>> width: 500,
>> hAxis: {slantedText: true, slantedTextAngle: 90},
>> height: 300
>> };
>>
>> var chart = chart1 = chart1 || new google.charts.Line(
>> document.getElementById('chart'));
>> chart.draw(data, options);
>>
>>
>> // past here is the second chart this will be added to
>> the library later
>> var data = new google.visualization.DataTable();
>> data.addColumn('string', 'Time');
>> data.addColumn('number', 'Net TX');
>> data.addColumn('number', 'NET Rcv');
>> data.addRows(net_array);
>>
>>
>> var options = {
>> chart: { title: "Playground's Net Usage", subtitle: 'you
>> know you likie.'},
>> legend: { position: 'bottom' },
>> width: 500,
>> height: 300
>> };
>>
>>
>> var chart = chart2 = chart2 || new google.charts.Line(
>> document.getElementById('chartNet'));
>> chart.draw(data, options);
>>
>>
>> // Update the data and then draw the chart in 3 seconds.
>> setTimeout(function() { updateData(drawChart); }, 5000);
>>
>>
>> }})();
>> }
>>
>>
>> function logout(){
>> console.log('logout');
>> document.cookie = "token=0";
>> console.log(cookie.get('token'));
>> goHome();
>> }
>>
>>
>> function goHome() {
>> window.location="index.html"; // change url to your's
>> }
>>
>>
>> </script>
>> <style>
>> #topmid{
>> color:white;
>> }
>> html,body {
>> background: url(background.jpg) no-repeat center
>> center fixed;
>> -webkit-background-size: cover; /* For WebKit*/
>> -moz-background-size: cover; /* Mozilla*/
>> -o-background-size: cover; /* Opera*/
>> background-size: cover; /* Generic*/
>> }
>> </style>
>> </head>
>> <body style="background-color: #2c3e50;">
>>
>>
>>
>>
>> <div class="row">
>> <div id="profile_data" style="color:white;" class="col-md-2"></div>
>> </div>
>>
>>
>>
>>
>> <div class="row" style="margin-top:50px;margin-left:50px;margin-right:
>> 50px;">
>> <div id="topmid" class="col-md-2"><p style='text-align:left;align:
>> left;' id='computer_info'></p></div>
>> <div id="topmid" class="col-md-2"><p style='text-align:left;align:
>> left;' id='computer_stats'></p></div>
>> <div id="chart" class="col-md-4"></div>
>> <div id="chartNet"class="col-md-4"><div ></div>
>> </div>
>>
>> <p style='text-align:left;align:left;' id='updateStatus'></p>
>> <p style='text-align:left;align:left;' id='sentStatus'></p>
>> <p style='text-align:left;align:left;' id='deleteStatus'></p>
>> <p style='text-align:left;align:left;' id='messages'></p>
>> <button onClick="logout();" type='submit'> logout</button>
>> </body>
>> </html>
>>
>>
>>
>> --
>> You received this message because you are subscribed to the Google Groups
>> "Google Chart API" group.
>> To unsubscribe from this group and stop receiving emails from it, send an
>> email to [email protected].
>> To post to this group, send email to [email protected].
>> Visit this group at http://groups.google.com/group/google-chart-api.
>> For more options, visit https://groups.google.com/d/optout.
>>
>
> --
> You received this message because you are subscribed to the Google Groups
> "Google Chart API" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to [email protected].
> To post to this group, send email to [email protected].
> Visit this group at http://groups.google.com/group/google-chart-api.
> For more options, visit https://groups.google.com/d/optout.
>
--
Daniel LaLiberte <https://plus.google.com/100631381223468223275?prsrc=2> -
978-394-1058
[email protected] <[email protected]> 5CC, Cambridge MA
[email protected] <[email protected]> 9 Juniper Ridge
Road, Acton MA
--
You received this message because you are subscribed to the Google Groups
"Google Chart API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-chart-api.
For more options, visit https://groups.google.com/d/optout.
