Customization Oracle JET charts in APEX












0















I've been developing an Oracle Apex application which uses JET charts. I have some chart mockups which I'm trying to map in an application. As I'm trying to be as accurate as possible, I have several effects I can't achieve in an easy way.



Below I listed problems I'm dealing with. In most cases I just need to know if desired effect is possible to achieve using jet, to avoid spending time on searching for some property that doesn't even exist. I'll be thankful for any advice.




  1. Position of chart legend.


According to docs, attribute responsible for legend position can take following parameters:
https://imgur.com/pYenwoP



I'd like to render legend in top-left corner of region, but it seems impossible, as there is no option like "start top". Is there any other way to move the legend to desired position?




  1. Time axis configuration.


Is there any way to impact on 2-level labels position? I have time axis, and a bar chart which presents some measure per month. I managed to display only a short form of month below each bar, and corresponding year is displayed below the first month in a year (picture related below). What I need is to display year label in the middle of year, not in the beginning.



What is more, year label should be styled different, and I figured out that x-axis.tick-label.style attribute has impact on all labels, regardless of their level.



Another case related to time axis is position of major tick, which is directly on first month in given year, and I would like it to render between bars, separating one year from another.



https://imgur.com/CKUrkTX




  1. Pie Chart.


3.1. Labels: Can I display both - series name and a value and force jet to use distance lines, like in the picture below? Can I somehow display total value presented on the chart?



3.2. Custom selection style - is there any way to define custom selection type? There are 3 available by default - "highlight", "explode" and a combination of those two. I'd like to achieve an effect like in the picture, so a custom selection type, that resize selected data item and implies box shadow would be a nice solution.



3.3 Does jet pie chart supports subcategories? In the picture there is one data item which is a subcategory of another (different shades of red), and it's displayed in a specific way - a subcategory is rendered inside the outer element. Is it possible in jet to achieve this or any similar effect?
3.4. Total value of all data items in chart. How can I display it somewhere in plot area?
https://imgur.com/zAwuUww




  1. Shape of marker in chart legend.


This problem probably is caused by my lack of skill, but I can't make jet to render markers in the shape I want to. I tried to change legend.sections.items.markerShape property to "circle" and I made sure that .symbolType property was set to "marker".Although properties were set properly markers havn't changed. Is there any other action needed (some kind of refresh) or what I'm doing wrong?




  1. Custom tooltip.


I'm going to prepare custom tooltip for my charts. I managed to prepare a function rendering my tooltip, and pass it to tooltip.renderer property. But still I can't get rid of a border in color of the series that tooltip is displayd for.
Moreover, I would like to display tooltip for whole bar that is hovered (bar chart with stacking set "on"), not for the single data series. Is it possible?



I also tried to use the way that APEX provides to customize tooltip in App Builder. In the chart attributes there is section "tooltip":
https://imgur.com/BcBACoy



Help text says, that it should be html type, and it supports substitutions of application and page items, but regardless of what I've typed in, the tooltip didn't appear at all.










