FusionMaps XT integration with VueJs: Troubleshooting connectorClick events issue

I am experiencing some issues with events connectorClick on my VueJS processed map. When I click on the connector line in the example below, the alert function does not seem to work as expected.

Vue.use(VueFusionCharts, FusionCharts);
let grphMap = new Vue ({
el: '#app-vue',
  data: {
    type: "maps/romania",
    width: "800",
    height: "600",
    dataFormat: "json",
    dataSource: {
    'chart': {
      "theme":                "fusion",
      "nullEntityColor":      "#E5E5E9",
      "entityFillHoverColor": "#99ccff",
      "showLabels":           '1',
      "showEntityHoverEffect": "1",
      "showtooltip":          "1",
      "connectorColor":       "#0CB2B0",
      "connectorHoverColor": "#000000",
      "connectorthickness":   "3",
      "markerfontsize":       "18",
      "markerfontcolor":      "#0a0a0a",
"numbersuffix":         "%",
      "entityFillColor":      "#ff0000",
      "markerBgColor":        "#FF0000",
      "markerRadius":         "12",
      },
      "colorrange": {
          "gradient": "0",
      },
      "data": [
          {
          id: '10',
            color: "#74CCEB",
          }
      ],
      "markers": {
          "shapes": [
          {
               "id": "myCustomShape",
               "type": "circle",
               "fillcolor": "#f8bd19",
               "showborder": "0"
              }
          ],
          "items": [
              {
                shapeid: "myCustomShape",
                id: "10",
                x: "295.5",
                y: "283.5",
              },
              {
                shapeid: "myCustomShape",
                id: "11",
                x: "323.9",
                y: "226.6",
              }
          ],
          "connectors": [
              {
                "from": "10",
                "to": "11",
                "showtooltip": "1",
                "color": "#F4191F",
                "tooltext": "<b>Shipping Details:</b>{br}Daily shipment: $label Units{br}Average shipping cost: $1.2"
              }
          ]
       }
    },
    events: {
      "connectorClick": function() {
         alert("Test alert!");
      }
    }
    }
});
    <script type="text/javascript" src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bfc9cadaff8d918c918c">[email protected]</a>"></script>
    <script type="text/javascript" src="https://unpkg.com/vue-fusioncharts/dist/vue-fusioncharts.min.js"></script>
    <script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
    <script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.maps.js"></script>
    <script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.romania.js"></script>
    <script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<div id="app-vue">
      <fusioncharts
      :type="type"
      :width="width"
      :height="height"
      :dataFormat="dataFormat"
      :dataSource="dataSource"
     ></fusioncharts>
  </div>

Visit this link for the example.

I came across a similar working example that is not based on VueJs. See this example here

Can anyone identify where my mistake lies?

javascriptvue.jsfusioncharts

Answer №1

Looks like you may have overlooked binding the events object in your fusioncharts template that you've specified in the data of your component. Take a look at the code snippet below for reference:

<fusioncharts
  :type="type"
  :width="width"
  :height="height"
  :dataFormat="dataFormat"
  :dataSource="dataSource"
  :events="events" // Make sure to bind your events object here
></fusioncharts>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to relocate a child component to a different parent in React?

I have a list of child components with checkboxes, and when a checkbox is clicked, I want to move that child component inside another div. Below is an illustration of how my app should look. I need to select student names and shift them up under the "Pres ...

javascripthtmlreactjs

Step-by-step guide to tweeting with Codebird PHP from a pop-up window

I want to enhance the visitor experience on my website by allowing them to easily post a tweet with an image directly from the site. To achieve this, I have implemented the Codebird PHP library. While everything is functioning correctly at the moment, ther ...

javascriptphpjquerytwittercodebird

Dynamic HTML binding with v-model in Vue JS allows for seamless two-way

I recently incorporated Vue Js into my main MVC application. I want to be able to bind a Vue Js v-model to dynamically loaded HTML from a partial view. For example, in my partial view, I have the following: <input type="text" id="firstNam ...

htmlvue.jsmodel-view-controllerv-model

Updating an HTML input field property with JavaScript is not reflecting the changes

I am currently working on a form with two fields: stationery type and stationery request quantity. The stationery request quantity field only accepts numerical input. The minimum quantity that can be entered in this field depends on the value selected in t ...

javascripthtmlcss

Pass the value from JavaScript to PHP

I am looking to insert a JavaScript value into PHP: var temp = $('#field_id').val().charAt(0); The 'temp' variable returns values ranging from 1 to 4. var value = "<?php echo $variable[temp]['id']; ?>"; How can I re ...

javascriptphpjquery

Enhancing functionality by updating a function to accept an object as input instead of individual key:value pairs in TypeScript

