I am using google pie charts, all is working fine but legend label on right side is cut off.
there is also no option in google API to control these labels. here is documentations
https://developers.google.com/chart/interactive/docs/gallery/piechart#configuration-options
for whiteHat
please see here are images..
1st with hide div
and a div not hide...
the legend would normally wrap, see following working snippet,
using the options shown in the attached image
google.charts.load('current', {
callback: function () {
var container = document.getElementById('chart_div');
var chart = new google.visualization.PieChart(container);
var data = google.visualization.arrayToDataTable([
['Education', 'People'],
['less than high school', 10],
['high school', 10],
['college associate', 10],
]);
var options = {
width: '470',
height: '450',
chartArea: {
width: '80%',
height: '80%',
left: 100,
},
pieSliceTextStyle: {
color: 'white',
fontSize: '17.5'
},
colors: ['#90c458', '#ff7f66', '#ffce55', '#52c2e8']
};
chart.draw(data, options);
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
Related
I'm using angular 6 and I want to draw a column chart of Google. I found below codes from documantation but I don't know how to use it in my app?
html
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="top_x_div" style="width: 800px; height: 600px;"></div>
js
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = new google.visualization.arrayToDataTable([
['Move', 'Percentage'],
["King's pawn (e4)", 44],
["Queen's pawn (d4)", 31],
["Knight to King 3 (Nf3)", 12],
["Queen's bishop pawn (c4)", 10],
['Other', 3]
]);
var options = {
width: 800,
legend: { position: 'none' },
chart: {
title: 'Chess opening moves',
subtitle: 'popularity by percentage' },
axes: {
x: {
0: { side: 'top', label: 'White to move'} // Top x-axis.
}
},
bar: { groupWidth: "90%" }
};
var chart = new google.charts.Bar(document.getElementById('top_x_div'));
// Convert the Classic options to Material options.
chart.draw(data, google.charts.Bar.convertOptions(options));
};
You need to first declare in your component like this:
declare var google:any;
then your component will know what your are refering to when you call
google.charts.load..
Everything else looks good..
I've run into a problem creating a bar chart with google charts.
Which is if you're creating a dynamic chart and there's a low amount of rows, the individual bars will be too thick.
I understand that this question has been asked, the problem with the awnser that has been most frequent is that it does not work if there is only a single bar in the chart, that awnser is:
to input bar: {groupWidth: <value>}
I have actually also found an awnser for if there is a single bar in the chart which is to insert an empty bar, so groupWidth works, but there are two problems with this solution, which are:
-the bar will not be centered
-and it will have an undefined title.
enter image description here
My question is, how can I set the maxWidth of a bar in google charts without using groupWidth.
also here is the code for my google chart
$(document).ready(function() {
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(chartCreate);
function chartCreate() {
data = new google.visualization.DataTable();
data.addColumn('string');
data.addColumn('number', 'Movimentos');
data.addRows([[ "ola", 4 ]]);
var options = {
height: 405,
width: 400,
legend: {
position: 'none'
},
titleTextStyle: {
fontSize: '24',
bold: 'true',
color: '#242354'
},
bar: {groupWidth: "80%"},
colors: ['#242354']
};
var chart = new google.charts.Bar(document.getElementById('graph'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
});
you can use two additional bars to center,
use a space for the first column to avoid undefined
[' ', null],
['ola', 4],
[' ', null]
otherwise, bar.groupWidth will not work
it's actually reported here as not working period, for material charts...
Tracking Issue for Material Chart Feature Parity
see following working snippet...
google.charts.load('current', {
packages: ['bar']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('string');
data.addColumn('number', 'Movimentos');
data.addRows([
[' ', null],
['ola', 4],
[' ', null]
]);
var options = {
height: 405,
width: 400,
legend: {
position: 'none'
},
titleTextStyle: {
fontSize: '24',
bold: 'true',
color: '#242354'
},
bar: {groupWidth: "80%"},
colors: ['#242354']
};
var chart = new google.charts.Bar(document.getElementById('graph'));
chart.draw(data, google.charts.Bar.convertOptions(options));
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="graph"></div>
how to increase Google chart y axis width. pls find the image. left side full text was not comes properly. please guide me. how to increase Google chart y axis width
need to adjust the size of the chart and chartArea in the options
to leave room for the y-axis labels on left, use chartArea.left
to leave room for the title on top, use chartArea.top
see following example, added colors to highlight each area...
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['Category', 'Score'],
['APPLYING LEADERSHIP TECHNIQUES', 40],
['ASSERTIVENESS', 30],
['COACHING, COUNSELING, TEACHING', 10],
['CONFLICT MANAGEMENT', 20]
]);
var options = {
// adjust chart size
height: 600,
width: 800,
chartArea: {
// adjust chart area size
left: 300,
top: 40,
height: 500,
width: 480,
backgroundColor: 'magenta'
},
backgroundColor: 'cyan',
colors: ['lime'],
legend: {
position: 'bottom'
},
title: 'Title'
};
var chart2 = new google.visualization.BarChart(document.getElementById('barchart_core'));
chart2.draw(data, options);
},
packages: ['bar', 'corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="barchart_core"></div>
I use code from example page to create horizontal bars chart:
Option backgroundColor work for other chart types, like this and that.
Is there are way to change background color for Bars charts?
google.load('visualization', '1.1', {packages:['bar']});
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.arrayToDataTable([
['Opening Move', 'Percentage'],
["King's pawn (e4)", 44],
["Queen's pawn (d4)", 31],
["Knight to King 3 (Nf3)", 12],
["Queen's bishop pawn (c4)", 10],
['Other', 3]
]);
var options = {
backgroundColor: { fill: '#000' },//this is not working
title: 'Chess opening moves',
width: 900,
legend: { position: 'none' },
chart: { title: 'Chess opening moves',
subtitle: 'popularity by percentage' },
bars: 'horizontal', // Required for Material Bar Charts.
axes: {
x: {
0: { side: 'top', label: 'Percentage'} // Top x-axis.
}
},
bar: { groupWidth: "90%" },
};
var chart = new google.charts.Bar(document.getElementById('top_x_div'));
chart.draw(data, options);
}
google.setOnLoadCallback(drawVisualization);
<script src="http://www.google.com/jsapi?fake=.js"></script>
<div id="top_x_div"></div>
chart
You're using a Material Bar chart (See the relevant documentation here.)
See the comment at the end of the documentation paragraph :
The Material Charts are in beta. The appearance and interactivity are
largely final, but the way options are declared is not. If you are
converting a Classic Bar Chart to a Material Bar Chart, you'll want to
replace this line:
chart.draw(data, options);
...with this:
chart.draw(data, google.charts.Bar.convertOptions(options));
So if you want your standard options taken into account you need to wrap them with google.charts.Bar.convertOptions().
Have a try, it works great. See a jsfiddle of it here.
I am using a Google Pie Chart and have a problem modifying it. After many complicated calculations I get a percentage value, say 67%. I want that single percentage value to be shown in pie/donut chart.
My HTML code is
<div id="chart_div"></div>
My Javascript code is
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Category', 'Value'],
['Foo', 67]
]);
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, {
height: 400,
width: 600,
pieHole: 0.5,
pieSliceTextStyle: {
color: '#000000'
}
});
}
google.load('visualization', '1', {packages: ['corechart'], callback: drawChart});
You can have a look here http://jsfiddle.net/asgallant/mx03tcx5/
How do I make the graph cover up only 67% of the pie instead of 100%, since I am only providing a single value. Is there any other way to achieve this..
add this
slices: {
1: { color: 'transparent', textStyle : {color:'transparent'} }
}
to the same scope with pieSliceTextStyle. And
add
['', 33]
after ['Foo', 67].
For more info you can check this : Google Developers
After modification :
chart.draw(data, {
height: 400,
width: 600,
pieHole: 0.5,
pieSliceTextStyle: {
color: '#000000'
},
slices: {
1: { color: 'transparent', textStyle : {color:'transparent'} }
}
});
var data = google.visualization.arrayToDataTable([
['Category', 'Value'],
['Foo', 67],
['', 33]
]);
if you want to check it in jsfiddle http://jsfiddle.net/4oxbnmqr/