Google Pie Chart does not display properly the slices - javascript

As you can see in the following image I have many pie charts in my webpage and they do not fill completely the container (generally only an half is filled or LESS):
Here some code:
var data1 = google.visualization.arrayToDataTable([
['Tipo', 'Valore'],
['Recapitate', sent],
['Ritornate/Bloccate', errors]
]);
options1 = {
width: 250,
height: 250,
pieHole: 0.5,
colors: ['#06dd00','#e12a00'],
legend: {position: 'none'},
pieSliceText: 'none',
tooltip: {textStyle: {color: '#333', fontName: 'Arial', fontSize: 16}},
chartArea:{left: 0,top: 0,width: "100%",height: "100%"},
enableInteractivity: false/*,
animation: { duration: 1000, easing: 'out' }*/
};
chart1 = new google.visualization.PieChart(document.getElementById('grafico-inviate'));
chart1.draw(data1, options1);
var data2 = google.visualization.arrayToDataTable([
['Tipo', 'Valore'],
['Aperte', unique_opened],
['Non aperte', combined1]
]);
options2 = {
width: 250,
height: 250,
pieHole: 0.5,
colors: ['#3e9ca8','#ff5932'],
legend: {position: 'none'},
pieSliceText: 'none',
tooltip: {textStyle: {color: '#333', fontName: 'Arial', fontSize: 16}},
chartArea:{left: 0,top: 0,width: "100%",height: "100%"},
enableInteractivity: false/*,
animation: { duration: 1000, easing: 'out' }*/
};
chart2 = new google.visualization.PieChart(document.getElementById('grafico-aperte'));
chart2.draw(data2, options2);
The problem arises independently from the OS/Web-Browser.
I do not know if this is a bug of the visualization API or am I missing something?
SOLVED!!:
Do not ask me why but if i put the data in the following way (using the javascript Number() function) it works:
var data2 = google.visualization.arrayToDataTable([
['Tipo', 'Valore'],
['Aperte', Number(unique_opened)],
['Non aperte', Number(combined1)]
]);


I do not know if this is your case but you can produce such semicircle in the following way. Your code little changed (only second part):
var unique_opened = 5.555; // real value: 11.11;
var combined1 = 44.445; // real value: 88.89;
var noshow = 50;
....
var data2 = google.visualization.arrayToDataTable([
['Tipo', 'Valore'],
['Aperte', unique_opened],
['Non aperte', combined1],
['noshow', noshow]
]);
options2 = {
width: 250,
height: 250,
pieHole: 0.5,
colors: ['#3e9ca8','#ff5932', '#ffffff'],
...
And you get:
Idea of Javier González

Related

How to scale stacked google chart for mobile?

I have a stacked chart which is responsive for most screen sizes based on the solution for responsiveness provided here: Google Charts - Responsive Issue - Dynamically Resize
The problem is that despite none of the data values being higher than 5000, when viewed on mobile the scale goes up to 10,000 and the entire chart is rendered illegible. How can i scale the chart correctly for mobile?
JSFIDDLE https://jsfiddle.net/385rzhsg
HTML
<div id="chart"><div id="soc_chart"></div></div>
CSS
#chart {
border: 1px solid #AAA;
min-height: 1000px;
}
JAVASCRIPT
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawStacked);
function drawStacked() {
var data = google.visualization.arrayToDataTable([
['SOC', 'GEEKBENCH 5 SINGLE', 'GEEKBENCH 5 MULTI'],
['SNAPDRAGON 870', 914, 3161],
['MEDIATEK DIMENSITY 900 (MT6877)', 731, 2203],
['SNAPDRAGON 845', 504, 2028],
['MEDIATEK DIMENSITY 700 (MT6833V)', 544, 1695],
['MEDIATEK G95', 501, 1599],
['UNISOC TIGER T618', 392, 1441],
['UNISOC TIGER T310', 360, 708],
['MEDIATEK MT8176', 314, 644],
['MEDIATEK HELIO P60 (MT6771)', 288, 1272],
['ROCKCHIP RK3399', 269, 615],
['BROADCOM BCM2711', 234, 672],
['ROCKCHIP RK3326', 86, 272],
['MEDIATEK MT6580A', 69, 227],
['ROCKCHIP RK3288', 10, 20]
]);
var options = {
chartArea: {'width': 'auto', 'height': '90%'},
legend:
{'position':'top',
textStyle: {color: 'black', fontName: 'Lato', fontSize: 14, bold: true, italic: false}},
height: 1000,
isStacked: true,
hAxis:
{title: 'GEEKBENCH 5 SCORE',
textStyle: {color: 'black', fontName: 'Lato', fontSize: 12, bold: true, italic: false},
titleTextStyle: {color: '#940000', fontName: 'Lato', bold: true, italic: false}},
series: {
0:{color:'#F75200'},
1:{color:'#940000'}},
vAxis:
{title: 'SOC NAME',
textStyle: {color: 'black', fontName: 'Lato', fontSize: 12, bold: true, italic: false},
titleTextStyle: {color: '#940000', fontName: 'Lato', bold: true, italic: false}}
};
var chart = new google.visualization.BarChart(document.getElementById('soc_chart'));
chart.draw(data, google.charts.Bar.convertOptions(options));
window.addEventListener('resize', drawStacked, false);
}

