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.
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.
Here is my code:
var chart = [[''],['']];
chart[0][1]='Spearmint';
chart[1][1]='3.95';
var data = google.visualization.arrayToDataTable(chartArr);
var options = {
title: questions[i].getAttribute("desc"),
is3D: true,
width:600 //with or without this parameter
};
chart = new google.visualization.ColumnChart(document.getElementById('questionchart_' + questions[i].getAttribute("num")));
chart.draw(data, options);
It seems to be cutting off the legend text. You only need to reference the first graph
Here is an image:
Graph Image
If you look closely, you'll see the legends display Sp..... This is inaccurate as it should display the full name of the location (Spearmint).
Here is my DOM Element its using:
<div id="questionchart_1" style="width:750px"></div>
I have no idea how to resolve this issue.
The size of the chartArea needs to be adjusted according to the placement of the legend and the size of the labels that need to be displayed.
Also need to consider the size of the title, axis labels, etc...
Here, I've added a background color to help demonstrate...
google.charts.load('current', {
packages: ['corechart'],
callback: drawChart
});
function drawChart() {
var chartArr = [[''],['']];
chartArr[0][1] = 'Spearmint';
chartArr[1][1] = 3.95;
var data = google.visualization.arrayToDataTable(chartArr);
var options = {
chartArea: {
backgroundColor: 'cyan',
height: 320,
left: 32,
top: 40,
width: 434
},
height: 400,
legend: {
position: 'right'
},
title: 'Flavors',
width: 600
};
var chart = new google.visualization.ColumnChart(document.getElementById('questionchart_0'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="questionchart_0"></div>
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);
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'm using a ColumnChart to represent the elevation in a map, as suggested by Google.
However, the columns are separated by spaces, and that renders ugly white spaces between the
columns, like in Google's own example:
https://developers.google.com/maps/documentation/javascript/examples/elevation-paths
Is there a way to tell the column chart to make columns that fill up the whole space? I would like something like this:
http://4.bp.blogspot.com/-4I8oi3WqY5o/UIZnzbXql_I/AAAAAAAAAcE/GO4wl6I2-lM/s1600/Charts.png
I suspect that the only way is with lots of points.
My code:
var option = {
legend: 'none',
backgroundColor: 'transparent',
colors: ["#C9CFF5"],
titleColor: '#C9CFF5',
focusBorderColor: '#00AA00',
titleY: 'Elevation (m)',
bar: { groupWidth: '100%' }
}
// Build data
var data = new google.visualization.DataTable();
data.addColumn('string', 'Sample');
data.addColumn('number', 'Elevation (m):');
for (var i = 0; i < trackmarks.length; i++) {
data.addRow(['', trackaltis[i]]);
}
// Draw the chart using the data within its DIV.
chart = new google.visualization.ColumnChart(document.getElementById('elevation_chart'));
chart.draw(data, option);
My code is pretty standard: same as Google's, same result.
Thanks!
You can specify option:
bar: {groupWidth: "100%"}
bar.groupWidth: Percentage of the available width for each group (e.g. '20%'), where '100%' means that groups have no space between them
Update: That example uses old version of column charts which loads package columnchart
google.load("visualization", "1", {packages:["columnchart"]});
The latest code for column chart is loaded using corechart:
google.load('visualization', '1', {packages: ['corechart']});
Change that and example should work as expected without spaces.