I have an AnyChart Treemap. Its nodes contain (besides their natural value) also additional attribute. I want to show (ultimately perform action upon) the value of that attribute on click on rectangle.
Example: assume tree map with data of population of countries where additional attribute contains URL shortcut to map of state or continent:
var dataSet = [
{name: "Europe", url: "https://maps.google.com/europemap", children: [
{name: "Czechia", value: 10600000, url: "https://maps.google.com/czechiamap"},
...
]}
];
Since clicking on rectangle is currently reserved to drilling down to deeper level, I started experimenting with context menu with custom action, which would suffice my needs. The example of context menu shows how to implement action handler to serve click on menu item. Unfortunately I cannot figure out how to see the corresponding data set node from within the body of action handler.
I tried to inspect the this object in action handler which seems to be an uncomprehensible internals of minified library or may be parts of generated SVG.
Is there any way to identify data the concrete rectangle has been built from? (I suspect the original data set is completely lost after SVG has been generated - if I am right, some advice how to append dataset to generated SVG as a metadata would be helpful too.)
To access the custom field in your data through the context menu, you could use the listen() method with event type contextMenu and a custom item provider for the context menu as shown in the sample below.
anychart.onDocumentReady(function () {
// create data
var data = getData();
// create a chart and set the data
var chart = anychart.treeMap(data, "as-tree");
// find index of a clicked point
var clickedPointIndex;
chart.listen('contextMenu', (e) => {
clickedPointIndex = e.pointIndex - 1 //indexes in data are 0 based
});
// replace menu items provider
chart.contextMenu().itemsProvider(function() {
var items = {
'menu-item-1': {
'text': 'Log custom field to console',
'action': () => {
var parent = data[0];
var child = parent.children[clickedPointIndex];
var customField = child.customField
if (customField){
console.log(customField);
} else {
console.log("No custom field found");
}
}
}
}
return items;
});
// set the container id
chart.container("container");
// initiate drawing the chart
chart.draw();
});
const getData = () => {
return [
{name: "European Union", children: [
{name: "Belgium", value: 11443830, customField: "Yes"},
{name: "France", value: 64938716},
{name: "Germany", value: 80636124},
{name: "Greece", value: 10892931},
{name: "Italy", value: 59797978},
{name: "Netherlands", value: 17032845},
{name: "Poland", value: 38563573},
{name: "Romania", value: 19237513},
{name: "Spain", value: 46070146},
{name: "United Kingdom", value: 65511098}
]}
];
}html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}<link href="https://cdn.anychart.com/releases/8.12.0/css/anychart-ui.min.css" rel="stylesheet"/>
<script src="https://cdn.anychart.com/releases/8.12.0/js/anychart-base.min.js?hcode=a0c21fc77e1449cc86299c5faa067dc4"></script>
<script src="https://cdn.anychart.com/releases/8.12.0/js/anychart-treemap.min.js?hcode=a0c21fc77e1449cc86299c5faa067dc4"></script>
<script src="https://cdn.anychart.com/releases/8.12.0/js/anychart-exports.min.js?hcode=a0c21fc77e1449cc86299c5faa067dc4"></script>
<script src="https://cdn.anychart.com/releases/8.12.0/js/anychart-ui.min.js?hcode=a0c21fc77e1449cc86299c5faa067dc4"></script>
<div id="container"></div>