Combining webform with charts

Looks pretty neat. I'd be glad to include integration with Chart module directly in Webform. Any patches for this functionality would be appreciated.

I would be really keen on an integration like this, a kind of report centre for customers to view statistics on forms that suite their interests/needs,

Maybe we should also contact with the people of webform report.

The integration of graphs would be really nice!
I've seen this tutorial: http://drupal.org/node/233753
and it seems that the creation of a single graph is not so difficult...

I'm assigning this to myself as I am presently developing a module to integrate webform and the chart api. I will post more information to this issue as it evolves. In the mean time if anyone has any thoughts, suggestions, or requests I am all ears.

Thanks matteusx, looking forward to seeing how this goes. If (minor) changes are needed to Webform, post patches to the Webform queue and I'll assist on them. I'd like to see this as a "built-in" feature of Webform rather than a separate module, so if you have both Webform and Charts it'll pull in a webform.charts.inc file or something similar.

Hi all. I've been putting some work into this in my spare time. Hopefully I'll have something that can be tested out in a week or two. I just wanted to mention the approach I'm taking to get some feedback.

As quicksketch mentioned, this would work well bundled with webform -- and I am open to doing that. Presently I am developing it as a module, and I'm not sure if there are any development considerations for eventually bundling it with webform. I think it's just an issue of distribution, not coding, but let me know.

Presently I have the module offering a Webform Chart (WC) content type. Creating a WC, you pick from a select box of webforms to indicate which webform's data you want to use. Then, similar to webform module itself, you can go to a 'components' page. The components of the webform you selected are listed here, and can be independently reordered and independently enabled or disabled for charting. At the moment each component selected will render a separate chart. For instance, if you had a webform asking for the user's age and favorite color, and selected both for charting, you will get two charts when viewing the WC node.

Editing the 'component' within the WC components form will let you adjust charting options for each. A main option I am adding, because it's specific to my needs for this, is the ability to chart cumulative data versus data over time. Charting cumulative data for a multiple choice question like "How many hours a day do you spend online?" could present a bar chart or a pie chart showing how many total responses each choice received, ever. Charting this "over time" would instead present something like a line chart (time on the x axis, number of responses on the y axis, and each response option a different line) or the same approach with grouped bar charts. I hope I am making sense. To summarize, the difference is: one option shows you a breakdown of all data collected so far, the other shows the data as it was collected over time allowing you to see trends.

Based on the webform component type, different charting options will be available, but I hope to support as many as possible (when they make sense for the data).

Of course the standard options that the Chart API exposes will be available per component: title, title size, colors, chart type, labels, keys, etc.

Finally, I'd like to provide a way to embed charts individually in other nodes or blocks. I am not sure how to handle this. I considered something like token, or a custom input format, something that would let you use text such as [webformchart:10:3] to specify an embed of the chart for component 3 of webform chart with node id 10. I could just have the module provide blocks, however I think an embed approach like I described would be more useful - you could embed charts in nodes or blocks as you saw fit that way.

Of course I appreciate any and all feedback!

Please disregard my last post. I am going to change my approach. I think smaller, specific modules are much more useful, and that module users are better served by having a library of simple and interlocking modules. With that in mind, I am now planning on using the Charts module which can chart the output of a view, and writing the necessary Views integration code to get Webform data available within a view. The advantage here is that users could use the Webform-Views integration to do a variety of reporting and presentation of Webform data, irrespective of charting. With Charts, they could then chart this data. I'll keep you posted.

That sounds awesome matteusx. I admit I'd prefer to make a report through Views rather than as a node, but both approaches have advantages. I'm a little nervous about the scope of the project, it sounds like you're taking a more extensive approach than I was expecting (custom reports and such). While generating such reports would be a great Webform feature in general, I'll have to see the code that we're using to decide if it should be in Webform directly or make a separate module for it.

Yea, everything in #9 i am putting on hold. Right now I just want to get webform data output by a view, then use Charts to chart it. So all I'm hoping to build now is Views integration for webform.

If the patch gets looking pretty big, it'd be good to split them up so that Views integration can be added in #273837: Views Integration for Webform, while charts integration can continue in this thread.

