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?
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!!!`);
}
},
}
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 set a function for an animation callback of a chart. So far my options object looks like this:
$scope.chartOptions = {
responsive: true,
datasetFill: false,
title: {
display: true,
text: "Title",
fontSize: 14
},
tooltips: { mode: 'label' },
animation: {
onComplete: function(animation){
$log.debug('onComplete');
},
onProgress: function(animation) {
$log.debug('onProgress');
}
}
}
See, there I have animation onComplete and onProgress that don't work. However if I set the global Chart configuration it works properly.
Chart.defaults.global.animation.onProgress = function() { $log.debug('onprogress') };
It seems like it's a simple mistake, but I just can't see it! I'm referring to the animation callbacks correct? I don't won't to set it on globals, so I can have different behaviours for different charts.
Thank you!
EDIT:
Also, using the global way I can't access the chart instance. Like:
onComplete: function(animation){
if(!this.savedImage) {
$scope.saveChartImage(this);
this.savedImage = true;
}
I solved the issue. I was passing $scope.chartOptions to a function to add attributes to it depending on some other parameters. I was doing this for several charts, so I cloned $scope.chartOptions and modified the cloned versions of it, to finally pass these clones to the charts' constructor.
The problem: In order to clone the object I was doing a shallow copy of the object, and as explained here, a shallow copy of a collection is a copy of the collection structure, not the elements. For this reason I was losing the onProgress and onComplete functions.
So I used angular.copy($scope.chartOptions).
I am using jQuery Flot plugin to draw some graphs. On my local environment everything works fine, but on a test server when i hover over a dot from the graph it yields My_text_label: %y.
In place of %y I expect the y-coordinates of that point.
Here is my code sample:
data = [{
label: label,
data: d1,
color: "#48CFAD"
}];
Options = {
xaxis: {
mode: "time"
},
yaxis: {
},
series: {
lines: {
show: true,
fill: false,
lineWidth: 2
},
points: {
show: true,
radius: 4.5,
fill: true,
fillColor: "#ffffff",
lineWidth: 2
}
},
grid: {
hoverable: true,
clickable: false,
borderWidth: 0
},
legend: {
container: legend,
show: true
},
tooltip: true,
tooltipOpts: {
content: '%s: %y'
}
};
$.plot(holder, data, Options );
When you hover over the dot the tooltipOpts: is called and it displays the content: '%s: %y'
%s reads as My_text_label
: is read as :
%y is read as %y
As you stated, it doesn't work on the test server but works fine locally. The problem could be that your version of JQuery on your local machine is different to the version on the test server.
I have had issues with Flot graphs behaving differently in two different environments. My issue was that, in the production environment, jQuery was getting reloaded after my Flot script tag was being called. Since the Flot plugins were "attached" to the jQuery variable, the Flot functionality was getting overwritten. For example, I could no longer call $.plot since the jQuery variable had been redefined.
I ended up having to use the $.getScript function to reload all the Flot code(including plugins) before calling $.plot after the page renders(and the Flot functionality has been overwritten).
In your case, since you are using a plugin, I am not sure how you could solve this effectively. I have not tested it, but try using something like
$(window).on('load', function () {
// add $.getScript calls here
});
to load your Flot js files and plugins.
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?