Customization Oracle JET charts in APEX
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.
- 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?
- 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
- 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
- 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?
- 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
add a comment |
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.
- 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?
- 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
- 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
- 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?
- 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
add a comment |
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.
- 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?
- 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
- 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
- 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?
- 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
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.
- 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?
- 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
- 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
- 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?
- 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
charts bar-chart oracle-apex pie-chart oracle-jet
asked Nov 21 '18 at 12:50
Adam KierzkowskiAdam Kierzkowski
212
212
add a comment |
add a comment |
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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