Hgh chart feasibility

[ganesh87]

I would to use high chart for showing 2 dimentional array.

Table can have 1or more categories, and 1 or more columns.

1 category with 3 columns example
Col1 Col2 Col 3
Category 1 1 2 3
Category 2 3 4 5
Category 6 7 8


2 categories with 3 columns example

Col1 Col2 Col 3
Category 1 Goals A 1 2 3
Category 2 Goals B 3 4 5
Category 3 Goals Z 6 7 8


each cell is represented with different colors

1-3 -> red
4-6 -> green
6-9 -> yellow


Could you please let me know which chart i need to use for this requirement.

[ganesh87]

1st category values: Category 1, Category 2, Category 3
2nd category values: Goals A, Goals B, Goals C
column names: Col1, Col2,Col3

[jakub.j]

Welcome to our forum and thanks for contacting us with your question!

I prepared a live demo of a heatmap chart which enables you to add multiple categories as well as multiple columns. I added the logic to change color of the cells based on their value. Just remember that if you add more yAxis with categories, you will need to add next series with some data linked to this yAxis for this to work.

Live demo: https://jsfiddle.net/BlackLabel/bzx871c2/

I hope you will find it useful
Best regards
Jakub

[ganesh87]

Thankyou very much for the sample page. It helped me lot.
https://jsfiddle.net/BlackLabel/bzx871c2/
My requirement is i want to show m*n table left side of Heatmap (m*n matrix).

As per you page. heat map is having m=3, n=3.

Left side table m*n table and right side heat map chart m*n matrix should aligned properly(row and column width)
Finally it should be like one table with M rows * (n*2) columns matrix.


possible options
Option 1:
a) Add column names for Y axis (MyCategoryCol, myGoalsCol)
b) Y axis (ex: myGoalsCol, MyCategoryCol columns )should have border as similiar to heatmap cell.

Option 2:
1. let me add table with n columns (MyCategoryCol, myGoalsCol) and m rows in the left side of heatmap chart
2. i can give row and column width and height for my table, But Heatmap cell's height and width of each cell is automatically calculated. [lesser m*n = 2*2 => heatmap cells are bigger size, more m*n = 5*5 produces cells are smaller size]

i should be able customize cells width and height as similiar to my table.

Atthe end all rows ,columns should be aligned properly. Could you please provide solution for my request.

MyCategoryCol myGoalsCol
Category 1 GoalA
Category 2 GoalB
Category 3 GoalZ

[ganesh87]

question 3: Is it possible to store some context information in heatmap cell. because i want to do some backend call to fetch data based on that particular cell.

[jakub.j]

You're welcome!

I managed to create 2M x N matrix as you wanted, you just add cells to the heatmap as the previous ones to the first series, so that they match the ones on the right side.

If you want to store context in the cell you need to change the point format in series from [x, y, value] to {x: x, y: y, value: value, custom: whatever} and then in the line 126 I showed you an example how to get this value from the chart object.

Demo: https://jsfiddle.net/BlackLabel/frg1uxsj/

I hope you will find it useful
Best regards
Jakub

[ganesh87]

Thank you so much.

1) How do i add click event to each cell and the get the data from cell context ex: custom: whatever?

I tried below no event fired.

plotOptions: {
series: {
events: {
click: function (event) {
alert('event!'+event);
console.log(event);
}
}
}
},


2) How do i configure each cell width and height.
I have added larger text [0, 2, "Category 1 Category1 Category 3"], column width is not expanding automatically.

3) Currently I am trying to load the chart in Div tag in Angular component template (html).
ex:
<div
#container
style="margin: 0 auto"
></div>

I have a requirement to generate heatmap chart dynamically based on backend data.

Here i need generate 3 heat map charts.
ex: Category with 3 columns, Goals with 3 columns, sample with 3 columns

I cannot hard code <div> element id/variable name that is used to render chart in angular html file for creating heatmap dynamically in code.

