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?
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);
Related
How can I create multiple x Axis labels using the google charts API?
Im trying to create a bar graph right now with the main x axis labels as "products" and the individual bars relating to the products in question. However, I would like to segregate a set of 'n' products (data coming in from a database) by months.
Essentially I want a main X Axis label "product" and a dividing line between each set of products and a label underneath this set of bar graphs pertaining to the products grouping together each 'product set' by month
Thanks in advance to anyone who can help me with this!!
Sample double x-axis bar chart with google charts. Taken from their api documentation which can be found here:
Double x-axis bar chart
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = new google.visualization.arrayToDataTable([
['Galaxy', 'Distance', 'Brightness'],
['Canis Major Dwarf', 8000, 23.3],
['Sagittarius Dwarf', 24000, 4.5],
['Ursa Major II Dwarf', 30000, 14.3],
['Lg. Magellanic Cloud', 50000, 0.9],
['Bootes I', 60000, 13.1]
]);
var options = {
width: 800,
chart: {
title: 'Nearby galaxies',
subtitle: 'distance on the left, brightness on the right'
},
bars: 'horizontal', // Required for Material Bar Charts.
series: {
0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'.
1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'.
},
axes: {
x: {
distance: {label: 'parsecs'}, // Bottom x-axis.
brightness: {side: 'top', label: 'apparent magnitude'} // Top x-axis.
}
}
};
var chart = new google.charts.Bar(document.getElementById('dual_x_div'));
chart.draw(data, options);
};
</script>
</head>
<body>
<div id="dual_x_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
Not sure if that is exactly what you want to do, but if not let us know and we can modify this slightly.
I am creating a column chart with Google Charts API->http://plnkr.co/edit/GTg6MfMephB8lR3Kp66S?p=preview
but for some reason an odd space is forming on top of the page.
This started happening after I changed the Material Chart library :
google.load("visualization", "1.1", {packages:["bar"]});
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
var data = new google.visualization.DataTable();
and used a classic chart instead (I need it since the Material Library is not complete and it doesn't allow custom Tooltips):
google.load('visualization', '1', {packages: ['corechart', 'bar']});
var chart = new google.visualization.BarChart(document.getElementById('columnchart_material'));
var data = google.visualization.arrayToDataTable([]);
This is the original Material Chart -> http://plnkr.co/edit/dMVKt3ISlMtyiYmVeN1K?p=preview
What's wrong?
Add settings for the chart area, for example:
chartArea: { width: '100%', height: '99%' },
or:
chartArea: { left: 0, top: 30, width: 1200, height: 5450 },
A bit of a hack but the below will "sort it"...
#columnchart_material{margin-top:-500px}
Can't quite work out why it's happening in the first place though?
I have created a scatter chart using the Google Graphs API and all is fine apart from the fact that it will only so scatter points as decimal places if they're less than 10.
Here's the jsFiddle
google.load('visualization', '1.1', {packages: ['scatter']});
google.setOnLoadCallback(drawChart);
function drawChart () {
var data = google.visualization.arrayToDataTable([
["Period", "C Spencer Ltd"],
["1", -11.4],["2", 36.7],
["3", null],
["4", null],
["5", null]
]);
var options = {
chart: {
title: 'Scoring Trends',
subtitle: '*All LAG scores validated from Period 4'
},
width: 900,
height: 500
};
var chart = new google.charts.Scatter(document.getElementById('full_stacked_div'));
chart.draw(data, options);
}
I've tried using the NumberFormatter and the vAxis.format shown here all with no joy.
You should use google.charts.Scatter.convertOptions(options) in your draw (chart.draw(data, google.charts.Scatter.convertOptions(options));) when working with material charts, otherwise options like format won't work.
See the bottom part of Material Chart section.
Working fiddle with the option vAxis:{format:'decimal'} to accomplish what you're requesting.
EDIT:
Just want to note that this is a very common mistake and maybe someone should try to push google the emphasize the importance of this.
I am creating google chart and my legend is not being folded into pages.
My code is somthing like
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
google.load("visualization", "1.1", { packages: ["bar", "table"] });
var chart;
var table;
var graphOptions = {
title: 'Liczba ekspozycji w miesiącu',
pointSize: 5,
vAxis: { viewWindowMode: "explicit", viewWindow: { min: 0 } },
height: '500'
};
$(function() {
chart = new google.charts.Bar(document.getElementById('chart_div'));
});
var maxGraphLines = 50;
function refreshGraph(data) {
chart.draw(dataTableForGrap, google.charts.Bar.convertOptions(graphOptions));
}
</script>
<div id="chart_div" ></div>
and what I get is:
as you can see the labels for legend are going all the way down even behind the div. They should be paged into pages but this does not happen. Any help will be appreciated. Thanks.
The new "material" bar chart does not yet support paging or scrolling of legend items. Until it does, you might try using the corechart ColumnChart with the option { theme: 'material' } to get the material colors and fonts.
I'm trying to include a Google Pie Chart in my Rails app, and I've run into what I think is a particularly weird error.
The problem is, when I input numbers, the chart displays perfectly (showing my two input numbers as the two components of a pie equal to their sum), but when I try to feed it dynamic data, it seems to PICK UP the data but NOT USE it correctly -- instead displaying the two numbers as slivers in an otherwise blank chart. Code examples:
This works perfectly, turning into a pretty pie chart with the correct values (sold and left, below):
<div id="chart_div"></div>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var sold = 406;
var left = 38;
var data = google.visualization.arrayToDataTable([
['Pounds', 'Sold/Left'],
['Pounds Sold', sold],
['Left', left]
]);
var options = {
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
This, however, produces a chart with a hover showing (in this case) the exact same numbers (406, and 38), but the two chart sections are extremely small, accounting for about 1% of the chart's volume (as opposed to the ideal 100%). The remaining 99ish% of the chart is blank:
<div id="chart_div" data-sold=<%= #animal.pounds_sold.to_i %> data-left=<%= #animal.pounds_left.to_i %> ></div>
// Here, the numbers equal 406 and 38, as in the above.
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var sold = $(document).find('#chart_div').attr('data-sold');
var left = $(document).find('#chart_div').attr('data-left');
var data = google.visualization.arrayToDataTable([
['Pounds', 'Sold/Left'],
['Pounds Sold', sold],
['Left', left]
]);
var options = {
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
One possible clue is that when I hover over the sections in this erroring chart, although the hover says the right numbers (406, 38), it says these sections account for only 1 and 0.2 percent of the pie, respectively, even though the rest of the pie is blank (and has no hover/hover value).
Any ideas what's going on here? I'm guessing I'm committing some javascript/jquery crime, cause I'm fairly new to it, but I don't know what.
Thanks!
EDIT -- Another weird thing. I tried to see what would happen in a hybrid scenario with both dynamic numbers and straight numbers, i.e the below modification to the dynamic version above:
...
var other = 50;
var sold = $(document).find('#chart_div').attr('data-sold');
var left = $(document).find('#chart_div').attr('data-left');
var data = google.visualization.arrayToDataTable([
['Pounds', 'Sold/Left'],
['Pounds Sold', sold],
['Left', left],
['Test', other]
]);
...
This, inexplicably (to me), led to NO CHART AT ALL.
I think the issue is that you are specifying the "values" of each sliver as a string. Try defining them as an INT and your pie should work