I recently created a Google Pie chart and I'm looking to add a border around it. Can anyone provide assistance with this task? Below is the code for the Google Chart along with an image of how I would like it to appear.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {
packages: ["corechart"]
});
google.setOnLoadCallback(drawChart);
var values = [];
$(document).ready(function() {
$.ajax({
type: "GET",
url: "ChartData.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('Pie').each(function() {
var sTitle = $(this).find('Title').text();
var sValue = $(this).find('Value').text();
if (!isNaN(+sValue)) {
sValue = +sValue;
}
values.push([sTitle, sValue]);
});
drawChart(values);
},
error: function() {
alert("There was an issue processing the XML file.");
}
});
});
function drawChart(val) {
var data = google.visualization.arrayToDataTable(val);
var options = {'title':'Sample Charts', 'width':650, 'height':600, pieHole: 0.5, colors: ['#F6891F', '#A59B91', '#72C5EF', '#53585A', '#C8502B'], tooltip: {showColorCode: true}, is3D: false };
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
<title>My Read</title>
</head>
<body>
<div id="piechart" style="border: 1px solid black;"></div>
</body>
</html>