Interesting subject. Any progress yet?

watching

watching

New features are being added to the 3.x version. I'm still very open to including this functionality if it were to be written, but there are much higher priorities for Webform as a whole.

HI

Any progress with #9.

I am looking forward to this functionality to add a chart for a particular component of the webform.

Please let me know if any patch for it.

Thanks.

Any progress? :)

I have had to put development on this on hold, I'm sorry. I think this is an important feature and hope that someone with some more time can take a crack at this.

subscribing

subscribing

subscribe

subscribe

subscribe

subscribing

subscribing

I tried taking a look at this, but so far the Charting solutions in Drupal are very fragmented. I tried out Charts, but the API is broken and the module won't even install. It needs a lot more work before Webform provides support for it. The best solution I found was specifically for Fusion Charts (the free version). That module actually includes a Webform add-on that already works, though it's only loosely integrated with Webform.

Wow ... with this function, webform 3 will be dominant all over survey and questionnaire systems!

Does the Fusion Chart module works with webform 3? I installed the module but all I get is an empty page (webform-results/chart).

Does the Fusion Chart module works with webform 3? I installed the module but all I get is an empty page (webform-results/chart).

No, I don't believe it does. The module will need to be updated to work with Webform 3.

I created a new issue under the Fusionchart module: http://drupal.org/node/764762

The fusioncharts issue seems to be resolved with the patch I submited : http://drupal.org/node/764762#comment-3035596

Subscribing. Thanks

subscribing

I have made webform display graphical analysis on the submitted "select" type data. It is crude crude-but it is working. It involved using PHPlot and a bit of hacking of the webform module. Here we go with the steps:

1. I downloaded PHPlot from http://www.kidslovepc.com/php-tutorial/phplot-5.0rc2.tar.gz and extracted phplot into sites\all\modules\webform\components
2. Create folder sites\all\modules\webform\analysis_images. This will be used to store the plotted images
3. Open sites\all\modules\webform\components\select.inc for editing
4. Add

                   include("phplot/phplot.php");

Between

                   <?php

and

                   // $Id: select.inc,v 1.39.2.26 2010/10/18 07:20:54 quicksketch Exp $

5.
We now edit the function _webform_analysis_select($component, $sids = array(), $single = FALSE)

by adding this code

//Draw the graph here
        //Get random file name
        $characters = array(
            "A", "B", "C", "D", "E", "F", "G", "H", "J", "K", "L", "M",
            "N", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z",
            "1", "2", "3", "4", "5", "6", "7", "8", "9");

//make an "empty container" or array for our keys
        $keys = array();

//first count of $keys is empty so "1", remaining count is 1-6 = total 7 times
        while (count($keys) < 7)
        {
            //"0" because we use this to FIND ARRAY KEYS which has a 0 value
            //"-1" because were only concerned of number of keys which is 32 not 33
            //count($characters) = 33
            $x = mt_rand(0, count($characters) - 1);
            if (!in_array($x, $keys))
            {
                $keys[] = $x;
            }
        }

        foreach ($keys as $key)
        {
            $random_chars .= $characters[$key];
        }

        $module_path = drupal_get_path('module', 'webform');

        $temp_png = "$module_path/analysis_images/$random_chars.png";


        $graph = new PHPlot;


        $graph->SetDataValues(array_values($rows));
        $graph->SetXTickPos('none');
        $graph->SetXTickLabelPos('none');
        $legend = array_keys($rows);
        $graph->SetLegend($legend);
        //Specify this random file to be the output file of the image
        $graph->SetOutputfile($temp_png);
        $graph->SetFileFormat("png"); // is default anyway
        //Don't draw the image yet
//        $graph->SetPrintImage(0);
        //Don't output the file headers - we're inline!
        $graph->SetIsInline("1");
        //Draw the chart
        $graph->DrawGraph();
        //Now, the image is ready - print it to the file!
        $graph->PrintImage();
        $size = getimagesize("$temp_png");


        global $base_url;
        $ordered_rows[] = array("<img src=\"$base_url/$temp_png\" {$size[3]}>", "");

