2

I'm developing a web interface that shows the spoken language of a person and it includes charts. I have choosen Google charts and my design has to be like the following image

Objective

I searched in Google charts API and I started to use Pie Charts with removing slices options and so far only I achieved to get my charts like the following image:

enter image description here

The problem when using removing slices options is that I have to set two quantities to create the chart. The first one is the number that appears in the image and the second one is hidden. The DataTable is built with this code:

...
                var average= Math.round( (porcentajes['Speak'] + porcentajes['Read'] + porcentajes['Write'])/ 3 );
                var remaining_average= 100 - average;
                    var data = google.visualization.arrayToDataTable([
                        ['Pac Man', 'Percentage'],// I don't see where this appears
                        [language, average], //language is german or english
                        ['', remaining_average]
                      ]);
...

So in summary what I want to achieve is to align to center or add styles to the chart without showing the second quantity.

Or

Is there another option to create a chart like this?

Thanks in advance and any help is appreciated!

UPDATE

Suppose the full circle is a 100% and the letters means:

E: Written abilities (E stands for the word escrito in spanish)

L: Reading abilities (L stands for the word leido in spanish)

H: Spoken abilities (H stands for the word hablado in spanish)

The graph displays how much a person can communicate in a determinate language, and the number in the middle of the circles is an average of those 3 aspects (E, L, H)

Jessai
  • 947
  • 2
  • 15
  • 35
  • What do E, L and H stand for in your chart design? I don't really understand what you're trying to display and how to read that particular chart. – Gerard van Helden May 25 '15 at 18:52
  • 1
    google charts renders the graphic as a svg(in his servers) , it doesn't have to much options to customize it , I worked in a project with google charts and in the end we had to switch to something else. – Luis May 26 '15 at 00:34
  • @Luis which charts are you using actually? – Jessai May 26 '15 at 00:43
  • Using [http://www.highcharts.com/](http://www.highcharts.com/) – Luis May 26 '15 at 00:50
  • @GerardvanHelden see the question update please and thanks – Jessai Jun 01 '15 at 14:48
  • 1
    I suppose the way to approach this is to layer three charts with increasing diameter, but I'm not sure you're able to do that with Google charts. By the way, SVG isn't that hard, you can easily render this without Google charts which possibly makes it easier for you in the end. [this answer](http://stackoverflow.com/questions/5736398/how-to-calculate-the-svg-path-for-an-arc-of-a-circle) might help you with that. – Gerard van Helden Jun 01 '15 at 21:01

0 Answers0