0

I have a profile page in my website and I want a hollow pie chart like in the link below through which I want to display the percentage of profile completed. The percentage will be displayed in the center and the pie chart will have only 2 colors.

Visit Link For Image http://www.telerik.com/ClientsFiles/392888_hollow.png

What I did, I used Google Charts and the code is: 

<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

  // Load the Visualization API and the piechart package.
  google.load('visualization', '1.0', {'packages':['corechart']});

  // Set a callback to run when the Google Visualization API is loaded.
  google.setOnLoadCallback(drawChart);

  // Callback that creates and populates a data table,
  // instantiates the pie chart, passes in the data and
  // draws it.
  function drawChart() {

    // Create the data table.
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Profile');
    data.addColumn('number', 'Percentage');
    data.addRows([
      ['Profile Complete', 3],
      ['Profile Incomplete', 1]
    ]);

    // Set chart options
    var options = {'title':'Profile Complete',
                   'width':400,
                   'height':300};

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
</script>

<!--Div that will hold the pie chart-->
<div id="chart_div"></div>

But what I m getting is a complete pie chart and not a hollow one, so can anyone help me in creating a hollow pie chart. I have an algorithm to calculate the data, so you can use dummy data.

Any kind of help or guidance is welcomed.

Thank you...

Reporter
  • 3,897
  • 5
  • 33
  • 47
Ajey Pratap Singh
  • 68
  • 13
  • OT: A thing what I can't understand. You don't want an hollow pie chart and requested for help to create an hollow pie chart? – Reporter Aug 20 '13 at 10:40
  • I think i stated it clearly that I want a hollow pie chart and I m getting a complete pie chart by the code i gave... – Ajey Pratap Singh Aug 20 '13 at 11:24

2 Answers2

0

Maybe you can try to add the parameter pieHole to your options object like described here: https://developers.google.com/chart/interactive/docs/gallery/piechart#donut

FruBlom
  • 23
  • 1
  • 8
  • thnx FruBlom, this worked out half my problem, the other half is a text in the center of the donut pie like '95%'. I went through all the properties and was not able to find one for it so is there anything I missed out or there is an alternate way of doing it. And also where i specified pieHole i also wrote "legend : null" but it did not work. So another question is how to hide the legend. – Ajey Pratap Singh Aug 20 '13 at 11:30
  • any link or suggestion will be helpfull – Ajey Pratap Singh Aug 20 '13 at 11:34
  • Hiding legend: http://stackoverflow.com/questions/5202029/hiding-the-legend-in-google-chart – FruBlom Aug 20 '13 at 11:38
  • Thnx, dat worked.... and any link to put some text in the middle of the Donut Pie – Ajey Pratap Singh Aug 20 '13 at 11:59
  • That's a tough one. I found this link: http://stackoverflow.com/questions/17286457/how-to-center-text-inside-donut-chart-embedded-in-combination-chart . Don't know if it will help, but that's all I could find. Good luck! – FruBlom Aug 20 '13 at 12:08
  • Ohhk, now i have another question.... I want to provide a link in the tag in which will give me the graph on the image form. I tried it using the chart wizard but i could not find any option to set pie hole value. Can u put some light on this also... – Ajey Pratap Singh Aug 20 '13 at 12:14
0

Here is the answer to my question including the fact that I am using an image URL for getting an image and using that image in the 'img' tag in my code.

Visit : https://chart.googleapis.com/chart?cht=pc&chco=FFFFFF,FFFFFF,FFFFFF,FFFFFF,74D3EF|EDEDED&chd=t:-1|-1|-1|-1|52,48&chs=122x122&chp=4.7

You will get the output I wanted, you can play around with the URL and to be honest it is a hack and not a proper solution as Google has not provided pie hole property to use in URL.

Any questions are welcome.

Thank You.

Ajey Pratap Singh
  • 68
  • 13