Score:-1

Simple Pie Chart not working in custom module. Do you see any errors in my code?

ae flag

I am running Drupal 9 in Lando. I have enabled the Charts and Highcharts modules and installed the Highcharts JS library with composer. I wrote a simple module to display a Pie Chart but the chart won't display. My code is below. Do you see any glaring errors or ways I can debug this? I ported this from an example that runs fine in D7 in DevDesktop.
The info yaml file.

name: My Test Chart
description: This is an example use of the Charts module.
package: Custom
type: module
core_version_requirement: ^9
dependencies:
  - chart

The router yaml file.

example_chart:
  path: 'mychart-example'
  defaults:
    _title: 'My Example Chart'
    _controller: '\Drupal\mychart\Controller\MyChartController::example_page'
  requirements:
    _permission: 'access content'

The library yaml file.

highcharts:
  js:
    libraries/highcharts/highcharts.js: {  }
  dependencies:
    - core/jquery

The Controller.

namespace Drupal\mychart\Controller;

use Drupal\Core\Controller\ControllerBase;

class MyChartController extends ControllerBase {
  /**
   * @return array
   */
  function example_page() {
    $chart = array(
      '#attached' => array(
        'library' => array('mychart/highcharts'),
      ),
      '#type' => 'chart',
      '#chart_type' => 'pie',
      '#chart_library' => 'highcharts',
      '#title' => t('Simple Pie Chart'),
    );
    $chart['pie_data'] = array(
      '#type' => 'chart_data',
      '#title' => t('Gender'),
      '#data' => array(array('Male', 10), array('Female', 20)),
    );
    return  $chart;
  }
}
sonfd avatar
in flag
What documentation are you following to create your render array? Are there any js errors in console? What do you see for markup in the page's rendered html?
Kevin avatar
in flag
Is the highcharts rendering process the exact same in Drupal 9 as it was Drupal 7?
Dorian Winterfeld avatar
ae flag
No JS errors in the console. Nothing in the logs. Nothing when I view source. But the title, Simple Pie Chart, is printed as an H1 so it is rendering something. Just no chart. The docs I am following are for D7 but I don't see anything different for D9. One clue, when I view source I don't see any JS code for Highcharts. Does my library file look OK? I see highcharts.js under libraries/highcharts but I think it is not being found or used. Not sure how to debug this.
Dorian Winterfeld avatar
ae flag
I tried installing google_charts and got the same behavior. Does anyone know if there is an update on the Charts API for Drupal 9? I am following these examples for D7; https://www.drupal.org/node/2434061.
leymannx avatar
ne flag
I think the `path:` always needs to start with a slash: `path: '/mychart-example'`.
Score:0
ae flag

The solution was upgrading the Charts module to version 5.0.x. Now my simple pie chart works!

mangohost

Post an answer

Most people don’t grasp that asking a lot of questions unlocks learning and improves interpersonal bonding. In Alison’s studies, for example, though people could accurately recall how many questions had been asked in their conversations, they didn’t intuit the link between questions and liking. Across four studies, in which participants were engaged in conversations themselves or read transcripts of others’ conversations, people tended not to realize that question asking would influence—or had influenced—the level of amity between the conversationalists.