after

 // Add a row for any unknown or user-entered values.
        if ($component['extra']['other_option'])
        {
            $full_count = db_result(db_query($count_query, array_merge(array($component['nid'], $component['cid']), $sids)));
            $other_count = $full_count - $normal_count;
            $display_option = !empty($component['extra']['other_text']) ? check_plain($component['extra']['other_text']) : t('Other...');
            $other_text = $other_count ? $other_count . ' (' . l(t('view'), 'node/' . $component['nid'] . '/webform-results/analysis/' . $component['cid']) . ')' : $other_count;
            $ordered_rows[] = array($display_option, $other_text);
        }

but before

$rows = $ordered_rows;
}
 return $rows;

Open the results page of your webform submitted data and click analysis. You should see the graphs unser the select field.

I would welcome improvements and or a total incorporation of this method into webform.

Here is the module. Please review.

Here is the module. Please review.

Hi arthur, in order for me to review these changes and consider them for including with Webform, I need the changes in a patch format. See http://drupal.org/patch/create for how to create patches. I'm very interested in including charting functionality in Webform, but I'm not sure this is the way that we should take this.

Please find attached the patch file. I have taken the functionality of phplot and incorporated that into webform.module

Please find attached the patch file. I have taken the functionality of phplot and incorporated that into webform.module

As Fusionchart is not working, I believe this PHPlot is the best option for us. Let me test the latest patch and I'll update you guys.

A small fix that takes care of the graph not displaying in case there are no results submitted

I'm wondering if it's the best plan to take PHPlot and dump it wholesale into webform. Maybe it should be added separately as a library. Another thing to consider is that PHPlot is LGPL. Does that meet the requirements for posting the code on Drupal.org?

The PHPlot I have comes with GNU GPL license. Check the link I provided earlier on

I'm wondering if it's the best plan to take PHPlot and dump it wholesale into webform.

I definitely won't be adding PHPlot into Webform under any circumstances. This patch is pretty much dead on arrival. I'm very interested in making Webform have the capability to work with graphing solutions, but I don't anticipate building any one library directly into Webform.

This would also be very useful for a project I am working on. Has anyone made any progress on a good graphing/chart solution for webform?

Subscribing

This is an interesting idea and I hope it will come to life! I want to suggest that Google Charts API be considered as the charting solution. http://code.google.com/apis/chart/

I used Google Charts for a project in D6 which integrated with Views and it was easy to work with. For that project we made a Views Style that would output a Google Line Chart, so when setting up the View instead of unformatted/table/grid you would select "google chart" and then some options would come up with various settings that were fed in to the Google Charts API. In that case we needed the ability to pass settings to Google Charts, but in this case those settings (such as chart width/height, label types, legend position) could probably be coded into place, or provided in a theming function? Or maybe in a Webform Admin Settings page named "Chart Options"?

I'm thinking if we can get the data into Views, Google Charts is so simple that it can be output from the data at the theming level, such as in a preprocess function. Essentially a Google Chart is an image, and that image is created by sending data to the API. So if the Google Chart API is used in a preprocess function, then this can return the finished chart to the theme layer.

For quick reference this is an example Google Line Chart, note how the data is passed in the URL and displayed, for example "chs" is the variable used to determine the chart width/height.

http://chart.apis.google.com/chart?chxr=0,0,46&chxt=y&chs=300x225&cht=lc...

Here is a link to Google Charts beta version chart creator that is a good way to try out the different chart types and see how they are generated with the API: http://imagecharteditor.appspot.com/

I've been trying to get this to work on the theme layer by overriding the Analysis page (function theme_webform_results_analysis) and bringing in the Chart module for easily using the Google Chart API. Sort of like what goldhat was saying, but simpler, and it doesn't totally work yet.

I'm having a tough time getting the webform results array into the right format to hand off to the chart_render function.

But I think it's possible, and this might be a good start? Any guidance about how to make this work right would be much appreciated!

EDIT: I figured out how to use var_dump and found that the better approach might be to get up in the $row_data and $questions arrays separately (instead of using the $rows array that I had in the first version of this question, which was a mashup of both arrays).

