I have a problem with google charts more specifically in the Donut Chart
graph, the value is only centered when it is at 100%, when this is below the graph is' deformed, see image below.
$(document).ready(function() {
// Draw evolucao 1 chart
google.charts.setOnLoadCallback(drawevolucao1Chart);
// Draw evolucao 2 chart
google.charts.setOnLoadCallback(drawevolucao2Chart);
// Chart 1 ==========
function drawevolucao1Chart() {
var data = google.visualization.arrayToDataTable([
['Metas', 'Porcentagens'],
['', .01],
['', .01]
]);
var options = {
pieHole: 0.7,
pieSliceTextStyle: {
color: 'black'
},
slices: {
0: { color: '#2592c9' },
1: { color: 'transparent' }
},
backgroundColor: {
backgroundColor: {
stroke: 'transparent',
strokeWidth: 0
}
},
tooltip: { trigger: 'none' },
pieSliceText: 'percentage',
pieSliceTextStyle:{color: '#767474', fontName: '<global-font-name>', fontSize: '<global-font-size>'},
legend: 'none',
width: '550px',
height: '600px',
backgroundColor: 'transparent',
fontSize:20,
chartArea:{left:0,top:7,width:'100%',height:'90%'}
};
var chart = new google.visualization.PieChart(document.getElementById('chart-evolucao-fundamenta-1'));
chart.draw(data, options);
}
// Chart 2 ==========
function drawevolucao2Chart() {
var data = google.visualization.arrayToDataTable([
['Metas', 'Porcentagens'],
['', .1],
['', .00]
]);
var options = {
pieHole: 0.7,
pieSliceTextStyle: {
color: 'black'
},
slices: {
0: { color: '#2592c9' },
1: { color: 'transparent' }
},
backgroundColor: {
backgroundColor: {
stroke: 'transparent',
strokeWidth: 0
}
},
tooltip: { trigger: 'none' },
pieSliceText: 'percentage',
pieSliceTextStyle:{color: '#767474', fontName: '<global-font-name>', fontSize: '<global-font-size>'},
legend: 'none',
width: '550px',
height: '600px',
backgroundColor: 'transparent',
fontSize:20,
chartArea:{left:0,top:7,width:'100%',height:'90%'}
};
var chart = new google.visualization.PieChart(document.getElementById('chart-evolucao-fundamenta-2'));
chart.draw(data, options);
}
});
#sidebar
{
float: right;
padding: 0;
}
.sidebar-chart-1
{
padding: 25px 10px;
background-color: #efeeee;
}
.sidebar-chart-1 h3
{
font-size: 12px;
color: #4c4b4b;
margin-top: 0;
text-align: center;
position: relative;
}
.sidebar h3 .icon-info
{
color: #42abf4;
font-size: 19px;
position: absolute;
right: -2px;
top: -3px;
cursor: pointer;
&:hover
{
opacity: .9;
}
}
.sidebar h3 .tooltip-info
{
padding: 15px;
background-color: #42abf4;
position: absolute;
right: -10px;
top: -55px;
color: #fff;
max-width: 200px;
width: 100%;
display: none;
}
.sidebar h3 .tooltip-info:before
{
content: "";
display: inline-block;
vertical-align: middle;
width: 0;
height: 0;
position: absolute;
right: 11px;
bottom: -5px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #42abf4;
}
.form-acumulado
{
margin: 30px 0 0 0;
}
.form-acumulado input
{
width: 100%;
padding: 5px 10px;
border-radius: 4px;
border: 1px solid #808080;
margin-top: 5px;
}
.form-acumulado .salvar-dados
{
width: 100%;
text-transform: uppercase;
font-weight: bold;
color: #fff;
margin-top: 10px;
&:hover
{
opacity: 0.8;
}
}
.form-acumulado .form-group
{
margin: 0;
}
small
{
width: 100%;
font-size: 10px;
color: #767474;
text-align: center;
display: block;
margin-top: 10px;
}
// --- evolução fundamental 1 e 2 #####
.container-evolucao,
.container-distribuicao
{
margin-top: 20px;
background-color: #efeeee;
padding: 15px;
}
.container-evolucao h3,
.container-distribuicao h3
{
font-size: 12px;
color: #4c4b4b;
margin-top: 0;
position: relative;
}
.container-evolucao h4,
.container-distribuicao h4
{
font-size: 12px;
text-align: center;
color: #42abf4;
font-weight: bolder;
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script><scripttype="text/javascript" src="https://www.google.com/jsapi"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script><scripttype="text/javascript">
// Load the Visualization API library and the piechart library.
google.load('visualization', '1.0', {'packages':['corechart']});
// ... draw the chart...
</script>
<section id="new-charts">
<aside id="sidebar" class="sidebar col-sx-12 col-sm-4 col-md-4">
<!-- Charts Evolution -->
<div class="evolucao-fundamental-1 container-evolucao sidebar">
<h3>Evolução da Meta - Fundamental I</h3>
<div id="chart-evolucao-fundamenta-1"></div>
<h4>META ALCANÇADA</h4>
</div>
<div class="evolucao-fundamental-2 container-evolucao sidebar">
<h3>Evolução da Meta - Fundamental I</h3>
<div id="chart-evolucao-fundamenta-2"></div>
<h4>META ALCANÇADA</h4>
</div>
</aside>
<!-- FIM ASIDE CHARTS -->
</section>