Hi I have taken a reference of doughnut chart from google api and all working fine.
But i have two queries:
a. How to add one more column for the values with the legend as shown in image
b. When focus on specific field how the increase the size of image as shown in image.
here is the code
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Total Expenses in percentage'],
['Home Loan', 28],
['Rent', 23],
['Other EMI', 11],
['Utilities', 7],
['Childrens Education', 6],
['Recreation', 25]
]);
var options = {
title: 'Total Annual Expenses',
colors:['#CCCCCC','#D95B43','#C02942','#542437','#53777A','#ECD078'],
pieHole: 0.5,
pieSliceText: 'Annual Expenses',
pieSliceTextStyle: {color: 'Annual Expenses', fontName: 'Century Gothic', fontSize: 14}
};
var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div>
<div id="donutchart" style="width: 700px; height: 400px;"></div>
<div id="pieholetext" style="position:relative; width: 50px; height: 30px; margin-top: 20px; bottom:235px;
left:230px;">Annual Expenses</div>
</div>
</body>
</html>
and a reference link is reference
Please suggest how to do it.
Thanks in advance.