I'm currently tackling a challenge with a friend's icon library component, specifically with their set() function. The issue arises when I want to invoke two functions, namely setRandomColor() and setColor(), both intended to update two values w ...

javascriptfunctionvue.jsargumentsvuejs3

Choose all elements with a specific class name without the need to specify their position in the list

I'm working on adding a function to my WordPress site that will allow me to show/hide page elements with a specific class. For example, I want any elements (such as rows, containers, and text blocks) that have the 'show-hide' class to be hid ...

javascriptgetelementsbyclassname

An internal server error has occurred within the asp.net framework, resulting in

Seeking Solution: Currently, I am in the process of developing an application where I have implemented an HTML select list to choose a category. Using AJAX web method, I am trying to retrieve items and their respective images based on the selected category ...

javascriptc#jqueryasp.netajax

The function Slice() does not function properly when used with two-dimensional arrays

I have been attempting to duplicate a 2D array by value using the slice() method in order to prevent any changes made to the new array from impacting the original. Oddly enough, it seems that this approach is effective with a 1-dimensional array but not wi ...

javascriptarraysslice

Encountering an issue with JQuery when attempting to create a double dropdown SelectList. Upon submitting the POST request, the output received is always

Two dropdownlists have been created, where one acts as a filter for the other. When selecting a customer from the dropdown Customer, only a limited set of ClientUsers is displayed in the dropdown ClientUser. This functionality is achieved using a jQuery fu ...

javascriptjqueryasp.netasp.net-core

Using axios to pass parameters in a URL with the GET method on a localhost server

I need help using Axios to consume my Go lang API in my React front-end. The route for the API is localhost:1323/profile/email/:email/password/:password, but I'm struggling to figure out how to pass the email and password parameters in the Axios GET r ...

javascriptreactjsaxioslocalhost

Updating the information displayed in one section by selecting a button on the Google Maps infowindow located in a separate section

My webpage is divided into multiple divisions. One division contains a map using the Google Maps API with markers. When I click on a marker, an info window opens up. Now, I am attempting to place a button inside that info window which, when clicked, will ...

javascriptjqueryhtmlgoogle-mapsweb

Experiencing the 'invalid_form_data' error while attempting to upload a file to the Slack API via the files.upload method in Angular 8

I am currently working on a project that involves collecting form data, including a file upload. I am trying to implement a feature where the uploaded file is automatically sent to a Slack channel upon submission of the form. Despite following the guidance ...

javascriptangulartypescriptslackslack-api

Optimizing Performance by Managing Data Loading in JavaScript Frameworks

I am new to JavaScript frameworks like React and Vue, and I have a question about their performance. Do websites built with React or Vue load all data at once? For example, if I have a page with many pictures, are they loaded when the component is used or ...

javascriptreactjsvue.js

Guide to Removing Nuxt Modules and Packages

Currently using Nuxt 2.13 and looking to remove some packages from my project. In the past, I simply deleted them from the package.json file and ran npm i to uninstall the package. However, now I am encountering an error: Module @nuxtjs/google-gtag not fou ...

vue.jsnpmnuxt.jsnode-modules

The Vue component fails to respond to updates in plugin data

I am currently working on implementing a feature where a component reacts to data changes in a custom Vue plugin. To achieve this, the plugin creates a new instance of a Vue object in its constructor: this._vm = new Vue({ data: { obj: null, stat ...

javascriptvue.jsvuejs2watch

Steps for including a token in a Nuxt Axios instance

When trying to create an axios instance and add a token header, I encountered an error. const apiClient = axios.create({ baseURL: "...", }); apiClient.interceptors.request.use( (config) => { const token = localStorage.getItem("auth._toke ...

vue.jsaxiosnuxt.js

Able to display the value when printing it out, however when trying to set it in setState, it becomes

Within my form, there's a function that receives the value: _onChange(ev, option) { console.log(option.key) // Value of option key is 3 this.setState({ dropdownValue:option.key }) // Attempting to set state with 'undefined' as ...

javascriptreactjs

I'm having trouble pinpointing the cause of the never-ending loop in this React code that is using Material UI grid

There seems to be an issue with infinite looping in this code, and I can't figure out the cause, import React, { useEffect, useState } from 'react'; import VideoCardComponent from './VideoCard'; import Grid from '@mui/material ...

javascriptreactjsmaterial-ui

Stop the duplication of the HTML content to ensure only one copy is saved

Recently, I have been coding a feature that saves the HTML of the currently displayed page to another file upon pressing a button. However, I encountered an issue where if the button is pressed multiple times quickly, the saved file contains incorrect HTML ...

javascriptphpjqueryhtmlajax