Hyperbolic Tree Maps and Tree maps
Treemaps is currently under development, but here is a small taste of what you can expect in the future.
At the moment there is four algorithms implemented to get users up and running quickly. These are the SliceAndDice, Stripes, Squarified, and Strip algorithm. By extending the series object, the users can also add their own algorithms for layouting the data.
A levels object is introduced to let the users set wanted options to a specific level, this is displayed in some of the demos. The levels object is great for using a mix of several algorithms in the same chart.
Demos:
- http://jsfiddle.net/highcharts/sqxqq1ry/
- http://jsfiddle.net/highcharts/pa1eoqps/
- http://jsfiddle.net/highcharts/tm720ufm/
-
Hi, I am not completely sure what you are looking for when you say equal dimension tiles, but could it be something like this example: http://jsfiddle.net/phvp6mzq/1/
-
Anonymous commented
Hi team,
i wanted to know if we can get equal dimension tiles in treemaps. If so, how can i do it. -
Unfortunately this feature request applies to both hyperbolic treemaps and regular treemaps, so we don't have a feeling of how important hyperbolic treemaps are. But currently we don't have concrete plans for this.
-
David commented
Dear HighCharts team,
I would like to know if there is any plan of development a Hyperbolic Trees.Thanks.
-
kzoon commented
I noticed that treemap has no animation, making it the only chart type without animation. Will treemaps implement animation in future relesases?
-
Sorinel commented
Hi Jon,
Thank you for the answers:
(1) I tried the 'interactByLeaf' from the version 4.1.2 and it's working well -- it is exactly what I wanted -- thank you 1000 times.
(2) for the label rotation I used the workaround with the negative degree (-90) and as it's working, I am OK with it, no pressure here :)
(3) for the "reset zoom" button for the line-chart, I already sent to your support the test-case to debug (including a solution suggestion), but I can repeat it here too, no problem for me:
- it's happening only with the IE11 (FF, Chrome, IE10 and IE9 are fine)
- use your demo from here: http://www.highcharts.com/demo/line-time-series
- zoom-in and then try to zoom-out. With IE11, one click is not working, but double-click does.Cheers,
Sorinel C. -
Hi Sorinel,
I have created an github issue on the axis labels rotation which does not work properly.
You can follow the status of the issue on: https://github.com/highslide-software/highcharts.com/issues/3891 -
Hi Sorinel, sorry for this late answer.
In the next minor version of Highcharts there will be a new series option called interactByLeaf (boolean false or true). This will allow you to interact with the points in the same way you tried in beta version. You can already try it out by using the latest treemaps file from the master branch on github.
From your comment on February 20:
"2. Now, I have observed that the "zoom out" button is working only on double-click (i.e. line chart). Have you changed something in this area too?"
I can not seem to find this issue, could you provide a jsfiddle demo of this?I will discuss and have a look at your other suggestions.
-
Sorinel commented
Hi again,
One last question here:
I tried the tree-map from the new version of HighCharts 4.1.1, and I saw functionality that I would like it enhanced.
- Hovering/selecting the tree-map cells is done to the top level cells (parent) instead of leaf cells.
In my case, I have tree-map with 3 levels (Country/Region/City), and in order to access the lowest cell (City) in order to drill from it I have to zoom-in 2 times (Country -> Region, Region - > City). This is not very user friendly.Note: when I played with a beta version of the tree-map I could do this (select directly the leaf cells) without any problems (the beta file is sent to support by email).
Impact in your code:
- Drawing the cell labels and borders should not be only based on ZIndex, and the borders should have a bigger importance in the layout computation (currently, you just decorate the cell, but if we have big borders – i.e. 10px – that will cover the small cells of 5-6px).
- Zoom-in logic has to be updated to go to the parent of the selected leaf cell. (Here it’s fine to click twice on ‘<- Back’ button, because this is a reaction to the initial action of the user, aka zoom-in. If the user wants to drill-down -- drill-down is not zoom-in, it’s opening another page with the selected cell’s info -- from the leaf cell then he’s not forced to zoom-in twice, so he has more flexibility).
- I understand the reason of your design, to simplify the developer’s life, but we have first to simplify the user’s life Is it possible to have such behavior in the next version?
Regards,
Sorinel C. -
Sorinel commented
Hi again,
Sorry guys, but I found in the new version 4.1.1 a small issue:
- I observed that the xAxix.labels.rotation is not working any longer.I tried the below config on your demo, and it's not working:
$(function () {
$('#container').highcharts({
xAxis: {
labels : {
rotation : 270
},
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},plotOptions: {
series: {
dataLabels: {
align: 'left',
enabled: true
}
}
},series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
});Regards,
Sorinel C.PS: before it used to work with value:
rotation : 270
but right now it's working only with:
rotation : -90
-
Sorinel commented
Thank you Torstein,
1. The trick with the labels worked very well. Thanks!
2. Now, I have observed that the "zoom out" button is working only on double-click (i.e. line chart). Have you changed something in this area too?
3. In treemap, how do i change the 'hover' logic to select only the leaf cells ?
Regards,
Sorinel C. -
@Sorinel, The contrast data label color and shadow is set in http://api.highcharts.com/highcharts#plotOptions.series.dataLabels.style. So you just set the color to what you want, and the textShadow to "none" and you're back to where we were.
-
Sorinel commented
Few more aspects regarding treemaps:
- 1. the first 2 above demo links are not working, only the 3rd one is OK.
- 2. I would like to override the "mouse hover" logic, and highlight only the leaf cells, not the bigger ones. For the bigger ones, it was OK hovering only on its label (if any is defined).Regards,
Sorinel C. -
David commented
Dear HighCharts team,
I would like to know if there is any plan of development a Hyperbolic Trees.Thanks.
-
Sorinel commented
Hi Jon,
Thank you for the response, and the new version 4.1.1.
I would like to put back the labels format (I don't like the contrast enhancement) for all the charts (inclusive pie with labels outside of slices).
Can you tell me how to have the previous simple labels please?
Thank you.
For the treemap:
- I have top plug my zoom-in logic as I said earlier.
- I want to have simple labels for the leaf cells too (too much bold and shadows changes the focus of the chart; the user will see only labels).Thanks again.
-
// To add extra functionality before or after
Highcharts.wrap(Highcharts.seriesTypes.treemap.prototype, 'drillCloser', function (proceed) {
// Do something before// Call original funtion
proceed.apply(this, Array.prototype.slice.call(arguments, 1));// Do something after
});// To override the complete function
Highcharts.seriesTypes.treemap.prototype.drillCloser = function () {
// Do your own thing
}Read more about extending Highcharts at: http://www.highcharts.com/docs/extending-highcharts/extending-highcharts
Have a look at the original drillCloser function for inspiration on what to do once its called. The important thing is that some kind of action/event should call the drillToNode(id) function, where the argument is the id of the node which will be the new root.
Color Axis: Will have a look for bugs. As long as the colorAxis object is defined correctly (http://api.highcharts.com/highmaps#colorAxis), and the points have a colorValue, then your settings are correct. Will give more information about this after some thorough testing.
-
@Sorinel: I will come back to you with a detailed answer soon.
@Bryan: Treemaps is a part of the next version of Highcharts, which is planned to be released within the next few weeks.
-
Sorinel commented
Q: How can I override the function "drillCloser()" before being called first time, please?
-
Sorinel commented
Hello,
I have a question regarding the "color axis".
I built my treemap that has 2 kind of values (size + color), and I want to map the color values to the 'color axis', which will be displayed next to treemap.
The problem here is that the "dynamic marker" is not following the color values, but the size values.
- How do I know that?
-- because the color value is between [0-1] and the size is much bigger [0-100]
-- and the little arrow marker is always pointing to value 1 on color axis.Is there a mapping between the 'color axis' and the treemap to follow a specific attribute of the tree-cell ?
...for example: I put the size in the attribute 'value' and color in 'colorValue' of the each tree cells.Regards,
Sorinel C. -
Bryan commented
When might we expect treemaps to be completed? Is there an ETA?
Thanks!