amChart map not displaying after Laravel Livewire method is trigered


I have a Livewire component that contains an amCharts map. What I would like is some data to change when a country is clicked.

Here is the component:

<?php

namespace AppHttpLivewire;

use LivewireComponent;

class Demo extends Component
{
    protected $listeners = [
        'setSelected'
    ];

    public $selected;

    public function mount()
    {
        $this->selected = 'Global';
    }

    public function render()
    {
        return view('livewire.demo');
    }

    public function setSelected($selected)
    {
        $this->selected = $selected[0]['name'];
    }
}

and here is the JS:

import * as am4core from "@amcharts/amcharts4/core";
import * as am4maps from "@amcharts/amcharts4/maps";
import am4geodataWorldLow from "@amcharts/amcharts4-geodata/worldLow"

loadMap();

function loadMap() {
  console.log('load');
  var chart = am4core.create("chartdiv", am4maps.MapChart);
  // Set map definition
  chart.geodata = am4geodataWorldLow;

  // Set projection
  chart.projection = new am4maps.projections.Miller();

  // Create map polygon series
  var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());

  // Make map load polygon (like country names) data from GeoJSON
  polygonSeries.useGeodata = true;

  // Configure series
  var polygonTemplate = polygonSeries.mapPolygons.template;
  polygonTemplate.tooltipText = "{name}";
  polygonTemplate.fill = am4core.color("#74B266");

  // Create hover state and set alternative fill color
  var hs = polygonTemplate.states.create("hover");
  hs.properties.fill = am4core.color("#367B25");

  // Remove Antarctica
  polygonSeries.exclude = ["AQ"];

  // Add some data
  polygonSeries.data = [{
    "id": "US",
    "name": "United States",
    "value": 100,
    "fill": am4core.color("#F05C5C")
  }, {
    "id": "FR",
    "name": "France",
    "value": 50,
    "fill": am4core.color("#5C5CFF")
  }];

  // Bind "fill" property to "fill" key in data
  polygonTemplate.propertyFields.fill = "fill";

  var active = ['CA', 'GB'];

  var polygonTemplate = polygonSeries.mapPolygons.template;
  polygonTemplate.events.on("hit", function(ev) {

    if (active.includes(ev.target.dataItem.dataContext.id)) {
      setSelected(ev.target.dataItem.dataContext, chart)
    } else {
      console.log('do nothing');
    }
  });
}
function setSelected(selected, chart) {
  console.log(selected);
  Livewire.emit('setSelected', [
    selected,
  ]);
  loadMap();
}

This updates the data fine but the map flickers and disappears. I get the following output in the console:

maps.ts:40 load
maps.ts:40 {multiPolygon: Array(35), id: "CA", madeFromGeoData: true, name: "Canada"}
maps.ts:40 load
maps.ts:40 Chart was not disposed id-19
warn @ maps.ts:40
loop_1 @ maps.ts:40
setTimeout (async)
loop_1 @ maps.ts:40
setTimeout (async)
loop_1 @ maps.ts:40
setTimeout (async)
loop_1 @ maps.ts:40
setTimeout (async)
loop_1 @ maps.ts:40
setTimeout (async)
loop_1 @ maps.ts:40
createChild @ maps.ts:40
create @ maps.ts:40
loadMap @ maps.ts:40
(anonymous) @ maps.ts:40
(anonymous) @ maps.ts:40
(anonymous) @ maps.ts:40
maps.ts:40 Chart was not disposed id-1380

I have tried adding chart.dispose() to setSelected() I get the same behaviour on the page and the following output:

Uncaught Error: EventDispatcher is disposed
    at InteractionObjectEventDispatcher.EventDispatcher.isEnabled (maps.ts:40)
    at Interaction.handleUp (maps.ts:40)
    at maps.ts:40
    at Module.each (maps.ts:40)
    at Interaction.handleGlobalUp (maps.ts:40)
    at Interaction.handleGlobalPointerUp (maps.ts:40)
    at HTMLDocument.<anonymous> (maps.ts:40)
EventDispatcher.isEnabled @ maps.ts:40
Interaction.handleUp @ maps.ts:40
(anonymous) @ maps.ts:40
each @ maps.ts:40
Interaction.handleGlobalUp @ maps.ts:40
Interaction.handleGlobalPointerUp @ maps.ts:40
(anonymous) @ maps.ts:40
maps.ts:40 Chart was not disposed id-2749

Does anyone know how to get this working?

Source: JavaSript – Stack Overflow

September 3, 2021
Category : News
Tags: amcharts | javascript | laravel | laravel-livewire