share|improve this question



























    0















    I've been developing an Oracle Apex application which uses JET charts. I have some chart mockups which I'm trying to map in an application. As I'm trying to be as accurate as possible, I have several effects I can't achieve in an easy way.



    Below I listed problems I'm dealing with. In most cases I just need to know if desired effect is possible to achieve using jet, to avoid spending time on searching for some property that doesn't even exist. I'll be thankful for any advice.




    1. Position of chart legend.


    According to docs, attribute responsible for legend position can take following parameters:
    https://imgur.com/pYenwoP



    I'd like to render legend in top-left corner of region, but it seems impossible, as there is no option like "start top". Is there any other way to move the legend to desired position?




    1. Time axis configuration.


    Is there any way to impact on 2-level labels position? I have time axis, and a bar chart which presents some measure per month. I managed to display only a short form of month below each bar, and corresponding year is displayed below the first month in a year (picture related below). What I need is to display year label in the middle of year, not in the beginning.



    What is more, year label should be styled different, and I figured out that x-axis.tick-label.style attribute has impact on all labels, regardless of their level.



    Another case related to time axis is position of major tick, which is directly on first month in given year, and I would like it to render between bars, separating one year from another.



    https://imgur.com/CKUrkTX




    1. Pie Chart.


    3.1. Labels: Can I display both - series name and a value and force jet to use distance lines, like in the picture below? Can I somehow display total value presented on the chart?



    3.2. Custom selection style - is there any way to define custom selection type? There are 3 available by default - "highlight", "explode" and a combination of those two. I'd like to achieve an effect like in the picture, so a custom selection type, that resize selected data item and implies box shadow would be a nice solution.



    3.3 Does jet pie chart supports subcategories? In the picture there is one data item which is a subcategory of another (different shades of red), and it's displayed in a specific way - a subcategory is rendered inside the outer element. Is it possible in jet to achieve this or any similar effect?
    3.4. Total value of all data items in chart. How can I display it somewhere in plot area?
    https://imgur.com/zAwuUww




    1. Shape of marker in chart legend.


    This problem probably is caused by my lack of skill, but I can't make jet to render markers in the shape I want to. I tried to change legend.sections.items.markerShape property to "circle" and I made sure that .symbolType property was set to "marker".Although properties were set properly markers havn't changed. Is there any other action needed (some kind of refresh) or what I'm doing wrong?




    1. Custom tooltip.


    I'm going to prepare custom tooltip for my charts. I managed to prepare a function rendering my tooltip, and pass it to tooltip.renderer property. But still I can't get rid of a border in color of the series that tooltip is displayd for.
    Moreover, I would like to display tooltip for whole bar that is hovered (bar chart with stacking set "on"), not for the single data series. Is it possible?



    I also tried to use the way that APEX provides to customize tooltip in App Builder. In the chart attributes there is section "tooltip":
    https://imgur.com/BcBACoy



    Help text says, that it should be html type, and it supports substitutions of application and page items, but regardless of what I've typed in, the tooltip didn't appear at all.










    share|improve this question

























      0












      0








      0








      I've been developing an Oracle Apex application which uses JET charts. I have some chart mockups which I'm trying to map in an application. As I'm trying to be as accurate as possible, I have several effects I can't achieve in an easy way.



      Below I listed problems I'm dealing with. In most cases I just need to know if desired effect is possible to achieve using jet, to avoid spending time on searching for some property that doesn't even exist. I'll be thankful for any advice.




      1. Position of chart legend.


      According to docs, attribute responsible for legend position can take following parameters:
      https://imgur.com/pYenwoP



      I'd like to render legend in top-left corner of region, but it seems impossible, as there is no option like "start top". Is there any other way to move the legend to desired position?




      1. Time axis configuration.


      Is there any way to impact on 2-level labels position? I have time axis, and a bar chart which presents some measure per month. I managed to display only a short form of month below each bar, and corresponding year is displayed below the first month in a year (picture related below). What I need is to display year label in the middle of year, not in the beginning.



      What is more, year label should be styled different, and I figured out that x-axis.tick-label.style attribute has impact on all labels, regardless of their level.



      Another case related to time axis is position of major tick, which is directly on first month in given year, and I would like it to render between bars, separating one year from another.



      https://imgur.com/CKUrkTX




      1. Pie Chart.


      3.1. Labels: Can I display both - series name and a value and force jet to use distance lines, like in the picture below? Can I somehow display total value presented on the chart?



      3.2. Custom selection style - is there any way to define custom selection type? There are 3 available by default - "highlight", "explode" and a combination of those two. I'd like to achieve an effect like in the picture, so a custom selection type, that resize selected data item and implies box shadow would be a nice solution.



      3.3 Does jet pie chart supports subcategories? In the picture there is one data item which is a subcategory of another (different shades of red), and it's displayed in a specific way - a subcategory is rendered inside the outer element. Is it possible in jet to achieve this or any similar effect?
      3.4. Total value of all data items in chart. How can I display it somewhere in plot area?
      https://imgur.com/zAwuUww




      1. Shape of marker in chart legend.


      This problem probably is caused by my lack of skill, but I can't make jet to render markers in the shape I want to. I tried to change legend.sections.items.markerShape property to "circle" and I made sure that .symbolType property was set to "marker".Although properties were set properly markers havn't changed. Is there any other action needed (some kind of refresh) or what I'm doing wrong?




      1. Custom tooltip.


      I'm going to prepare custom tooltip for my charts. I managed to prepare a function rendering my tooltip, and pass it to tooltip.renderer property. But still I can't get rid of a border in color of the series that tooltip is displayd for.
      Moreover, I would like to display tooltip for whole bar that is hovered (bar chart with stacking set "on"), not for the single data series. Is it possible?



      I also tried to use the way that APEX provides to customize tooltip in App Builder. In the chart attributes there is section "tooltip":
      https://imgur.com/BcBACoy



      Help text says, that it should be html type, and it supports substitutions of application and page items, but regardless of what I've typed in, the tooltip didn't appear at all.










      share|improve this question














      I've been developing an Oracle Apex application which uses JET charts. I have some chart mockups which I'm trying to map in an application. As I'm trying to be as accurate as possible, I have several effects I can't achieve in an easy way.



      Below I listed problems I'm dealing with. In most cases I just need to know if desired effect is possible to achieve using jet, to avoid spending time on searching for some property that doesn't even exist. I'll be thankful for any advice.




      1. Position of chart legend.


      According to docs, attribute responsible for legend position can take following parameters:
      https://imgur.com/pYenwoP



      I'd like to render legend in top-left corner of region, but it seems impossible, as there is no option like "start top". Is there any other way to move the legend to desired position?




      1. Time axis configuration.


      Is there any way to impact on 2-level labels position? I have time axis, and a bar chart which presents some measure per month. I managed to display only a short form of month below each bar, and corresponding year is displayed below the first month in a year (picture related below). What I need is to display year label in the middle of year, not in the beginning.



      What is more, year label should be styled different, and I figured out that x-axis.tick-label.style attribute has impact on all labels, regardless of their level.



      Another case related to time axis is position of major tick, which is directly on first month in given year, and I would like it to render between bars, separating one year from another.



      https://imgur.com/CKUrkTX




      1. Pie Chart.


      3.1. Labels: Can I display both - series name and a value and force jet to use distance lines, like in the picture below? Can I somehow display total value presented on the chart?



      3.2. Custom selection style - is there any way to define custom selection type? There are 3 available by default - "highlight", "explode" and a combination of those two. I'd like to achieve an effect like in the picture, so a custom selection type, that resize selected data item and implies box shadow would be a nice solution.



      3.3 Does jet pie chart supports subcategories? In the picture there is one data item which is a subcategory of another (different shades of red), and it's displayed in a specific way - a subcategory is rendered inside the outer element. Is it possible in jet to achieve this or any similar effect?
      3.4. Total value of all data items in chart. How can I display it somewhere in plot area?
      https://imgur.com/zAwuUww




      1. Shape of marker in chart legend.


      This problem probably is caused by my lack of skill, but I can't make jet to render markers in the shape I want to. I tried to change legend.sections.items.markerShape property to "circle" and I made sure that .symbolType property was set to "marker".Although properties were set properly markers havn't changed. Is there any other action needed (some kind of refresh) or what I'm doing wrong?




      1. Custom tooltip.


      I'm going to prepare custom tooltip for my charts. I managed to prepare a function rendering my tooltip, and pass it to tooltip.renderer property. But still I can't get rid of a border in color of the series that tooltip is displayd for.
      Moreover, I would like to display tooltip for whole bar that is hovered (bar chart with stacking set "on"), not for the single data series. Is it possible?



      I also tried to use the way that APEX provides to customize tooltip in App Builder. In the chart attributes there is section "tooltip":
      https://imgur.com/BcBACoy



      Help text says, that it should be html type, and it supports substitutions of application and page items, but regardless of what I've typed in, the tooltip didn't appear at all.







      charts bar-chart oracle-apex pie-chart oracle-jet






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 21 '18 at 12:50









      Adam KierzkowskiAdam Kierzkowski

      212




      212
























          0






          active

          oldest

          votes











          Your Answer






          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "1"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














          draft saved

          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53412434%2fcustomization-oracle-jet-charts-in-apex%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown

























          0






          active

          oldest

          votes








          0






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes
















          draft saved

          draft discarded




















































          Thanks for contributing an answer to Stack Overflow!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53412434%2fcustomization-oracle-jet-charts-in-apex%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          Popular posts from this blog

          MongoDB - Not Authorized To Execute Command

          in spring boot 2.1 many test slices are not allowed anymore due to multiple @BootstrapWith

          Npm cannot find a required file even through it is in the searched directory