I am encountering an issue with displaying amcharts in the infowindow on Google Maps. The problem is that my charts are not looping data properly within the infowindow. For example, when I click on marker 1, the data ratio does not display correctly, and when I click on marker 2, the data ratio from marker 1 shows up instead of marker 2's data.
For reference, you can view my code on Codepen.io.
Does anyone know how to ensure that the data displayed in the infowindow matches the selected marker?
When using AmChart's makeChart method, it is essential that the ID specified in the first parameter exists in the DOM; otherwise, the method will not function as expected. In this case, the initialization of AmCharts is being called before the information window is attached to the DOM. To address this issue, a domready event listener should be added to the infowindow so that the makeChart can be invoked there. Additionally, a close event listener is recommended to clear out the chart instances and conserve resources. It is important to clone the chart data during the domready event to ensure that the clear function does not remove them entirely.
The following code demonstrates how to add and clear the chart while preserving the data. I have removed the shift calls which appeared unnecessary and caused issues when reopening the infowindow:
var chartLine;
var chartWa;
google.maps.event.addListener(infowindow, 'domready', function() {
var line_data_copy = JSON.parse(JSON.stringify(item.line_data_chart));
var wa_data_copy = JSON.parse(JSON.stringify(item.wa_data_chart));
chartLine = initAmChart("divChartLine", colors_line, line_data_copy);
chartWa = initAmChart("divChartWa", colors_wa, wa_data_copy);
chartLine.allLabels[0].text = item.line_ratio+"%";
chartLine.validateData();
chartWa.allLabels[0].text = item.wa_ratio+"%";
chartWa.validateData();
});
google.maps.event.addListener(infowindow, 'close', function() {
chartLine.clear();
chartWa.clear();
})
I have a simple goal that I am working on: I want to display data obtained from a service in my component. This is how it used to work: In my component: ... dataSet: String[]; ngOnInit(){ this._service.getDataId().then(data => this.dataSet = da ...
Greetings! Below is a snippet of code from my Angular component: this.messageHistoryService.getMessageHistoriesCSV1(msgHistoryRequest).subscribe( (data) => { console.log(data.messageHistoryBytes); let file = new Blob( [data.messageHistoryBytes ...
I attempted to implement a solution I found on stackoverflow without success. The issue is that the blackout feature does not seem to activate - nothing happens. Within my JavaScript code (all enclosed in the $(document).ready(function () tag), it appears ...
Today marks my initial attempt at delving into pugJs and utilizing the command prompt, yet I encountered an error: Error: ENOENT: no such file or directory, lstat 'C:\Users\aya' Click here to view the screenshot of the error displa ...
I'm currently working on creating a table with the material UI. My goal is to populate the rows of the table based on the data received from an API response. The challenge I'm facing is that the API response includes an array of objects with mult ...
I am facing a challenge with saving persistent data in a Firefox extension. Currently, I am attempting to utilize nsIPrefBranch in the following manner: var db = Components.classes["@mozilla.org/preferences-service;1"].getService(Components.interfaces.ns ...
Greetings, I seem to be facing a challenge with my JSON data. My goal is to extract the "tag" value from the objects within the "cows" array. Delving into nested data structures is somewhat new to me, and I've hit a roadblock in this process. Any insi ...
I am currently in the process of integrating Jquery's datepicker into my website. I have successfully imported it, as it is working on a form on another page. However, I am attempting something slightly different this time. There is a pre-entered date ...
Anyone here aware of a high-quality jQuery or CSS plugin for scrollbars that supports touch functionality and smooth easing? I've been on the lookout for one, but haven't had any luck so far. Even if it comes with a price tag, I'm interested ...
My code seems to be having some issues. Can you help me figure out what's wrong? <script type="text/javascript" language="javascript"> //trying to disable scrolling on mouse over of <select> elements $(document).ready(function() { ...
Can you help me troubleshoot an issue I'm facing with creating a dataset for a line chart in Chart.js? Despite having an array of objects, the dataset isn't rendering correctly and I end up with two line charts instead of one. What could be causi ...
Struggling with a problem related to an Angular checkbox form that is generated from an API. I am able to create checkboxes, but encountering two issues: The checked state of the boxes does not align with the values retrieved from the API, and when I clic ...
Can someone assist me? I am encountering an issue where the partial view is not rendering properly using ui-router in Angular.js. Below is my code snippet. <!DOCTYPE html> <html lang="en" ng-app="Spesh"> <head> <meta charset="utf- ...
Within Express, I have set up the following route: app.get('/story/:username', function(req, res){ res.render('dashboard.ejs'); }); Prior to that, I am serving any static files located in /public: app.use(express.static(__dirname ...
I attempted to showcase information fetched by a function in my React Native rendering application. Even though I successfully retrieved the data, I am encountering issues when trying to display it on the app. This is the snippet of my code: import Reac ...
Yesterday, I upgraded from angular 1.0.8 to angular 1.2.2 and encountered a problem where the $render function in the directive below is no longer firing, despite fixing other issues that arose. Has anyone else experienced this issue before? ...
tl;dr How can I create a component that hides overflow and toggles views with a button? For example, the user can initially see tabs 1, 2, and 3 while tabs 4, 5, and 6 are hidden. Clicking a button will hide tabs 1, 2, and 3, and show tabs 4, 5, and 6 with ...
I'm having trouble with my menu; it displays when the page loads but I want it to be closed and then open when clicked. Despite my best efforts, I can't seem to fix this issue. <html> <head> <script> $(document).ready(funct ...
The webpage index.jsp is responsible for retrieving images and text data from a database using Java code. Within the JavaScript file, I have included: $(document).ready(function(){ //When Document is Ready, Show the Main Page $("#showifjavaenable ...
I'm currently in the process of creating a polygon layer on top of my Mapbox map using ReactMapboxGL. I have some Mapbox Javascript code that I need to convert into React.js format: map.on('load', function () { map.addLayer({ ...