Skip to Main Content

APEX

Announcement

For appeals, questions and feedback about Oracle Forums, please email oracle-forums-moderators_us@oracle.com. Technical questions should be asked in the appropriate category. Thank you!

JET Treemap

falckbOct 3 2023 — edited Oct 4 2023

Hello,

I'm using APEX 23.1.2 and I'm looking for assistance on putting together a JET Treemap visual. I've been able to find quite a bit of documentation on the treemap itself, but I can't get anything to initialize within APEX. I'm very new to JET so a walkthrough from the beginning would be extremely helpful, whether documentation I haven't found or a write-up.

From what I'm understanding, it shouldn't be an issue with importing JET itself; I'm able to create a spark chart in a static content region using this HTML

<oj-spark-chart class="inline-spark" id="sparkLine1" type="line"  
        items="[5, 8, 2, 7, 0, 9, 2, 3, 4, 2]" color="red" line-width="2">
</oj-spark-chart>

found here: https://hardlikesoftware.com/weblog/2018/12/20/jet-spark-charts-in-apex-interactive-grid/, though the fact that nothing is initializing at all rather than throwing errors tells me I might not have the treemap chart imported?

I guess it's either that or I'm just not finding the right HTML code to create the treemap. Here's what I have for that HTML code:

<oj-treemap
  id="treemap1"
  animation-on-display="auto"
  animation-on-data-change="auto"
  data='[
    {
      "id": "0",
      "label": "Root",
      "population": 100,
      "meanIncome": 10000,
      "items": [
        {
          "id": "1",
          "label": "Child 1",
          "population": 40,
          "meanIncome": 5000
        },
        {
          "id": "2",
          "label": "Child 2",
          "population": 60,
          "meanIncome": 15000,
          "items": [
            {
              "id": "2-1",
              "label": "Grandchild 2.1",
              "population": 30,
              "meanIncome": 8000
            },
            {
              "id": "2-2",
              "label": "Grandchild 2.2",
              "population": 30,
              "meanIncome": 22000
            }
          ]
        }
      ]
    }
  ]'>
  <template slot="nodeTemplate">
    <oj-treemap-node
      label="[[ $current.data.label ]]"
      value="[[ $current.data.population ]]"
      color="blue" 
      short-desc="Label: [[ $current.data.label ]], Population: [[ $current.data.population ]], Income: [[ $current.data.meanIncome ]]"></oj-treemap-node>
  </template>
</oj-treemap>
Duplicate Post
This post has already been added here:
Marked by Hilary Farrell-Oracle 1.8 years ago
Comments
Locked Post
New comments cannot be posted to this locked post.
Post Details
Marked as duplicate
Added on Oct 3 2023
0 comments
174 views