View percentage on pie chart itself

jayeshjain24 commented 10 years ago

There is no clear doc on how to do this.It uses google api for rendering pie charts and google api do provide the options of percentage.Like the image below .Can we do this in VWM polls screenshot_1

vmichnowicz commented 10 years ago

There is currently no way to do this. If you wanted to add this functionality you could modify the function used to build the Google Charts URL. However, since the Google Image Charts API has been officially deprecated as of April 20, 2012 I will not be adding this feature to VWM Polls.

This may be a part of the new Google Charts integration I still need to get around to. Another option is for you to use ExpressionEngine template variables to build the Google Charts configuration object manually. This is actually a pretty good way to go.

jayeshjain24 commented 10 years ago

'Another option is for you to use ExpressionEngine template variables to build the Google Charts configuration object manually '? can you please elaborate

vmichnowicz commented 10 years ago

So according to this page you can configure the new Google Charts API like so...

<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', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: 'My Daily Activities'
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

All you need to do is use ExpressionEngine template parameters in there (I have not tested this exact code so you will need to play with it to get it to actually work):

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  </head>
  <body>

    <div id="piechart" style="width: 900px; height: 500px;"></div>

    {exp:channel:entries channel="polls" status="closed|open"}
      {exp:vwm_polls:poll entry_id="{entry_id}" field_id="{poll_1:field_id}" redirect="index"}
        <script type="text/javascript">
          google.load("visualization", "1", {packages:["corechart"]});
          google.setOnLoadCallback(drawChart);
          function drawChart() {
            var data = google.visualization.arrayToDataTable([
              ['Task', 'Hours per Day'],
              {options_results}
                ['{text}', '{percent}'],
              {/options_results}
            ]);
            var options = {
              title: 'My Daily Activities'
            };

            var chart = new google.visualization.PieChart(document.getElementById('piechart'));
            chart.draw(data, options);
          }
        </script>
      {/exp:vwm_polls:poll}
    {/exp:channel:entries}
</html>

jayeshjain24 commented 10 years ago

I called up your javascript in success..I converted your json response in to api compatible array and passed it to the javascript function arrayToDataTable ..the whole page goes blank.

vmichnowicz commented 10 years ago

Are there any JavaScript or PHP errors? Does the HTML markup look valid?

jayeshjain24 commented 10 years ago

Nope.But my entire page goes balnk.In my console,it shows XHR finished loading.

sample code :

           $('form[id*="vwm_polls_poll"]').submit(function(e) {
            $('#poll_error').html("&nbsp");
            $('#poll_submit').hide();
            e.preventDefault();
            var form = $(this);
            var action = $(this).attr('action');
            var id = $(this).attr('id') + '_img';
            $.ajax({
                type: 'POST',
                url: action,
                data: $(this).serialize(),
                success: function(data) {
                //aim:to get an array of type [[a,b][a1,b1]];
                    var OUTER_ARRAY=[];//this will be passed as parameter
                    var inner_arrays=[];      
                    for (var i = 0, l = data.options.length; i < l; i++) {
                        var obj = data.options[i];
                        for(prop in obj){
                            if(prop == 'text'){
                                //alert(obj[prop])
                                inner_arrays.push(obj['text']);
                            }
                            if(prop == 'votes'){
                                inner_arrays.push(obj['votes']);
                            }
                            if(inner_arrays.length == 2){
                                OUTER_ARRAY.push(inner_arrays);
                                inner_arrays=[]
                            }
                        }
                    }

                    google.load("visualization", "1", {packages:["corechart"]});
                    google.setOnLoadCallback(drawChart);
                    function drawChart(OUTER_ARRAY) {
                        var data = google.visualization.arrayToDataTable(OUTER_ARRAY);
                        var options = {
                            title: 'My Daily Activities',
                            is3D: true
                        };
                        var chart = new google.visualization.PieChart(document.getElementById('pollTab'));
                        chart.draw(data, options);
                    }
                }

vmichnowicz commented 10 years ago

I think I am going to need a better example of what JavaScript you are using. The example you provided is not valid as google is undefined.

vmichnowicz / vwm_polls

View percentage on pie chart itself #30