I'm trying to draw a graph inside an infowindow, but flot is not executing—and is not throwing any errors. I read in the flot forum that often people have trouble with doing something like this because the placeholder element must be visible (that might be a red-herring here tho).
I'm able to get the following to produce the graph appropriately in a different element:
$.plot(
$("#placeholder"),
[ f_data[loc] ],
{
grid: { hoverable: true, clickable: true },
series: {
bars: { show: true },
clickable:true,
color:'#3FA9F5',
shadowSize: 0
},//series
xaxis: {
tickDecimals:0,
tickSize:1
}//xaxis
}
);//$.plot
But when I put the above into, or referenced from, the google.maps.event.addListener(), it does nothing (not even add the <canvas> elements).
I made sure to put it after infowindow.open(map,marker);, so that makes me think the placeholder element is visible. I also made sure #placeholder has substance/defined dimensions.
P.S. I tried what Mike Williamson reported as his eventual solution to Google Maps V3: Loading infowindow content via AJAX, but that didn't work either.
EDIT
Example of flot working outside of infowindow: index2.html
Example of flot not working inside of infowindow (addListener 'domready'): index3.html
Example of flot not working inside of infowindow (setTimeout): index4.html
The issue is that the content div has not been attached to the domain yet (so $("#placeholer") can't find it). You need to wait for the infowindow domready event to fire before running your code to plot the graph, something like this:
UPDATE: The code below works for me on a local copy (I did modify the css, but I don't think that was required).
google.maps.event.addListener(marker, 'click', (function(marker, locale, s, flot_data) {
return function() {
var fname = 'http://clients.frende.me/incognito/images/'+date+'_'+locale.toLowerCase().replace(/\s/g,'')+'.svg';
infowindow.setContent('<div id="gMaps_infowindow"><h3>'+locale+' ('+hour+':00): $'+s.total+'</h3><div id="flotIW" style="height:200px; width:350px;" name="'+locale+'"></div></div>');
google.maps.event.addListener(infowindow, 'domready', function() {(function(f_data,loc) {
$.plot(
$("#flotIW"),
[ f_data[loc] ],
{
grid: { hoverable: true, clickable: true },
series: {
bars: { show: true },
clickable:true,
color:'#3FA9F5',
shadowSize: 0
},//series
xaxis: {
tickDecimals:0,
tickSize:1
}//xaxis
}
);//$.plot
})(flot_data,locale)});
infowindow.open(map, marker);
//open_popUp(flot_data,locale);
//open_drawGraph(locale);
}//return
})(marker, locale, s, flot_data));//google.maps.event.addListener
(another option is to create the domain node directly, use that to render your graph, and pass that into the setContent call (which will take either a string or a DOM node).
Have you tried wrapping your $.plot in a setTimeout(function(){$.plot({stuff})}, 0) ?
Sometimes this helps give the browser time to finish drawing whatever elements it needs to before it executes.
You can find more information why this might be useful here: Why is setTimeout(fn, 0) sometimes useful?
Related
I have made a line chart using react-chartjs-2 with a plugin called chartjs-plugin-zoom. I want to display the zoom level in console when zooming the chart. However, the onZoom seems not being triggered or called when zooming as I can't see any updates in the console panel. Would like to ask whether my syntax for onZoom is wrong and how can I fix that?
online example
https://codesandbox.io/s/musing-frost-m6fuz?file=/src/App.js
This is because you putted the onZoom callback in the wrong place in the options object. You putted it at the root of the zoom plugin config while it has to be configured in the zoom part so in this namespace: options.plugins.zoom.zoom.onZoom
https://codesandbox.io/s/happy-forest-9mtii?file=/src/App.js
You have placed the onZoom in the wrong nested object.
If u place the onZoom function inside the plugins-zoom-zoom object it will work.
https://codesandbox.io/s/lively-river-zry93?file=/src/App.js:3038-3538
plugins: {
zoom: {
zoom: {
wheel: {
enabled: true
},
mode: "x",
onZoom: function ({ chart }) {
console.log(`I'm zooming!!!`);
},
// Function called once zooming is completed
onZoomComplete: function ({ chart }) {
console.log(`I was zoomed!!!`);
}
},
}
First of all, here's the standard JSFiddle for a Force-Directed Graph.
Here's the JSFiddle for my (perhaps misuse of) Force-Directed Graph.
My JSFiddle is throwing a larger-than-usual lump of data at Highcharts (scroll right to the bottom of the JS panel to see actual code) which may be the reason why I'm having the problem that I am having, namely that the lines joining the nodes are missing.
Other non-standard things are happening, e.g.
series: [{
dataLabels: {
enabled: true
},
data: Data.DAT,
formatting: Data.FMT
}
]
The formatting tag is permitted (according to Highcharts themselves) as it doesn't clash with anything in Highcharts API. In subsequent iterations of the main code base, I put everything into data and refer to DAT and FMT deeper in.
It is possible that something in the node management is amiss
e.options.data.forEach(function (link, i) {
if (!e.options.formatting[link.from]) {
console.log("No formatting given for FROM %s", link.from);
} else {
nodes[link.from] = {
id: link.from,
marker: {
radius: e.options.formatting[link.from].size
},
plotX: e.options.formatting[link.from].x,
plotY: e.options.formatting[link.from].y,
fixedPosition: true,
name: e.options.formatting[link.from].name,
color: e.options.formatting[link.from].colour
};
}
if (!e.options.formatting[link.to]) {
console.log("No formatting given for TO %s", link.to);
} else {
nodes[link.to] = {
id: link.to,
marker: {
radius: e.options.formatting[link.to].size
},
plotX: e.options.formatting[link.to].x,
plotY: e.options.formatting[link.to].y,
fixedPosition: true,
name: e.options.formatting[link.to].name,
color: e.options.formatting[link.to].colour
};
}
});
However, I'm at a loss trying to work out how to gets the lines to reappear, thus this posting.
The reason your lines disappear is because you are above turboThreshold. You can see this by looking at console which gives the following error:
Highcharts error #12: www.highcharts.com/errors/12
The fix for this, is either to comply with turbo threshold, that is format your series as an array (which could improve performance). Or to increase the turbo threshold. The latter will make it work, but performance will not be great.
Working example: https://jsfiddle.net/ewolden/3qLdmut8/
Is there a way to make combined map which could use "drill-down" behaviour for some areas and "select" behaviour for other ones areas?
I believe that what you are asking can be achieved also with some of the standard functionalities provided by jVectorMap. In my example below, all US regions other than Texas can be selected, whereby the normal multimap drill-down is performed just only for US-TX.
$(document).ready(function () {
new jvm.MultiMap({
container: $('#map'),
maxLevel: 1,
main: {
map: 'us_lcc',
regionsSelectable: true,
regionStyle: {
selected: {
fill: 'green'
}
},
onRegionClick: function(event, code) {
if(code == "US-TX") {
return false;
} else {
event.stopImmediatePropagation();
}
}
}
});
});
Explanation:
As the documentation says here, the main Map of the MultiMap object can be configured the same way as the "normal" Map.
Inside the multi-map onRegionClick handler, the region selection can be avoided by returning false, and the drilldown can be stopped by invoking stopImmediatePropagation(). I tested this snippet with jVectorMap version 2.0.2 but it should work also with the latest versions.
BTW, thanks to bjornd for the great jVectorMap.
There's no standart behaviour to reach this.
To handle this I had to modify MultiMap file. In addMap function you could add
hardcode check region code or add it to config and pass or deny drilling down.
I'm trying to integrate a map in Angular Material tabs. To be exact, a map in all the tabs. I'm using Datamaps for rendering the maps.
I made a pen with the demo I worked on, http://codepen.io/sgsvenkatesh/pen/yJbYOj
The code works exactly as expected when I wrap initialisation of map with setTimeout. (which I commented out in the above pen in line 128)
The code works perfectly fine when setTimeout is applied like shown below.
setTimeout(function () {
new Datamap({
element: elem[0].querySelector(".map"),
scope: 'usa',
projection: 'equirectangular',
height: 500,
fills: {
defaultFill: '#F5F5F5'
},
data: scope.dataset,
geographyConfig: {
highlightBorderColor: '#bada55',
popupTemplate: function (geography) {
return '<div class="hoverinfo">' + geography.properties.name + '</div>';
},
highlightBorderWidth: 2
}
}).labels({'customLabelText': scope.USData});
}, 1000);
In my opinion, the problem is because of Datamaps being rendered even before Angular Material rendering is complete. (probably, that is why the svg doesn't have any width/height)
Does Angular Material provide a callback after the rendering is complete? If not, how do we achieve any DOM manipulation, which is supposed to happen after material rendering.
Please comment if more information is needed.
I'm using Highcharts to create some charts on the page. I'm trying to use the customEvents plugin to add functionality to a bubble click (pop up a modal when bubble clicked). I know Highcharts can do this without a plugin, but I need to add other functionality to other charts on the page, and only the plugin provides that functionality. So here's the issue:
I successfully added an event handler function to bubble click. It looks like this:
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.projectId}',
events: {
click: function (event) {
console.log("Evt:",event); // event.point has what I need
console.log(event.point); // undefined
$('#modalTable2').dataTable().fnClearTable();
$('#modalTable2').dataTable().fnAddData([event.point.x,event.point.y,event.point.z]);
$('#modal2').modal('show');
}
}
},
},
bubble: {
marker: {enabled:true},
threshold: -10,
}
},
As stated in the code comments, I can see event.point in the properties in the Javascript console, but it's not actually accessible/defined in code. How can I access this object?