amChart map not displaying after Laravel Livewire method is trigered


I have a Livewire component that contains an amCharts map. What I would like is some data to change when a country is clicked.

Here is the component:

<?php

namespace AppHttpLivewire;

use LivewireComponent;

class Demo extends Component
{
    protected $listeners = [
        'setSelected'
    ];

    public $selected;

    public function mount()
    {
        $this->selected = 'Global';
    }

    public function render()
    {
        return view('livewire.demo');
    }

    public function setSelected($selected)
    {
        $this->selected = $selected[0]['name'];
    }
}

and here is the JS:

import * as am4core from "@amcharts/amcharts4/core";
import * as am4maps from "@amcharts/amcharts4/maps";
import am4geodataWorldLow from "@amcharts/amcharts4-geodata/worldLow"

loadMap();

function loadMap() {
  console.log('load');
  var chart = am4core.create("chartdiv", am4maps.MapChart);
  // Set map definition
  chart.geodata = am4geodataWorldLow;

  // Set projection
  chart.projection = new am4maps.projections.Miller();

  // Create map polygon series
  var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());

  // Make map load polygon (like country names) data from GeoJSON
  polygonSeries.useGeodata = true;

  // Configure series
  var polygonTemplate = polygonSeries.mapPolygons.template;
  polygonTemplate.tooltipText = "{name}";
  polygonTemplate.fill = am4core.color("#74B266");

  // Create hover state and set alternative fill color
  var hs = polygonTemplate.states.create("hover");
  hs.properties.fill = am4core.color("#367B25");

  // Remove Antarctica
  polygonSeries.exclude = ["AQ"];

  // Add some data
  polygonSeries.data = [{
    "id": "US",
    "name": "United States",
    "value": 100,
    "fill": am4core.color("#F05C5C")
  }, {
    "id": "FR",
    "name": "France",
    "value": 50,
    "fill": am4core.color("#5C5CFF")
  }];

  // Bind "fill" property to "fill" key in data
  polygonTemplate.propertyFields.fill = "fill";

  var active = ['CA', 'GB'];

  var polygonTemplate = polygonSeries.mapPolygons.template;
  polygonTemplate.events.on("hit", function(ev) {

    if (active.includes(ev.target.dataItem.dataContext.id)) {
      setSelected(ev.target.dataItem.dataContext, chart)
    } else {
      console.log('do nothing');
    }
  });
}
function setSelected(selected, chart) {
  console.log(selected);
  Livewire.emit('setSelected', [
    selected,
  ]);
  loadMap();
}

This updates the data fine but the map flickers and disappears. I get the following output in the console:

maps.ts:40 load
maps.ts:40 {multiPolygon: Array(35), id: "CA", madeFromGeoData: true, name: "Canada"}
maps.ts:40 load
maps.ts:40 Chart was not disposed id-19
warn @ maps.ts:40
loop_1 @ maps.ts:40
setTimeout (async)
loop_1 @ maps.ts:40
setTimeout (async)
loop_1 @ maps.ts:40
setTimeout (async)
loop_1 @ maps.ts:40
setTimeout (async)
loop_1 @ maps.ts:40
setTimeout (async)
loop_1 @ maps.ts:40
createChild @ maps.ts:40
create @ maps.ts:40
loadMap @ maps.ts:40
(anonymous) @ maps.ts:40
(anonymous) @ maps.ts:40
(anonymous) @ maps.ts:40
maps.ts:40 Chart was not disposed id-1380

I have tried adding chart.dispose() to setSelected() I get the same behaviour on the page and the following output:

Uncaught Error: EventDispatcher is disposed
    at InteractionObjectEventDispatcher.EventDispatcher.isEnabled (maps.ts:40)
    at Interaction.handleUp (maps.ts:40)
    at maps.ts:40
    at Module.each (maps.ts:40)
    at Interaction.handleGlobalUp (maps.ts:40)
    at Interaction.handleGlobalPointerUp (maps.ts:40)
    at HTMLDocument.<anonymous> (maps.ts:40)
EventDispatcher.isEnabled @ maps.ts:40
Interaction.handleUp @ maps.ts:40
(anonymous) @ maps.ts:40
each @ maps.ts:40
Interaction.handleGlobalUp @ maps.ts:40
Interaction.handleGlobalPointerUp @ maps.ts:40
(anonymous) @ maps.ts:40
maps.ts:40 Chart was not disposed id-2749

Does anyone know how to get this working?

Source: JavaSript – Stack Overflow

September 3, 2021
Category : News
Tags: amcharts | javascript | laravel | laravel-livewire

