Display chart from charts module using popup source

Created on 23 January 2025, 2 months ago

Hi,

Problem/Motivation

Display chart in popup source using charts module

1- Install leaflet and charts modules
2- Create an embed chart view to render a chart using heighcharts sub-module
3- Create a leaflet block view
4- Add the embed chart view into leaflet block view as a view field
5- Set the Popup Source to display the embed chart view

Problem: The popup does not display the chart

but, when using the google chart sub-module the chart is displayed after interacting with the map, like zoom in, zoom out or click on fullscrean control

Thank you for your support

💬 Support request
Status

Active

Version

10.2

Component

User interface

Created by

🇲🇦Morocco lakhal

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @lakhal
  • 🇮🇹Italy itamair

    thanks for reporting this @lakhal
    not easy to reproduce your use case, that looks pretty specific ...

    I would start better inspecting why that Chart JSON message is appearing instead of the expected chart, and that looks more on the Chart module, then Leaflet side.
    Also I would inspect any js console error that happen, and it looks you have 1 at least in the not working case (@see attached screenshot).

    You tech approach could look correct to me, in the Leaflet PopUp setup ("Add the embed chart view into leaflet block view as a view field"),
    but I would also try another way with the ViewFiled module ( https://www.drupal.org/project/viewfield ) so to:

    1. generate the Chart View with a contextual filter based on a specific node id (so that the rendered Chart relates to the specific content / node / entity);
    2. add and properly setup a Viewfield to the content / node / entity type that you are going to make the Leaflet View map upon / based on, ad make it rendering the Chart View (with the related contextual filter;
    3. add that Viewfield field to the Leaflet View fields list;
    4. setup the Leaflet Popup to use that Viewfield field ...

    and check if that way it works.

  • 🇲🇦Morocco lakhal

    Thank you, @itamair, for your reply and support.

    I tried the suggested approach using Viewfield, but I encountered the same behavior. When using Highcharts, the chart does not display. However, when using Google, the chart displays only after interacting with the map. This means that the data is present but not loaded when displaying the popup by clicking on the map object.

Production build 0.71.5 2024