My Angular component created HighChart instance using below code. It binds div id/template name(#container) to render this _highChart .

this.chartOptions.chart['renderTo'] = this.container.nativeElement; //refers #container
this._highChart = new Highcharts.Chart(this.chartOptions);

variable (#container)has to be unique for each chart.

<div
#container
style="margin: 0 auto"
></div>

Ex:
Col1 Col2 Col 3
Category 2 3 4 5
Category 1 1 2 3
Category 3 6 7 8

Col1 Col2 Col 3
Goals A 1 2 3
Goals B 3 4 5
Goals Z 6 7 8

Col1 Col2 Col 3
Sample 1 1 2 3
Sample 2 3 4 5
Sample 3 6 7 8

[jakub.j]

Hey

1) To get the data from the cell you need to use plotOptions.heatmap.point.events.click, I showed in the demo how to do it.

2) There is no way to set the exact size of the cells but if you want to have the left side cells bigger than right side, I put the series on different xAxis and now you can balance first and second xAxis width and left position so that the left and right part are the width you want.

Demo: https://jsfiddle.net/BlackLabel/9hb0mre3/

3) Are you using our Angular wrapper? Then you can render the chart very easily in Angular? Please check out an example of the wrappper usage.
Wrapper demo: https://stackblitz.com/edit/highcharts- ... onent.html

In case of any other questions related to Highcharts functionality feel free to contact us anytime
Best regards
Jakub

[ganesh87]

Thank you for your help.

we are not using angular wrppaer, we are using highchart.js.

I am creating highchart instance using
this._highChart = new Highcharts.Chart(this.chartOptions); /

i have added xaxis property using below syntax.
this.chartOptions.xAxis = {
categories : ['Apple','Orange','Mango']
}

but how do i add below code via programming.I could not find any options like
this.chartOptions.events.render

events: {
render: function() {
const chart = this;

chart.series.forEach((singleSeries, index) => {
let color = 'white';

singleSeries.points.forEach(point => {
if (index > 0) {
color = point.value > 3 ? point.value > 6 ? "yellow" : "green" : "red"
}

point.graphic.attr({
fill: color
})

})
})


}

[ganesh87]

4. why my heatmap chart cell colors become dark for series 1( ["MyCategoryCol", "MyGoalsCol", "Custom Col"],),

shown default white to skyblue color for series 2. When i hover the cell for series 1 ,cell color became white.

Code :
setcolor(chartOptions: Options){
debugger;
this._highChart.series.forEach((singleSeries, index) => {
let color = 'white';

singleSeries.points.forEach(point => {
if (index > 0) {
color = point.value > 30 ? point.value > 60 ? "yellow" : "green" : "red"
}
point.color = color;

/*let point1 = point as any;

point1.graphic.attr({ //it did not work, Property 'graphic' does not exist on type 'Point'.
fill: color
})
*/

})
})

}

[ganesh87]

5. Could yo please let me know , How do i configure click event only to below columns(where heatmap data exists).
[ "Col 1", "Col 2", "Col 3"],

your Demo: https://jsfiddle.net/BlackLabel/9hb0mre3/

[jakub.j]

Hello ganesh87!

First of all, I would highly recommend to use our Angular Wrapper for Angular instead of plain Highcharts.
Regarding your questions:

3) The option is this.chartOptions.chart.events.render not this.chartOptions.events.render and it should work properly, check out our Highcharts events

4) I won't be able to anwser this question unless I see a live demo of your code on a tool like Stackblitz.com, so please provide me a working demo on any platform like that

5) I prepared a demo with if condition on series.name so that the alert fires only on the second series.

Demo: https://jsfiddle.net/BlackLabel/j40rvw7L/

Best regards
Jakub

[ganesh87]

Sure, Thank you for your support.

6) Is it possible to edit heatmap cells and feed new value ?

I have a requirement to edit highchart map cells.

Ex: {
x: 3,
y: 0,
value: 0,
},

i want user to edit hightcharts cells inthe heatmap chart
Ex: Ex: {
x: 3,
y: 0,
value: 10,
},

[jakub.j]

Hey,

If you want to update the value of a point, simply use point.update() method.

I prepared a demo with a simulation of setting a random value to the point every 2 seconds

Demo: https://jsfiddle.net/BlackLabel/Lobtver8/

Best regards
Jakub

[ganesh87]

Thank you for your support. I could not explain actual requirement, please find the detail description.


when user click on heat map cell, is it possible to provide inline editing of cells(kind of textbox) and once user enter a value in the cell we should update the heat map.

For updating we can use
chart.series[1].points[8].update({
value: Math.floor(Math.random() * 10)
})

ex:https://demos.telerik.com/kendo-ui/grid/editing-inline