google piechart pie background image - image

Question

I am using google charts and here is my piechart code...I want to use background repeating image instead of colors. Is that possible with google charts?
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 1],
['Eat', 1],
['Commute', 1],
['Watch TV', 1],
['Sleep', 1]
]);
var options = {
pieSliceBorderColor : 'none',
chartArea:{left:5,top:5,width:390,height:390},
enableInteractivity:false,
pieStartAngle:30,
pieHole: 0.6,
slices: {
0: { color: 'brown', offset: 0.01 },
1: { color: 'brown', offset: 0.01 },
2: { color: 'brown', offset: 0.01 },
3: { color: 'brown', offset: 0.01 },
4: { color: 'brown', offset: 0.01 },
}
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
options.slices[sliceCount].color = 'transparent';
chart.draw(data, options);
}

Answer 1

there are no standard options to fill slices with repeating image
however, you can modify the chart's svg after it finishes drawing
on the 'ready' event,
create an image pattern and add to svg defs
then replace the 'fill' attribute on the chart elements that should have the image
pie chart slices are typically drawn with <path> elements
when there is only one slice (100%), a <rect> element is used
the legend is drawn with <circle>
keep in mind, if you need to create an image of the chart,
custom modifications such as these will not work when using method --> getImageURI
see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages: ['corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 1],
['Eat', 1],
['Commute', 1],
['Watch TV', 1],
['Sleep', 1]
]);
var options = {
pieSliceBorderColor: 'none',
pieSliceText: 'none',
chartArea: {
bottom: 12,
left: 12,
top: 12,
width: 390,
height:390
},
enableInteractivity: false,
pieStartAngle: 30,
pieHole: 0.6,
slices: {
0: { color: 'brown', offset: 0.1 },
1: { color: 'brown', offset: 0.1 },
2: { color: 'brown', offset: 0.1 },
3: { color: 'brown', offset: 0.1 },
4: { color: 'brown', offset: 0.1 },
}
};
var container = $('#piechart')[0];
var chart = new google.visualization.PieChart(container);
google.visualization.events.addListener(chart, 'ready', function () {
// create image pattern
var svgNS = $('svg')[0].namespaceURI;
var pattern = document.createElementNS(svgNS, 'pattern');
pattern.setAttribute('id', 'whiteHat');
pattern.setAttribute('patternUnits', 'userSpaceOnUse');
pattern.setAttribute('width', 16);
pattern.setAttribute('height', 16);
var image = document.createElementNS(svgNS, 'image');
image.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'http://findicons.com/files/icons/512/star_wars/16/clone_old.png');
image.setAttribute('x', 0);
image.setAttribute('y', 0);
image.setAttribute('width', 16);
image.setAttribute('height', 16);
pattern.appendChild(image);
$('#defs')[0].appendChild(pattern);
// add image to pie slices
$('svg path').attr('fill', 'url(#whiteHat)');
// add image to legend circles
$('svg circle').attr('fill', 'url(#whiteHat)');
// test chart image
$(container.parentNode).append('<img alt="Chart" src="' + chart.getImageURI() + '">');
});
chart.draw(data, options);
}
div {
padding: 6px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div>piechart</div>
<div id="piechart"></div>
<div>image</div>