Seperating the chart from the colored bulleted list

[ashapanka]

Hi,

I would like to separate the image of the chart and list that are generated from a poll (see below image) into 2 separate images. I would like to have better control of the sizing of each, but can't because it is just 1 image. Please let me know how I can do this.

Thanks, Allison

[vmichnowicz]

As far as I know this is not possible using the Google Charts image. You can, however, create a very similar chart using the VWM Polls ExpressionEngine template variables to create some custom HTML / CSS chart. The chart you have is a simple bar chart so that is very simple to recreate. All template variables are listed in the README.md file. You would go about it something like this:

<ul class="chart">
  {options_results}
      <li class="bar" style="background-color: #{color}; width: {percent}%; height: 50px;">{percent}%</li>
  {/options_results}
</ul>

<ul class="legend">
    {options_results}
        <li>
            <span style="display:inline-block; background-color: #{color}; width: 50px; height: 50px;"></span>{text}
        </li>
    {/options_results}
</ul>

[ashapanka]

Thanks! Can I use a similar technique for a pie chart (I use both pie and bar charts).

Also, I have this code in the head (user takes poll, clicks submit, and then Google generates the chart). Should I rethink my technique since I no longer want Google to create this image?

$(document).ready(function() {

$('form[id*="vwm_polls_poll"]').submit(function(e) { 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) {
        var chart = data.chart;
        var img = $('<img />').attr('src', chart).attr('id', id).attr('alt', '');
        $(form).find('fieldset').fadeOut('slow', function() {
            $(form).append(img).hide().fadeIn('slow');
        });
    },
    error: function(data) {
        var data = $.parseJSON(data.responseText);
        var xid = data.xid;
        $(form).find('input[name="XID"]').val(xid);
        $.each(data.errors, function(index, value) {
            alert(value);
        });
    },
    dataType: 'json'
});

});

});

[vmichnowicz]

I don't believe a pie chart can be recreated easily in HTML and CSS. I would suggest looking into the new Google Charts API as Google is going to drop support for the Google Charts Image API soon. You can use the same EE template variables I showed you above to build these charts.

It all depends on what you want to display after the user votes as to what you have in your Ajax success method. If you want to show the poll results in a HTML chart then you could simply use jQuery to .show() your chart.