Here's what I've got in my template.php file:

<?php
/**
 * Output the content of the Analysis page.
 * @see webform_results_analysis()
 */
function mytheme_webform_results_analysis($node, $data, $sids = array(), $analysis_component = NULL) {

  foreach ($data as $cid => $row_data) {

    if (is_array($row_data)) {

      // get the questions, put them in an array
      $questions = array();
      $questions[] = array('data' => check_plain($node->webform['components'][$cid]['name']));

      // wrangle the array into one we can use for the Google chart
      $chart_data = var_dump($row_data); // this array contains the info we need but needs to be formatted differently    

      // Set up the chart
      $chart = array(
        '#chart_id' => 'webform_analysis',
        '#type' => CHART_TYPE_PIE_3D,
        '#size' => chart_size(658, 250)
      );

      // $chart_data really needs to be an array that's formatted like this -  
      // not real data here, this is just for show
      $test_chart = array(
        'option 1' => '12',
        'option 2' => '45',
        'option 3' => '122'
      ); 

      // separate the above array into labels and values, add a percentage to the label
      foreach ($test_chart as $key => $value) {
        $chart['#data'][] = $test_chart[$key];
        $chart['#labels'][] = strip_tags($key) . ' (' . round($test_chart[$key], 2) .  '%)';
      }
      // pick some colors
      $chart['#data_colors'][] = 'b0c73d';
      $chart['#data_colors'][] = '667323';
      $chart['#data_colors'][] = '221f1f';

      $output = chart_render($chart);    
    }
  }

  if (count($rows) == 0) {
    $output = t('There are no submissions for this form.');
  }

  // return the data that goes into chart function, just for testing
  return $chart_data; 

  // someday, this might return a set of webform charts. right now it returns the fake test chart
  // return $output;
}
?>

$row_data is structured like this (this repeats for each question, var_dump output here):

array(3) {
  [0]=>
  array(2) {
    [0]=>
    string(9) "Option one"
    [1]=>
    string(3) "367" // number of responses for option 1
  }
  [1]=>
  array(2) {
    [0]=>
    string(9) "option two"
    [1]=>
    string(2) "55" // number of responses for option 2
  }
  [2]=>
  array(2) {
    [0]=>
   string(11) "option three"
    [1]=>
    string(3) "300" // number of responses for option 3
  }
}

So, to make this work, I've got to get this $row_data array looking like the $test_chart array, for each question. Any ideas?

subscribing

+1

Here's a first pass at this.

It still needs some work, such as a config page, but it works.

It started with the analysis page and then morphed into what it is.

http://drupal.org/sandbox/ccoppen/1361504

Let me know feedback and if you can access it. I'm new to this module creating thing.

Here's a second pass, based on ccoppen's original module, but with support for additional charting libraries (namely google visualization), configuration, and an API. http://drupal.org/sandbox/hotspoons/1450784

I've adopted the http://drupal.org/project/charts module to bring it up to speed for Drupal 7. Although I haven't tried it, you should be able to combine Webform's Views support with Charts module to produce charts for specific Webforms. However for adequate charting support throughout the module, this will probably become a separate project. The first step is probably #1459372: Patch to provide usefully formatted data structures for 3rd party webform analysis (e.g. charts).

Confirmed- Webform's Views with Charts does produce charts for Webforms with a minor error due to the select options. It's looking really nice! I got it to work with Google Charts but not HighCharts.

Notice: Undefined index: options_source in _webform_select_options() (line 854 of .../modules/webform/components/select.inc).

I got it to work with Google Charts but not HighCharts.

We probably have an issue where Highcharts needs to receive integer/float input, but the Views integration is returning strings. I think Charts module is supposed to be casting values to integers/floats for you. Could you open a new request over in the Charts queue for this problem?

Sure- https://drupal.org/node/2069079

Hi !

I don't know what is the current status of charting with QuickSketch module. However you can use Webform Chart module in conjunction to Charts module for a nice chart data display result page.
@QuickSketch : it may be a good idea to combine efforts on this if you need help on charting.

Miro.

Solution is to use the chars modules and views integration.