amChart map not displaying after Laravel Livewire method is trigered


I have a Livewire component that contains an amCharts map. What I would like is some data to change when a country is clicked.

Here is the component:

<?php

namespace AppHttpLivewire;

use LivewireComponent;

class Demo extends Component
{
    protected $listeners = [
        'setSelected'
    ];

    public $selected;

    public function mount()
    {
        $this->selected = 'Global';
    }

    public function render()
    {
        return view('livewire.demo');
    }

    public function setSelected($selected)
    {
        $this->selected = $selected[0]['name'];
    }
}

and here is the JS:

import * as am4core from "@amcharts/amcharts4/core";
import * as am4maps from "@amcharts/amcharts4/maps";
import am4geodataWorldLow from "@amcharts/amcharts4-geodata/worldLow"

loadMap();

function loadMap() {
  console.log('load');
  var chart = am4core.create("chartdiv", am4maps.MapChart);
  // Set map definition
  chart.geodata = am4geodataWorldLow;

  // Set projection
  chart.projection = new am4maps.projections.Miller();

  // Create map polygon series
  var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());

  // Make map load polygon (like country names) data from GeoJSON
  polygonSeries.useGeodata = true;

  // Configure series
  var polygonTemplate = polygonSeries.mapPolygons.template;
  polygonTemplate.tooltipText = "{name}";
  polygonTemplate.fill = am4core.color("#74B266");

  // Create hover state and set alternative fill color
  var hs = polygonTemplate.states.create("hover");
  hs.properties.fill = am4core.color("#367B25");

  // Remove Antarctica
  polygonSeries.exclude = ["AQ"];

  // Add some data
  polygonSeries.data = [{
    "id": "US",
    "name": "United States",
    "value": 100,
    "fill": am4core.color("#F05C5C")
  }, {
    "id": "FR",
    "name": "France",
    "value": 50,
    "fill": am4core.color("#5C5CFF")
  }];

  // Bind "fill" property to "fill" key in data
  polygonTemplate.propertyFields.fill = "fill";

  var active = ['CA', 'GB'];

  var polygonTemplate = polygonSeries.mapPolygons.template;
  polygonTemplate.events.on("hit", function(ev) {

    if (active.includes(ev.target.dataItem.dataContext.id)) {
      setSelected(ev.target.dataItem.dataContext, chart)
    } else {
      console.log('do nothing');
    }
  });
}
function setSelected(selected, chart) {
  console.log(selected);
  Livewire.emit('setSelected', [
    selected,
  ]);
  loadMap();
}

This updates the data fine but the map flickers and disappears. I get the following output in the console:

maps.ts:40 load
maps.ts:40 {multiPolygon: Array(35), id: "CA", madeFromGeoData: true, name: "Canada"}
maps.ts:40 load
maps.ts:40 Chart was not disposed id-19
warn @ maps.ts:40
loop_1 @ maps.ts:40
setTimeout (async)
loop_1 @ maps.ts:40
setTimeout (async)
loop_1 @ maps.ts:40
setTimeout (async)
loop_1 @ maps.ts:40
setTimeout (async)
loop_1 @ maps.ts:40
setTimeout (async)
loop_1 @ maps.ts:40
createChild @ maps.ts:40
create @ maps.ts:40
loadMap @ maps.ts:40
(anonymous) @ maps.ts:40
(anonymous) @ maps.ts:40
(anonymous) @ maps.ts:40
maps.ts:40 Chart was not disposed id-1380

I have tried adding chart.dispose() to setSelected() I get the same behaviour on the page and the following output:

Uncaught Error: EventDispatcher is disposed
    at InteractionObjectEventDispatcher.EventDispatcher.isEnabled (maps.ts:40)
    at Interaction.handleUp (maps.ts:40)
    at maps.ts:40
    at Module.each (maps.ts:40)
    at Interaction.handleGlobalUp (maps.ts:40)
    at Interaction.handleGlobalPointerUp (maps.ts:40)
    at HTMLDocument.<anonymous> (maps.ts:40)
EventDispatcher.isEnabled @ maps.ts:40
Interaction.handleUp @ maps.ts:40
(anonymous) @ maps.ts:40
each @ maps.ts:40
Interaction.handleGlobalUp @ maps.ts:40
Interaction.handleGlobalPointerUp @ maps.ts:40
(anonymous) @ maps.ts:40
maps.ts:40 Chart was not disposed id-2749

Does anyone know how to get this working?

Source: JavaSript – Stack Overflow

September 3, 2021
Category : News
Tags: amcharts | javascript | laravel | laravel-livewire

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.