How do I plot a graph or chart on the confirmation message?

Question

How do I plot a graph on the confirmation message, on a webform and Drupal 8?

I searched a lot, but did not find anything useful, but these results.

1. There are several modules involved in graphing, including the Charts module.

2. There is a programming solution (Display webform results data in a Google Chart), but I don't think it works, since the site will contain dozens of questionnaires. Drawing charts should be easy, something similar to Twing or only in the confirmation message textBox area.

3. images files can be displayed if uploaded to the site via the questionnaire in this way (from How to Display Image after submitting webform in the confirmation message page).

   <img src="[submission:values:image_key]"/>
   

4. There are previous attempts at Drupal 7, such as the Webform Charts module. I don't know how it worked.

Answer 1

Since there doesn't seem to be a solution for this, I would define a webform handler that would preprocess the confirmation page with the chart that you generate.

There are plenty of D8 module for charting, and in the handler you have access to the webform submission values. You could even use a different method and save the chart image into a hidden image field on the submission. Handlers are sweet like that.

Check out WebformHandlerBase class/interface for the full method list. Checkout this other answer involving webform handlers to get you started. Once you have your handler, check out these examples for your methods.

Acting on presave()

/**
 * The example below demonstrates:
 * - retrieving a submission value
 * - processing it
 * - setting a field value to that result
 *
 * @param WebformSubmissionInterface $webform_submission
 *   A webform submission.
 */
public function preSave(WebformSubmissionInterface $webform_submission)
{
  $age = $webform_submission->getElementData('age');
  $ageChart = $this->someInjectedFooChartingService($age);
  $webform_submission->setElementData('age_chart', $ageChart->BarExportPng());
}

Acting on preprocessConfirmation()

/**
 * The example below demonstrates:
 * - retrieving a submission value
 * - processing it
 * - passing data to the confirmation template
 *
 * @param array $variables
 * @throws Exception
 */
public function preprocessConfirmation(array &$variables)
{
  /** @var WebformSubmissionInterface $webform_submission */
  $webform_submission = $variables['webform_submission'];
  $age = $webform_submission->getElementData('age');
  $ageChart = $this->someInjectedChartingService($age);
  // Add data to the confirmation template
  $variables['agechart'] = $ageChart;
}

Answer 2

thank you Ryan Hartman for your answer. There is no solution other than writing a new module to perform this task. I might do this, But I'll collect some resources here for future readers. This is another approach to plot a chart. (Overriding a Webform Confirmation Message in Drupal 8)

    /**
 * Implements hook_preprocess_HOOK().
 */
function mymodule_preprocess_webform_confirmation(&$vars) {
  if ($vars['webform']->id() == 'rate_workshop') {
    $request = \Drupal::request()->query;
    $display_mode = $request->get('display_mode');
    $rate_type = $request->get('rate_type');
    if ($rate_type === 'complete' && $display_mode === 'overlay') {
      $markup = t('Thank you for your feedback.') . '<br/><br/>';
      $markup .= '<button class="overlay-only">';
      $markup .= t('Explore more of this workshop');
      $markup .= '</button>';
      $vars['message']['#allowed_tags'] = ['br', 'button'];
    }
    else {
      $markup = t('Thank you for your feedback.');
    }

    $vars['message']['#markup'] = $markup;
  }
}

Thank you @kiamlaluno for editing my post.

Answer 3

After trying several solutions, I found that the best way is an easy forgotten one. i used

webform-confirmation--[webform_id].html.twig

in the theme. you can use java script directly, same as provided by source (like google charts), just replace Webform variable like this:

{% set H_Axis =  webform_submission.data.H_Axis  %}