Need Working Example for Highcharts Org Chart

Q&A
, , ,
1

I am trying to setup an org chart using Highcharts, but I am having trouble finding a good working example.

I am trying to implement something like this:
https://www.highcharts.com/demo/highcharts/organization-chart

My data looks like this:

image
image452×277 10.9 KB

I can paste in the JSON from the Highcharts site, and it works, but when I try to sub in getColumn-style placeholders pointing to my dataset, things get a little weird (e.g. all level1 values report to all level0 values instead of each having its own reporting lines).

What I am starting to suspect is that I either have:

  1. My input data is not setup correctly (i.e. I have a wide-short table instead of a narrow-long table).
  2. There is some iterative code that is missing.

If somebody had a simple working example of both the JSON and what the dataset looks like, it would be great to see this so that I can figure out what I am doing wrong and where. Alternately, any help at all would be greatly appreciated.

Thanks,
Ray

Here is my chart code:

{
  "chart": {
    "type": "organization",
    "inverted": true
  },
  "title": {
    "text": "Highcharts Organization Chart"
  },
  "series": [
    {
      "type": "organization",
      "name": "Highsoft",
      "keys": ["from", "to"],
      "data": [

        [["unique", ["getColumnFromGroupBy", 1]],["unique", ["getColumnFromGroupBy", 2]]],
        [["unique", ["getColumnFromGroupBy", 2]],["unique", ["getColumnFromGroupBy", 3]]]
      ],
      "levels": [
        {
          "level": 0,
          "color": "silver",
          "dataLabels": {
            "color": "black"
          },
          "height": 25
        },
        {
          "level": 1,
          "color": "silver",
          "dataLabels": {
            "color": "black"
          },
          "height": 25
        },
        {
          "level": 2,
          "color": "#980104"
        },
        {
          "level": 4,
          "color": "#359154"
        }
      ] ,
      "colorByPoint": false,
      "color": "#007ad0",
      "dataLabels": {
        "color": "white"
      },
      "borderColor": "white",
      "nodeWidth": 65
    }
  ],
  "tooltip": {
    "outside": true
  },
  "exporting": {
    "sourceWidth": 1800,
    "sourceHeight": 1600
  }
}
2

Hello @blarg, welcome to the Quick Sight community!

I did some testing on this and checked some documentation (like the Highcharts Demo Central page), and I do not believe that this organization chart is available in Quick Sight. I tried running it with static data, as well as dataset data and I have not been able to get it to return the format.

Also, a side note, I believe the way you are pulling fields in the data portion of the JSON is slightly incorrect. It seems like the formatting looks more like this:

      "data": [
        "map",
        ["getColumn",0,1,2,3],
        {
          "Country":["get",["item"],0],
          "Customer":["get",["item"],1],
          "Industry":["get",["item"],2],
          "Value":["get",["item"],3]
        }
      ],

I believe that only the order of the columns is what matters, not whether they exist in the GroupBy column or the Values column.

Unfortunately though, I think you will need to use a different chart entirely, as I do not believe this one is currently available. I can tag this topic as a feature request though, so our support team can identify other highchart types that Quick Sight users are looking for. Let me know if you have any further questions. Thank you!

3

Hello @blarg, since we have not heard back from you with any follow-up questions, I will archive this feature request for our support team. If you need further assistance, please post a new topic and include a link to this question to provide relevant information. That will ensure you are at the top of the priority list for a response from one of our Quick Sight experts. Thank you!