I suggest you ...

630 votes
Vote
Sign in
Check!
(thinking…)
Reset
or sign in with
  • facebook
  • google
    Password icon
    I agree to the terms of service
    Signed in as (Sign out)
    You have left! (?) (thinking…)
    anonymous shared this idea  ·   ·  Flag idea as inappropriate…  ·  Admin →
    completed  ·  AdminTorstein Hønsi (CPO, Founder, Highcharts JS) responded  · 

    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/VUrr9/
    - http://jsfiddle.net/highcharts/tm720ufm/

    101 comments

    Sign in
    Check!
    (thinking…)
    Reset
    or sign in with
    • facebook
    • google
      Password icon
      I agree to the terms of service
      Signed in as (Sign out)
      Submitting...
      • Anonymous commented  ·   ·  Flag as inappropriate

        Hi team,
        i wanted to know if we can get equal dimension tiles in treemaps. If so, how can i do it.

      • David commented  ·   ·  Flag as inappropriate

        Dear HighCharts team,
        I would like to know if there is any plan of development a Hyperbolic Trees.

        Thanks.

      • kzoon commented  ·   ·  Flag as inappropriate

        I noticed that treemap has no animation, making it the only chart type without animation. Will treemaps implement animation in future relesases?

      • Sorinel commented  ·   ·  Flag as inappropriate

        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.

      • AdminJon Arild Nygård (Admin, Highcharts JS) commented  ·   ·  Flag as inappropriate

        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  ·   ·  Flag as inappropriate

        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  ·   ·  Flag as inappropriate

        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:

        http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-datalabels-align-left/

        $(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  ·   ·  Flag as inappropriate

        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 commented  ·   ·  Flag as inappropriate

        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  ·   ·  Flag as inappropriate

        Dear HighCharts team,
        I would like to know if there is any plan of development a Hyperbolic Trees.

        Thanks.

      • Sorinel commented  ·   ·  Flag as inappropriate

        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.

      • AdminJon Arild Nygård (Admin, Highcharts JS) commented  ·   ·  Flag as inappropriate

        // 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 commented  ·   ·  Flag as inappropriate

        Q: How can I override the function "drillCloser()" before being called first time, please?

      • Sorinel commented  ·   ·  Flag as inappropriate

        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  ·   ·  Flag as inappropriate

        When might we expect treemaps to be completed? Is there an ETA?

        Thanks!

      ← Previous 1 3 4 5 6

      Feedback and Knowledge Base