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 3 2023

Hello,

I'm using APEX 23.1.2 and I'm trying to figure out how to get a JET Treemap visual in my application. I'm very new to JET and have read the documentation, but I can't get anything to display when I run the page. I'm using the below code in a static content region initially as a test case:

<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>

I don't think it's an issue with JET initialization (though not displaying the visual at all may suggest that) since I used this blog https://hardlikesoftware.com/weblog/2018/12/20/jet-spark-charts-in-apex-interactive-grid/ to create a sparkchart to test the JET import, and was able to get a chart to display using the following HTML code

<p>
<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>
</p>

Any guidance would be greatly appreciated!

This post has been answered by Oleh Tyshchenko on Oct 9 2023
Jump to Answer
Comments
Post Details
Added on Oct 3 2023
6 comments
674 views