How can I add click event to my Raphael pie chart ?
var r = Raphael("holder-1",340, 185);
pie = r.g.piechart(150,85, 75, values , {legend: labels, legendpos: "east"});
I got the answer it is:
pie.click(function () { });
Can I pass value to the onclick event? Here can I pass values and labels to onclick` function?
According to the docs for the node attribute, you should just be able to attach events as you would any DOM element using it:
pie.node.onclick = function () { /* Something */ };
Related
I have a layer with two polylines and polylineDecorators. I would like to highlight both polylines and polylineDecorators when I hover on any of these. Right now I'm able to highlight only one at the time when hovering on it.
Here is my code:
var layer_migration = L.layerGroup({
layerName: 'layer_migration',
pane: 'linesPane',
});
function onEachFeature_migration (feature, layer) {
var polyline = L.polyline(layer.getLatLngs(),{
color: "#8B0000",weight: 5,opacity: 0.4,dashArray: '8,8',
dashOffset: 0
}).addTo(layer_migration);
var PLdecorator1 = L.polylineDecorator(polyline, {
patterns: [{
offset: '104%',
repeat: 100,
symbol: L.Symbol.arrowHead({pixelSize: 16,
pathOptions: {color: "#8B0000",fillOpacity: 0.6,weight: 0
}
})
}]
}).addTo(layer_migration)
var myfeatures = L.featureGroup([polyline,PLdecorator1]).addTo(layer_migration);
myfeatures.on('mouseover', function(e) {
var layer = e.target;
layer.setStyle({color: '#8B0000',opacity: 1,fillOpacity:1
});
});
}
Any help super appreciated.
Thanks,
P
In your mouseover callback, I think that e.target will just refer to the individual layer (polyline or decorator) that triggered the event, not the collection of layers that make up the feature group. I've not tested it, but according to the docs, you ought to be able to get the effect you want by calling .setLayer() on the feature group itself:
myfeatures.on('mouseover', function(e) {
myfeatures.setStyle({color: '#8B0000',opacity: 1,fillOpacity:1});
});
Also, if the two polylines are created by two separate calls to onEachFeature_migration(), then they will end up as two separate feature groups. To get around this, you might need to assign an empty featureGroup to myfeatures outside the function, then add the new polylines to it inside the function using myfeatures.addLayer().
I have implemented editable AG-Grid. In the grid, one of the column displays country of the player as shown below:
Now in last column, when user click on the cell, I want to display list of available countries as a dropdown.
Here by default AG-Grid displays normal dropdown. Which I want to replace with Bootstrap-select.
To achieve this, I have implemented custom selector and using Bootstrap-select library.
But when cell is clicked, Dropdown is not being rendered. I am not getting any error though in console.
Here is the code of my custom cell-editor:
var selectCellEdior = function () { };
selectCellEdior.prototype = {
init: function (params) {
selector = document.createElement('select');
for(var i = 0; i < params.values.length; i++) {
var option = params.values[i];
$('<option />', { value: option, text: option }).appendTo(selector);
}
this.cellSelector = selector;
$(this.cellSelector).selectpicker({ size: 'auto' });
},
getValue: function () {
return $(this.cellSelector).find('.btn-text').text();
},
getGui: function () {
return this.cellSelector;
},
destroy: function () {
$(this.cellSelector).remove();
}
};
Here is the Sample Code
I dont understand what is the issue.
The problem is the selectpicker jQuery method seems to add a display: none to the select element. Ag-Grid is adding it to the DOM you just can't see it. Additionally the getValue function is not returning the selected option's text.
The following changes to getValue and getGui will make the grid work:
...
getValue: function () {
return $(this.cellSelector).val();
},
getGui: function () {
this.cellSelector.style.display = 'block';
return this.cellSelector;
},
...
Here is the modified Plunker
For anyone looking at this now.... Ag-grid has a method afterGuiAttached that is called after the GUI has been attached to the Grid's cell. If you're noticing that the bootstrap-select still isn't "quite right" after following the instructions above, put ALL of the calls to selectpicker in afterGuiAttached instead of init or getGui. This will place the bootstrap-select into a div with the right classes it needs (dropdown, bootstrap-select, etc), and create all of the bootstrap-select elements that are properly shown/hidden.
We have multiple charts with zoom. Is there a way to link all this charts so they always have the same zoom factor when the user zoom in one of the charts?
When having multiple grids in the same chart is not a possibility, I use this trick to do the job:
myChart.on('datazoom', function (evt) {
var zoom = myChart.getOption().dataZoom[0];
myOtherChart.dispatchAction({
type: 'dataZoom',
dataZoomIndex: 0,
startValue: zoom.startValue,
endValue: zoom.endValue
});
});
Both charts have dataZoom, in my case I hide the one in myOtherChart.
If you've got more events to track, creating the action can be simplified by letting echarts create it:
["datazoom", "legendselectchanged", /* more events*/].forEach((eventType: string) => {
this.chartInstance1.on(eventType, (event) => {
// Automatically create an action from the event
let newEvent = this.chartInstance1.makeActionFromEvent(event);
// Dispatch it directly
this.chartInstance2.dispatchAction(newEvent);
});
})
For everyone who wants to go further, also synchronizing mouse, legend and magic events, its easier to use the connect function.
Template:
// chart 1
<div echarts (chartInit)="onChartInit($event)"></div>
// chart 2
<div echarts (chartInit)="onChartInit($event)"></div>
Typescript:
import { connect, ECharts } from "echarts";
// ...
onChartInit(chart: ECharts) {
this.charts.push(chart);
if (this.charts.length === 2)
// This will do the magic out of the box
connect([charts[0], charts[1]]);
}
To handle clicks on NVD3 pie chart slices you can do the following:
var chart = nv.models.pieChart()
...
chart.pie.dispatch.on("elementClick", function(e) {
var pie_sector_name = e.data.label;
// do something;
});
However, I receive clicks when the pie slices are selected. Is it possible to handle clicks when the chart labels are selected? Pie slices could be sometimes just so tiny that it is impossible to click on them.
Thank you.
d3.selectAll(".nv-pieLabels").on("click", function () {
alert("clicked");
});
I want to select two or more markers in a chart and perform an action using their coordinates.
Selecting the points is the main problem since I didn't find anything on this topic and I'm not sure if it can be done.
I did something like this in a Pie Chart.
What I did was use "connectToPlot" to change the series color when the user click on it.
This is a resume of the work that I did: change series color when user click on it
See that when you click on the serie, the color changes to gray and if you click again the series returns to it original color (saved it in the attribute "originalColor").
pieChart.connectToPlot("default", function(evt) {
var shape = evt.shape;
var type = evt.type;
if (type == "onclick") {
var fillColor = "rgb("+shape.fillStyle.r+", "+shape.fillStyle.g+", "+shape.fillStyle.b+")"; console.log(shape.fillStyle);
if(shape.rawNode.getAttribute("originalColor")==null)
shape.rawNode.setAttribute("originalColor",fillColor);
var strokeColor = "rgb("+shape.strokeStyle.color.r+", "+shape.strokeStyle.color.g+", "+shape.strokeStyle.color.b+")";
if(fillColor=='rgb(238, 238, 238)'){
shape.setFill(shape.rawNode.getAttribute("originalColor"));
shape.setStroke(shape.rawNode.getAttribute("originalColor"));
}else{
shape.setFill('rgb(238, 238, 238)');
shape.setStroke(shape.rawNode.getAttribute("originalColor"));
}
}