0

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

enter image description here

b. When focus on specific field how the increase the size of image as shown in image.

enter image description here

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.

user3030365
  • 45
  • 1
  • 9
  • Please provide an example of code and a link to the relevant API. Also, please tag this with whatever that chart is generated with, because it is NOT pure HTML. – randak Dec 12 '13 at 12:11
  • I have edit the code please check – user3030365 Dec 12 '13 at 12:13
  • Can't you just add a new one to the list `google.visualization.arrayToDataTable`, and then add the desired color to `colors`? – randak Dec 12 '13 at 19:18

0 Answers0