for starters, let's take a look at the options for the chart.
var chart = new google.visualization.BarChart(document.getElementById('soc_chart'));
chart.draw(data, google.charts.Bar.convertOptions(options));
the convertOptions method is used to convert options for classic charts to material charts.
but the chart being drawn is a classic chart, so there is no need to use convertOptions.
classic chart: google.visualization.BarChart
material chart: google.charts.Bar
try removing the method...
var chart = new google.visualization.BarChart(document.getElementById('soc_chart'));
chart.draw(data, options);
also, the 'bar' package is for loading material charts,
so it isn't needed either.
google.charts.load('current', {packages: ['corechart', 'bar']});
change to...
google.charts.load('current', {packages: ['corechart']});
if after these changes, the axis continues to extend beyond the max value,
you can manually set the axis range.
we can find the max value of the row stacks, then round up to the nearest 1000.
var maxStack = null;
for (var i = 0; i < data.getNumberOfRows(); i++) {
var rowStack = data.getValue(i, 1) + data.getValue(i, 2);
maxStack = maxStack || rowStack;
maxStack = Math.max(maxStack, rowStack);
}
var maxRound = Math.ceil(maxStack / 1000) * 1000;
then use that value to set the max value of the axis.
hAxis: {
title: 'GEEKBENCH 5 SCORE',
textStyle: {color: 'black', fontName: 'Lato', fontSize: 12, bold: true, italic: false},
titleTextStyle: {color: '#940000', fontName: 'Lato', bold: true, italic: false},
viewWindow: {
min: 0,
max: maxRound // set max value of axis
}
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['SOC', 'GEEKBENCH 5 SINGLE', 'GEEKBENCH 5 MULTI'],
['SNAPDRAGON 870', 914, 3161],
['MEDIATEK DIMENSITY 900 (MT6877)', 731, 2203],
['SNAPDRAGON 845', 504, 2028],
['MEDIATEK DIMENSITY 700 (MT6833V)', 544, 1695],
['MEDIATEK G95', 501, 1599],
['UNISOC TIGER T618', 392, 1441],
['UNISOC TIGER T310', 360, 708],
['MEDIATEK MT8176', 314, 644],
['MEDIATEK HELIO P60 (MT6771)', 288, 1272],
['ROCKCHIP RK3399', 269, 615],
['BROADCOM BCM2711', 234, 672],
['ROCKCHIP RK3326', 86, 272],
['MEDIATEK MT6580A', 69, 227],
['ROCKCHIP RK3288', 10, 20]
]);
var maxStack = null;
for (var i = 0; i < data.getNumberOfRows(); i++) {
var rowStack = data.getValue(i, 1) + data.getValue(i, 2);
maxStack = maxStack || rowStack;
maxStack = Math.max(maxStack, rowStack);
}
var maxRound = Math.ceil(maxStack / 1000) * 1000;
var options = {
chartArea: {'width': 'auto', 'height': '90%'},
legend: {
position: 'top',
textStyle: {color: 'black', fontName: 'Lato', fontSize: 14, bold: true, italic: false}
},
height: 1000,
isStacked: true,
hAxis: {
title: 'GEEKBENCH 5 SCORE',
textStyle: {color: 'black', fontName: 'Lato', fontSize: 12, bold: true, italic: false},
titleTextStyle: {color: '#940000', fontName: 'Lato', bold: true, italic: false},
viewWindow: {
min: 0,
max: maxRound
}
},
series: {
0:{color:'#F75200'},
1:{color:'#940000'}
},
vAxis: {
title: 'SOC NAME',
textStyle: {color: 'black', fontName: 'Lato', fontSize: 12, bold: true, italic: false},
titleTextStyle: {color: '#940000', fontName: 'Lato', bold: true, italic: false}
}
};
var chart = new google.visualization.BarChart(document.getElementById('soc_chart'));
chart.draw(data, options);
window.addEventListener('resize', function () {
chart.draw(data, options);
});
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="soc_chart"></div>

Gap on right and left sides in areaChart

