Create a Heatmap with Grouped Categories using Highcharts
I have to create a Heatmap with Grouped Categories as shown in the below image.
I could only achieve the below functionality as of now.
The link to my codepen is https://codepen.io/DukeBoy200/pen/xmpYxo?editors=1010#0.
The problem with what I have done until now is it has only one common color axis for all rows in all three categories. But I need to group the color axis by each individual row in each category. I mean, the heat colour stops that I mentioned in the code,
[0, '#00FF00'],
[0.3, '#ADFF2F'],
[0.6, '#FFFFCC'],
[1, '#FFFF00']
should get applied for each individual row in a category instead of the entire heatmap. In a simple language, I want to have a heat range for a single value in a single grouped category. Example, The heat range for the value 'A' for the grouped category 'I' is 4.99 to 7.78 (4.99, 5.68, 5.92 and 7.78).
After trying different approaches, I understood neither there is a direct way nor I can tweak the existing properties to achieve the desired functionality.
Hence, I thought of implementing one heatmap for each individual category. But the problem with this approach is I would end up in having a different color axis for each individual heatmap.
I already went through the answer to have one color axis for multiple heatmaps, Highcharts: multiple heatmaps with shared color bar but I couldn't understand how can I use it in my case.
Can someone please suggest me a different approach to achieve my functionality?
highcharts heatmap
asked Jan 3 at 6:50
Srichandradeep CSrichandradeep C
377111
add a comment |
I have to create a Heatmap with Grouped Categories as shown in the below image.
I could only achieve the below functionality as of now.
The link to my codepen is https://codepen.io/DukeBoy200/pen/xmpYxo?editors=1010#0.
The problem with what I have done until now is it has only one common color axis for all rows in all three categories. But I need to group the color axis by each individual row in each category. I mean, the heat colour stops that I mentioned in the code,
[0, '#00FF00'],
[0.3, '#ADFF2F'],
[0.6, '#FFFFCC'],
[1, '#FFFF00']
should get applied for each individual row in a category instead of the entire heatmap. In a simple language, I want to have a heat range for a single value in a single grouped category. Example, The heat range for the value 'A' for the grouped category 'I' is 4.99 to 7.78 (4.99, 5.68, 5.92 and 7.78).
After trying different approaches, I understood neither there is a direct way nor I can tweak the existing properties to achieve the desired functionality.
Hence, I thought of implementing one heatmap for each individual category. But the problem with this approach is I would end up in having a different color axis for each individual heatmap.
I already went through the answer to have one color axis for multiple heatmaps, Highcharts: multiple heatmaps with shared color bar but I couldn't understand how can I use it in my case.
Can someone please suggest me a different approach to achieve my functionality?
highcharts heatmap
asked Jan 3 at 6:50
Srichandradeep CSrichandradeep C
377111
It might be easier to create a function that generates colors per series and category, and sets the color explicitly per point before you give the data to highcharts, that way you have complete freedom on how coloring is done. Here is a good answer for how to get a gradient based on percentage: stackoverflow.com/questions/5560248/…
– ewolden
Jan 3 at 8:01
I don't want to play with Javascript here. @ewolden
– Srichandradeep C
Jan 3 at 9:11
add a comment |
I have to create a Heatmap with Grouped Categories as shown in the below image.
I could only achieve the below functionality as of now.
The link to my codepen is https://codepen.io/DukeBoy200/pen/xmpYxo?editors=1010#0.
The problem with what I have done until now is it has only one common color axis for all rows in all three categories. But I need to group the color axis by each individual row in each category. I mean, the heat colour stops that I mentioned in the code,
[0, '#00FF00'],
[0.3, '#ADFF2F'],
[0.6, '#FFFFCC'],
[1, '#FFFF00']
should get applied for each individual row in a category instead of the entire heatmap. In a simple language, I want to have a heat range for a single value in a single grouped category. Example, The heat range for the value 'A' for the grouped category 'I' is 4.99 to 7.78 (4.99, 5.68, 5.92 and 7.78).
After trying different approaches, I understood neither there is a direct way nor I can tweak the existing properties to achieve the desired functionality.
Hence, I thought of implementing one heatmap for each individual category. But the problem with this approach is I would end up in having a different color axis for each individual heatmap.
I already went through the answer to have one color axis for multiple heatmaps, Highcharts: multiple heatmaps with shared color bar but I couldn't understand how can I use it in my case.
Can someone please suggest me a different approach to achieve my functionality?
highcharts heatmap
asked Jan 3 at 6:50
Srichandradeep CSrichandradeep C
377111
I have to create a Heatmap with Grouped Categories as shown in the below image.
I could only achieve the below functionality as of now.
The link to my codepen is https://codepen.io/DukeBoy200/pen/xmpYxo?editors=1010#0.
The problem with what I have done until now is it has only one common color axis for all rows in all three categories. But I need to group the color axis by each individual row in each category. I mean, the heat colour stops that I mentioned in the code,
[0, '#00FF00'],
[0.3, '#ADFF2F'],
[0.6, '#FFFFCC'],
[1, '#FFFF00']
should get applied for each individual row in a category instead of the entire heatmap. In a simple language, I want to have a heat range for a single value in a single grouped category. Example, The heat range for the value 'A' for the grouped category 'I' is 4.99 to 7.78 (4.99, 5.68, 5.92 and 7.78).
After trying different approaches, I understood neither there is a direct way nor I can tweak the existing properties to achieve the desired functionality.
Hence, I thought of implementing one heatmap for each individual category. But the problem with this approach is I would end up in having a different color axis for each individual heatmap.
I already went through the answer to have one color axis for multiple heatmaps, Highcharts: multiple heatmaps with shared color bar but I couldn't understand how can I use it in my case.
Can someone please suggest me a different approach to achieve my functionality?
highcharts heatmap
highcharts heatmap
asked Jan 3 at 6:50
Srichandradeep CSrichandradeep C
377111
asked Jan 3 at 6:50
Srichandradeep CSrichandradeep C
377111
edited Jan 3 at 14:49
Srichandradeep C
asked Jan 3 at 6:50
Srichandradeep CSrichandradeep C
377111
asked Jan 3 at 6:50
Srichandradeep CSrichandradeep C
377111
asked Jan 3 at 6:50
Srichandradeep CSrichandradeep C
377111
377111
It might be easier to create a function that generates colors per series and category, and sets the color explicitly per point before you give the data to highcharts, that way you have complete freedom on how coloring is done. Here is a good answer for how to get a gradient based on percentage: stackoverflow.com/questions/5560248/…
– ewolden
Jan 3 at 8:01
I don't want to play with Javascript here. @ewolden
– Srichandradeep C
Jan 3 at 9:11
add a comment |
It might be easier to create a function that generates colors per series and category, and sets the color explicitly per point before you give the data to highcharts, that way you have complete freedom on how coloring is done. Here is a good answer for how to get a gradient based on percentage: stackoverflow.com/questions/5560248/…
– ewolden
Jan 3 at 8:01
I don't want to play with Javascript here. @ewolden
– Srichandradeep C
Jan 3 at 9:11
It might be easier to create a function that generates colors per series and category, and sets the color explicitly per point before you give the data to highcharts, that way you have complete freedom on how coloring is done. Here is a good answer for how to get a gradient based on percentage: stackoverflow.com/questions/5560248/…
– ewolden
Jan 3 at 8:01
It might be easier to create a function that generates colors per series and category, and sets the color explicitly per point before you give the data to highcharts, that way you have complete freedom on how coloring is done. Here is a good answer for how to get a gradient based on percentage: stackoverflow.com/questions/5560248/…
– ewolden
Jan 3 at 8:01
I don't want to play with Javascript here. @ewolden
– Srichandradeep C
Jan 3 at 9:11
I don't want to play with Javascript here. @ewolden
– Srichandradeep C
Jan 3 at 9:11
add a comment |
1 Answer
1
active
oldest
votes
After doing a lot of research, I understood that there is no way to achieve this in Highcharts. Hence, I have created one heatmap for each individual row of all three different grouped categories.
This would look like https://codepen.io/DukeBoy200/pen/QzQbXz.
answered Jan 3 at 14:47
Srichandradeep CSrichandradeep C
377111
Hi Srichandradeep C, You can only have onecolorAxisfor the chart. You could customize the way thecolorAxisworks or as @ewolden noticed calculate the color for each point, but you would have to add some custom javascript code.
– ppotaczek
Jan 4 at 10:34
Correct. I'm doing a similar approach in my latest codepen.
– Srichandradeep C
Jan 4 at 11:43
add a comment |
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%2f54017555%2fcreate-a-heatmap-with-grouped-categories-using-highcharts%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
After doing a lot of research, I understood that there is no way to achieve this in Highcharts. Hence, I have created one heatmap for each individual row of all three different grouped categories.
This would look like https://codepen.io/DukeBoy200/pen/QzQbXz.
answered Jan 3 at 14:47
Srichandradeep CSrichandradeep C
377111
Hi Srichandradeep C, You can only have onecolorAxisfor the chart. You could customize the way thecolorAxisworks or as @ewolden noticed calculate the color for each point, but you would have to add some custom javascript code.
– ppotaczek
Jan 4 at 10:34
Correct. I'm doing a similar approach in my latest codepen.
– Srichandradeep C
Jan 4 at 11:43
add a comment |
After doing a lot of research, I understood that there is no way to achieve this in Highcharts. Hence, I have created one heatmap for each individual row of all three different grouped categories.
This would look like https://codepen.io/DukeBoy200/pen/QzQbXz.
answered Jan 3 at 14:47
Srichandradeep CSrichandradeep C
377111
Hi Srichandradeep C, You can only have onecolorAxisfor the chart. You could customize the way thecolorAxisworks or as @ewolden noticed calculate the color for each point, but you would have to add some custom javascript code.
– ppotaczek
Jan 4 at 10:34
Correct. I'm doing a similar approach in my latest codepen.
– Srichandradeep C
Jan 4 at 11:43
add a comment |
After doing a lot of research, I understood that there is no way to achieve this in Highcharts. Hence, I have created one heatmap for each individual row of all three different grouped categories.
This would look like https://codepen.io/DukeBoy200/pen/QzQbXz.
answered Jan 3 at 14:47
Srichandradeep CSrichandradeep C
377111
After doing a lot of research, I understood that there is no way to achieve this in Highcharts. Hence, I have created one heatmap for each individual row of all three different grouped categories.
This would look like https://codepen.io/DukeBoy200/pen/QzQbXz.
answered Jan 3 at 14:47
Srichandradeep CSrichandradeep C
377111
answered Jan 3 at 14:47
Srichandradeep CSrichandradeep C
377111
answered Jan 3 at 14:47
Srichandradeep CSrichandradeep C
377111
answered Jan 3 at 14:47
Srichandradeep CSrichandradeep C
377111
377111
Hi Srichandradeep C, You can only have onecolorAxisfor the chart. You could customize the way thecolorAxisworks or as @ewolden noticed calculate the color for each point, but you would have to add some custom javascript code.
– ppotaczek
Jan 4 at 10:34
Correct. I'm doing a similar approach in my latest codepen.
– Srichandradeep C
Jan 4 at 11:43
add a comment |
Hi Srichandradeep C, You can only have onecolorAxisfor the chart. You could customize the way thecolorAxisworks or as @ewolden noticed calculate the color for each point, but you would have to add some custom javascript code.
– ppotaczek
Jan 4 at 10:34
Correct. I'm doing a similar approach in my latest codepen.
– Srichandradeep C
Jan 4 at 11:43
Hi Srichandradeep C, You can only have one
colorAxis for the chart. You could customize the way the colorAxis works or as @ewolden noticed calculate the color for each point, but you would have to add some custom javascript code.– ppotaczek
Jan 4 at 10:34
Hi Srichandradeep C, You can only have one
colorAxis for the chart. You could customize the way the colorAxis works or as @ewolden noticed calculate the color for each point, but you would have to add some custom javascript code.– ppotaczek
Jan 4 at 10:34
Correct. I'm doing a similar approach in my latest codepen.
– Srichandradeep C
Jan 4 at 11:43
Correct. I'm doing a similar approach in my latest codepen.
– Srichandradeep C
Jan 4 at 11:43
add a comment |
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%2f54017555%2fcreate-a-heatmap-with-grouped-categories-using-highcharts%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
It might be easier to create a function that generates colors per series and category, and sets the color explicitly per point before you give the data to highcharts, that way you have complete freedom on how coloring is done. Here is a good answer for how to get a gradient based on percentage: stackoverflow.com/questions/5560248/…
– ewolden
Jan 3 at 8:01
I don't want to play with Javascript here. @ewolden
– Srichandradeep C
Jan 3 at 9:11