Google chart legend shrinking text - javascript

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>

Related

How to change the bar chart orientation in Google Charts

I need to draw two bar charts facing each other in one page. (The chart on the left faces right, and the one on the right faces left).
But with Google Charts, I only managed to make both charts face right.
Is it possible to implement? What should I do?
using a 100% stacked chart, you can get the bars to align to the right
then color the first series transparent,
and manipulate the data to reveal the proper length
then when the chart's 'ready' event fires,
you can move around the chart elements,
such as the y-axis, and the order of the x-axis labels
first, you need to allow enough room on the left,
for the original y-axis labels to print
otherwise they will be cutoff, i.e.
Canis Major Dwarf vs. Canis Maj...
then need to leave enough room on the right,
by limiting the chartArea, otherwise cutoff and simply not visible, i.e.
Canis Major Dwarf vs. Canis M
might be easier, providing your own labels
this should give you something to tweak on...
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = new google.visualization.arrayToDataTable([
['Galaxy', 'Distance', 'Brightness'],
['Canis Major Dwarf', 10, 20],
['Sagittarius Dwarf', 20, 40],
['Ursa Major II Dwarf', 40, 50],
['Lg. Magellanic Cloud', 60, 80],
['Bootes I', 80, 120]
]);
var options = {
isStacked: 'percent',
colors: ['transparent', 'magenta'],
legend: {
position: 'bottom'
},
chartArea: {
left: 200,
width: 400
},
width: 800
};
var container = document.getElementById('dual_x_div');
var chart = new google.visualization.BarChart(container);
google.visualization.events.addListener(chart, 'ready', function () {
var labels = container.getElementsByTagName('text');
var hAxisLabels = [];
Array.prototype.forEach.call(labels, function (text, index) {
switch (text.getAttribute('text-anchor')) {
// move y axis labels
case 'end':
text.setAttribute('x', parseFloat(text.getAttribute('x')) + 540);
break;
// save x axis labels
case 'middle':
// save x position here
// otherwise, x position will change
// before you know where the next should have been
hAxisLabels.push({
text: text,
x: parseFloat(text.getAttribute('x'))
});
break;
}
});
// swap label positions
hAxisLabels.forEach(function (label, index) {
label.text.setAttribute('x', hAxisLabels[hAxisLabels.length - index - 1].x);
});
});
chart.draw(data, options);
};
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dual_x_div"></div>

Odd Space forming on top of HTML page

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?

Google Pie Chart : Uncaught Error: Container is not defined

I'm trying to display multiple google pie charts on the same page.
I get an Uncaught Error: Container is not defined error when doing so. How can I resolve this ?
My code :
function drawChart()
{
var completeness = $(this).attr('data-completeness');
var data = google.visualization.arrayToDataTable([
['Nom', 'Valeur'],
["Profil rempli à ", completeness],
['Manque', 100 - completeness]
]);
var options = {
...
};
var chart = new google.visualization.PieChart(this);
chart.draw(data, options);
}
$(function(){
$('.piechart').each(function(){
google.load('visualization', '1', {callback : drawChart, 'packages':['corechart']})
});
});
Alternatively, if I iterate in the drawchart function, the output of the piechart gets really weird, it's not an arc anymore but about 5% of an arc (which does not happen if I do not set the completeness dynamically) :
function drawChart(elem)
{
$(elem).each(function(){
{#var completeness = {{ completeness }};#}
var completeness = $(this).attr('data-completeness');
console.log(completeness);
var data = google.visualization.arrayToDataTable([
['Nom', 'Valeur'],
["Profil rempli à ", completeness],
['Manque', 100 - completeness]
]);
var options = {
backgroundColor: { fill:'transparent'},
pieSliceBorderColor : 'transparent',
pieHole: 0.8,
legend: {position: 'top'},
width: 220,
height: 220,
tooltip: {trigger: 'none'},
pieStartAngle: -90,
pieSliceTextStyle :{fontsize : 16, color: 'transparent'},
slices: {
0: { color: '#09b4ff'},
1: { color: '#444'}
},
chartArea : {width: '90%', height: '90%'}
};
var chart = new google.visualization.PieChart(this);
chart.draw(data, options);
});
}
$(function(){
google.load('visualization', '1', {callback : function(){drawChart('.piechart');}, 'packages':['corechart']})
});
You have to use the document get element id and post like below
var chart = new google.visualization.PieChart(document.getElementById('container'))
Make sure you have the same id (container) html div tag, otherwise this will lead error
The problem is the way you are calling var chart = new google.visualization.PieChart(this);
The issue is that you should be passing in an element on the page, but instead you are passing this which is likely simply window. If you have an element with an id of "container" that you wish to use, you can do this instead:
var chart = new google.visualization.PieChart(document.getElementById('container'));
You can check out an example here

Google Charts legend is not correctly displayed

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.

How to prevent popup in ColumnChart

I use a google maps ColumnChart to reprensent the elevation in a map.
I also use a mouseover to print info and show the correspondent position.
When a column in the chart is clicked, it popups an info balloon, like here:
http://4.bp.blogspot.com/-4I8oi3WqY5o/UIZnzbXql_I/AAAAAAAAAcE/GO4wl6I2-lM/s1600/Charts.png
This balloon is ok for desktops, but a pain for mobile (very hard to close, etc).
How can I completely disable it? It has to do with the second data column passed to the chart.
No balloons!
Thanks!
L.
EDIT
Code added by request:
var option = {
legend: 'none',
backgroundColor: 'transparent',
colors: ["#C9CFF5"],
titleColor: '#C9CFF5',
focusBorderColor: '#00AA00',
titleY: 'Elevation (m)',
tooltip: { trigger: 'none' },
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);

Categories