Missing buildVariables in 5.x version

Anyone?

Hi Daniela, sorry for the delay. First, thank you for making the transition!

Unless you have a custom or contrib module that extends Charts, you won't need that method. Please ensure you've run update.php or drush updatedb -y and cleared caches. What could be happening is a PHP-level cache. My hosting takes care of restarting Apache/nginx, but you may need to do that yourself, especially if you're working locally (I use Lando, and just run lando stop and lando start).

I'm assuming you're using Charts with Views. You'll still probably need to edit your view, adjust the chart settings, and save the view.

Please let me know how things go. You're welcome to DM me on Slack or send me an email through the contact form. If you can share a screenshare or something, that will help with any further debugging.

Hi andileco!

Thank you very much for your response. I might not have explained the issue clearly, and I apologize for any confusion. Let me provide more clarity on the situation.

On the website I manage, there's a specific paragraph called "Infographic," consisting of multiple fields designated for entering chart data. I've included some screenshots for your reference.

I have created a preprocess function that retrieves data from the Infographic paragraph and transfers it to a custom template.
Here is the preprocess function, which is currently experiencing an error because the buildVariables functionality is not available in the latest version of the module:

function abc_preprocess_paragraph__infographic(&$variables) {
  $series_data = [];
  $content = $variables['content'];
  $options = \Drupal::config('charts.settings')->get('charts_default_settings');

  if (!empty($content['field_chart_type']['#items'])) {
    $options['type'] = $content['field_chart_type']['#items']->getString();
  }
  if (!empty($content['field_chart_xaxis_title']['#items'])) {
    $options['xaxis_title'] = $content['field_chart_xaxis_title']['#items']->getString();
  }
  if (!empty($content['field_chart_yaxis_title']['#items'])) {
    $options['yaxis_title'] = $content['field_chart_yaxis_title']['#items']->getString();
  }
  if (!empty($content['field_chart_multicolor']['#items']->getString())) {
    $variables['attributes']['class'][] = 'charts-multicolor';
  }

  $categories = (!empty($content['field_chart_categories']['#items']->getString())) ? explode(',', $content['field_chart_categories']['#items']->getString()) : [];
  if (!empty($content['field_chart_data']['#items'])) {
    $series_data[] = [
      'name' => '',
      'data' => array_map('intval', explode(',', $content['field_chart_data']['#items']->getString())),
    ];
  }

  if ($options['type'] == 'column'
    && $content['field_chart_series']['#items']->getString()
    && !empty($content['field_chart_multiple_series']['#items'])
  ) {
    $series_data = [];
    foreach ($content['field_chart_multiple_series']['#items']->getValue() as $serie) {
      $serie_entity = \Drupal\paragraphs\Entity\Paragraph::load($serie['target_id']);
      $series_data[] = (object)[
        'name' => $serie_entity->field_chart_series_name->getString(),
        'data' =>  array_map('intval', explode(',', $serie_entity->field_chart_series_data->getString())),
      ];
    }
    $options['grouping'] = TRUE;
  }

  $plugin_manager = \Drupal::service('plugin.manager.charts');
  $plugin = $plugin_manager->createInstance($options['library']);
  $plugin->buildVariables($options, '', $variables, $categories, $series_data, [], []);

  $variables['content']['options'] = $options;
}

Here is the corresponding template for the Infographic paragraph:

{% set options = content.options %}

{% set library, height, width, height_units, width_units = 'charts_' ~ options.library ~ '/' ~ options.library, options.height, options.width, options.height_units, options.width_units %}

{{ attach_library("#{ library }") }}

<div {{ attributes }} {{ content_attributes }} style="{% if width is not empty %}width:{{ width }}{{ width_units }};{% endif %}{% if height is not empty %}height:{{ height }}{{ height_units }};{% endif %}"></div>

The issue I'm facing is that the buildVariables method is no longer supported, and I need guidance on rewriting this section using the latest available functionalities. If you have any advice or suggestions, they would be greatly appreciated.

Thank you!

Thanks for explaining.

Your hook would look something more like:

function abc_preprocess_paragraph__infographic(&$variables) {
  
  $content = $variables['content'];
  $charts_settings = \Drupal::config('charts.settings');
  $options = $charts_settings->get('charts_default_settings');
  $type = !empty($content['field_chart_type']['#items']) ? $content['field_chart_type']['#items']->getString() : 'column';
  // The chart render array.
  $variables['my_cool_chart'] = [
    '#chart_library' => $options['library'],
    '#type' => 'chart',
    '#title' => '', // DO YOU HAVE A TITLE?
    '#chart_type' => $type,
    '#width' => $options['display']['dimensions']['width'],
    '#height' => $options['display']['dimensions']['height'],
    '#width_units' => $options['display']['dimensions']['width_units'],
    '#height_units' => $options['display']['dimensions']['height_units'],
    'x_axis' => [
      '#type' => 'chart_xaxis',
      '#title' => !empty($content['field_chart_xaxis_title']['#items']->getString()) ? $content['field_chart_xaxis_title']['#items']->getString() : '',
      '#labels' => (!empty($content['field_chart_categories']['#items']->getString())) ? explode(',', $content['field_chart_categories']['#items']->getString()) : [],
    ],
    'y_axis' => [
      '#type' => 'chart_yaxis',
      '#title' => !empty($content['field_chart_yaxis_title']['#items']->getString()) ? $content['field_chart_yaxis_title']['#items']->getString() : '',
    ],
    '#raw_options' => [],
  ];
  
  if (!empty($content['field_chart_data']['#items'])) {
    $variables['my_cool_chart']['series'] = [
      '#type' => 'chart_data',
      '#title' => '',
      '#color' => '',
      '#data' => array_map('intval', explode(',', $content['field_chart_data']['#items']->getString())),
    ];
  }
  if ($type === 'column'
    && $content['field_chart_series']['#items']->getString()
    && !empty($content['field_chart_multiple_series']['#items'])
  ) {
    foreach ($content['field_chart_multiple_series']['#items']->getValue() as $serie) {
      $serie_entity = \Drupal\paragraphs\Entity\Paragraph::load($serie['target_id']);
      $variables['my_cool_chart']['series_' . $serie['target_id']] = [
        '#type' => 'chart_data',
        '#title' => $serie_entity->field_chart_series_name->getString(),
        '#color' => '',
        '#data' =>  array_map('intval', explode(',', $serie_entity->field_chart_series_data->getString())),
      ];
    }
    $variables['my_cool_chart']['#stacking'] = TRUE;
  }
  if (!empty($content['field_chart_multicolor']['#items']->getString())) {
    $variables['my_cool_chart']['#attributes']['class'][] = 'charts-multicolor';
  }
}

and then in your template, you could do something more like:

{{ my_cool_chart }}

Hey andileco!

Thank you for your time and efforts to help me, I really appreciate your help!

I've implemented your code and there is some progress, however something is not quite right.

1. The first issue is for the 'column' type chart. The chart is visualised almost accurate, but have the following issues:
1.1 The label above each column is missing
1.2 On hover there is some 'undefined' text
See attached screenshots for comparison between the original (column-chart-original-v3.5.png) chart and the new one (column-chart-new-v5.1.png).

2. The second issue is with the 'donut' chart type, which is not visualised at all.
Is should look like screenshot donut-chart-original-v3.5.png, but instead it's not visualised at all.
I have made a screenshot donut-chart-new-v5.1.png of the dumped $variables array and the DOM structure which seems that it's builded properly in the template. However nothing is shown.
Maybe the issue is coming from the JS, because there are some errors in the console, see donut-JS-error.png

Can you help with that issues?

Thank you in advance!

Hey again!

It turns out that the all of the issues seems related to a custom javascript which was implemented on our website.
I commented out the lines which were throwing an errors and the 'donut' chart is visualised. It's not like the original one, but at least it's there and I think I can handle it from here.

Huge thank you for your help! You can mark this ticket as resolved.

Thanks,
Daniela

That's awesome! I'll let you figure out the donut chart. But for the column chart, you can update your y_axis to look like this:

'y_axis' => [
  '#type' => 'chart_yaxis',
  '#title' => !empty($content['field_chart_yaxis_title']['#items']->getString()) ? $content['field_chart_yaxis_title']['#items']->getString() : '',
  '#raw_options' => [
    'stackLabels' => [
      'enabled' => TRUE,
    ],
  ],
],

Please note, this code above is using '#raw_options' *inside* the y_axis array. There's also a '#raw_options' for the chart as a whole, but don't use that for this.

Hi andileco,

thanks for the hint for the column chart, but unfortunately this didn't help. The labels are still not showing.

Maybe this issue is also coming from the JS. I'm attaching the JS related files, if you have the time and the desire to check out what might be the problem.

Thanks once again!

Automatically closed - issue fixed for 2 weeks with no activity.