dimple.eventArgs

The dimple.eventArgs object is created by any dimple event and passed to the event handler. It contains some useful information about both the data and the shapes involved in the event.

Constructor

• dimple.eventArgs()

Properties

• dimple.eventArgs.seriesValue
• dimple.eventArgs.xValue
• dimple.eventArgs.yValue
• dimple.eventArgs.zValue
• dimple.eventArgs.colorValue
• dimple.eventArgs.frameValue
• dimple.eventArgs.seriesShapes
• dimple.eventArgs.selectedShape

Properties

dimple.eventArgs.seriesValue [code] - Contains the selected series value. If handling a click event on a stacked bar of brands stacked by region. This would contain the individual brand value of the clicked segment.

Example:

// add an event handler to the series
myChart.addCategoryAxis("x", "Region");
myChart.addMeasureAxis("y", "Sales Volume");
myChart.addMeasureAxis("z", "Sales Value");
myChart.addColorAxis("Price");
myChart.setStoryboard("Date");
var mySeries = myChart.addSeries("Brand", dimple.plot.bubble);
mySeries.addEventHandler("click", function (e) {
	console.log(e.seriesValue); // Log the brand of the clicked bubble
});

dimple.eventArgs.xValue [code] - Contains the selected x value. If the x axis is a category axis, this will contain the string value for the selected data point. If the x axis is numeric it will contain the value of the selected data point

Example:

// add an event handler to the series
myChart.addCategoryAxis("x", "Region");
myChart.addMeasureAxis("y", "Sales Volume");
myChart.addMeasureAxis("z", "Sales Value");
myChart.addColorAxis("Price");
myChart.setStoryboard("Date");
var mySeries = myChart.addSeries("Brand", dimple.plot.bubble);
mySeries.addEventHandler("click", function (e) {
	console.log(e.xValue); // Log the Region of the clicked bubble
});

dimple.eventArgs.yValue [code] - Contains the selected y value. If the y axis is a category axis, this will contain the string value for the selected data point. If the y axis is numeric it will contain the value of the selected data point

Example:

// add an event handler to the series
myChart.addCategoryAxis("x", "Region");
myChart.addMeasureAxis("y", "Sales Volume");
myChart.addMeasureAxis("z", "Sales Value");
myChart.addColorAxis("Price");
myChart.setStoryboard("Date");
var mySeries = myChart.addSeries("Brand", dimple.plot.bubble);
mySeries.addEventHandler("click", function (e) {
	console.log(e.yValue); // Log the Sales Volume of the clicked bubble
});

dimple.eventArgs.zValue [code] - It will contain the value of the selected data point on the z axis.

Example:

// add an event handler to the series
myChart.addCategoryAxis("x", "Region");
myChart.addMeasureAxis("y", "Sales Volume");
myChart.addMeasureAxis("z", "Sales Value");
myChart.addColorAxis("Price");
myChart.setStoryboard("Date");
var mySeries = myChart.addSeries("Brand", dimple.plot.bubble);
mySeries.addEventHandler("click", function (e) {
	console.log(e.zValue); // Log the Sales Value of the clicked bubble
});

dimple.eventArgs.colorValue [code] - It will contain the value of the selected data point on the color axis - not the actual color.

Example:

// add an event handler to the series
myChart.addCategoryAxis("x", "Region");
myChart.addMeasureAxis("y", "Sales Volume");
myChart.addMeasureAxis("z", "Sales Value");
myChart.addColorAxis("Price");
myChart.setStoryboard("Date");
var mySeries = myChart.addSeries("Brand", dimple.plot.bubble);
mySeries.addEventHandler("click", function (e) {
	console.log(e.colorValue); // Log the Price of the clicked bubble
});

dimple.eventArgs.frameValue [code] - It will contain the current point in the storyboard. At the point at which the series is clicked.

Example:

// add an event handler to the series
myChart.addCategoryAxis("x", "Region");
myChart.addMeasureAxis("y", "Sales Volume");
myChart.addMeasureAxis("z", "Sales Value");
myChart.addColorAxis("Price");
myChart.setStoryboard("Date");
var mySeries = myChart.addSeries("Brand", dimple.plot.bubble);
mySeries.addEventHandler("click", function (e) {
	console.log(e.frameValue); // Log the Date of the clicked bubble
});

dimple.eventArgs.seriesShapes [code] - It will contain all the shapes in the series from which the event was raised.

Example:

// add an event handler to the series
myChart.addCategoryAxis("x", "Region");
myChart.addMeasureAxis("y", "Sales Volume");
myChart.addMeasureAxis("z", "Sales Value");
myChart.addColorAxis("Price");
myChart.setStoryboard("Date");
var mySeries = myChart.addSeries("Brand", dimple.plot.bubble);
mySeries.addEventHandler("click", function (e) {
	e.seriesShapes.attr("fill", "red"); // Color all bubbles red
});

dimple.eventArgs.selectedShape [code] - It will contain the shape in the series which raised the event.

Example:

// add an event handler to the series
myChart.addCategoryAxis("x", "Region");
myChart.addMeasureAxis("y", "Sales Volume");
myChart.addMeasureAxis("z", "Sales Value");
myChart.addColorAxis("Price");
myChart.setStoryboard("Date");
var mySeries = myChart.addSeries("Brand", dimple.plot.bubble);
mySeries.addEventHandler("click", function (e) {
	e.selectedShape.attr("fill", "red"); // Color the clicked bubble red
});