I am using Google Charts to visualize some data. When drawing full width chart in bordered container I can see small gaps on the left and right side. Is it possible to remove it? The chart area width is set to 100%.
JS:
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales'],
['2013', 1000],
['2014', 1170],
['2015', 660],
['2016', 1030]
]);
var options = {
hAxis: {
textPosition: 'none',
gridlines: {
color: 'transparent'
}
},
vAxis: {
textPosition: 'none',
gridlines: {
color: 'transparent'
}
},
legend: { position: 'none' },
chartArea: {
'width': '100%',
'height': '100%',
'backgroundColor': '#fff'
},
colors: ['#ddd'],
height: 50,
lineWidth: 0,
areaOpacity: 1,
annotations: {
stemColor : 'none'
},
tooltip : {
trigger: 'none'
}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart'));
chart.draw(data, options);
}
HTML:
<div class="row">
<div class="col-md-3">
<div id="chart"></div>
</div>
</div>
FIDDLE: https://jsfiddle.net/5m6fLckw/5/

Changing colour of Google Pie Charts next page indicator

In a Google Pie chart, I want to change the colour of the indicator in the legend to go to the next results. This is now blue, and I can't seem to change that, although I can change the colour of the pie slices (done) or even of the text (not necessary). Here is a screenshot: Google pie chart.
Here is the code:
var options1 = {
legend: 'none',
pieSliceText: 'label',
width: '85%',
height: '85%',
chartArea: {'width': '80%', 'height': '80%'},
legend: {'position': 'bottom'},
backgroundColor: {fill:'transparent'},
pieSliceBorderColor: 'transparent',
colors: ['#41ac89', '#2b9b38', '#b3b300', '#D9C022', '#bab673']
};

you can use the following options...
text: legend.pagingTextStyle
arrows: legend.scrollArrows
e.g.
legend: {
position: 'bottom',
// style paging text and arrows
pagingTextStyle: {
color: '#616161'
},
scrollArrows:{
activeColor: '#616161',
inactiveColor:'#e0e0e0'
}
},
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['', 'Views'],
['dat', 40],
['nom', 10],
['gen', 10],
['hid1', 2],
['hid2', 3]
]);
var options = {
legend: 'none',
pieSliceText: 'label',
width: 200,
height: 200,
chartArea: {'width': '80%', 'height': '80%'},
legend: {
position: 'bottom',
// style paging text and arrows
pagingTextStyle: {
color: '#616161'
},
scrollArrows:{
activeColor: '#616161',
inactiveColor:'#e0e0e0'
}
},
backgroundColor: {fill: 'transparent'},
pieSliceBorderColor: 'transparent',
colors: ['#41ac89', '#2b9b38', '#b3b300', '#D9C022', '#bab673']
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

google charts dashed line between interpolateNulls

I use Google Charts Line chart and have implement interpolateNulls = true. This works great but now I want the line that interpolateNulls draws to be dotted.
Is it possible to set lineDashStyle: [4,4] just on the interpolateNulls?
Here is some of my code:
var drawChart = function (data, type, firstIsAverage, vAxisHeader) {
var shift = (firstIsAverage === true) ? 0 : 1;
var fontname = 'Roboto';
var fontsize = 14;
var chartObject = {
type: type,
display: false,
data: data,
options: {
chartArea: {
left: 100,
top: 30,
width: 800,
height: 240
},
vAxis: {
title: vAxisHeader,
titleTextStyle: {
italic: false
}
},
// lineDashStyle: [4, 4], //Just want this on the interpolateNulls
interpolateNulls: true, //Here is the interpolate
fontName: fontname,
fontSize: fontsize,
legend: 'none',
colors: colors.slice(shift),
isStacked: "true",
fill: 20,
displayExactValues: false
},
formatters: {}
};
setAllColumnsVisible(chartObject);
return chartObject;
};

How to increase annotation font size and bold the annotation value in line chart of google api chart?

I am using google api line chart with annotation. How can I change the font size and font format?
<script type="text/javascript">
google.load("visualization", "1", {packages: ["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', '');
data.addColumn({type: 'string', role: 'annotation'});
data.addColumn('number', '');
data.addRows([['2010', '67', 67]]);
data.addRows([['2011', '69', 69]]);
data.addRows([['2012', '68', 68]]);
data.addRows([['2013', '67', 67]]);
var options = {
width: 350,
height: 250,
pointSize: 5,
legend: {position: 'none'},
chartArea: {
left: 0,
top: 60,
width: 300,
height: 75},
vAxis: {
baselineColor: '#fff',
gridlines: {color: '#fff'},
minValue: 64,
maxValue: 71
},
tooltip: {trigger: 'none'},
enableInteractivity: false,
annotation: {
1: {
style: 'default'
}
},
series: {0: {color: '#4D7AD3'}, 1: {color: '#4D7AD3'}}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
<body>
<h2>Line Charts</h2>
<div id="chart_div"></div>
</body>

Try this
var options = {
annotations: {
textStyle: {
fontName: 'Times-Roman',
fontSize: 18,
bold: true,
italic: true,
color: '#871b47', // The color of the text.
auraColor: '#d799ae', // The color of the text outline.
opacity: 0.8 // The transparency of the text.
}
}
};
https://developers.google.com/chart/interactive/docs/gallery/linechart

Categories

Resources