Cell customization

[Amanda]

Hello,

I using the Heatmap chart component and I want to change the background of the cell that I have clicked. In fact I want to add a pattern at the background of the cell.

How I can Ι implement this?

Thanks in advance!

[LeoLavanya Dhanaraj]

Hi Amanda,

Greetings from Syncfusion Support.

The cellClicked event will trigger when you click the cell in the HeatMap component. By calling the JS Interop method in this function, you can customize the cell based on the requirements. In this sample, we have customized the background color of the cell when clicking the cell.

Refer the below code snippet.

[Index.razor]

<HeatMapEvents CellClicked="cellClicked"></HeatMapEvents>

 

[_Host.cshtml]

<script>

    function JSMethod(xValue, yValue) {

        var element = document.getElementsByTagName("rect");

        for (var i = 0; i < element.length; i++) {

            if (element[i].getAttribute("x") == xValue && element[i].getAttribute("y") == yValue) {

                element[i].setAttribute("fill","red");

            }

        }

    }

</script>

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/HeatMap-1780886682.zip

Please check the attached sample and get back to us if you need any further assistance.

Regards,

Leo Lavanya Dhanaraj

[Amanda]

Hello,

Thanks for your reply but what I want to do is to add a pattern to the cell and not just a color.

By the word pattern I mean something like the picture below.

 

Thanks in advance!

[LeoLavanya Dhanaraj]

Hi Amanda,

To meet your requirement, we have prepared a Blazor HeatMap sample using JS interop method. Here, we use the JS interop call method to define the pattern by binding it in the Loaded event and customized the clicked cell using the CellClicked event. You can also create your own pattern in a similar way.

Check the blow code snippet for your reference.

[Index.razor]

<HeatMapEvents CellClicked="cellClicked" Loaded="loaded"></HeatMapEvents>

 

public async Task cellClicked(CellClickEventArgs args)

{

    await JsRuntime.InvokeAsync<Object>("JSMethod", args.X, args.Y);

}

 

public async Task loaded(LoadedEventArgs args)

{

    await JsRuntime.InvokeAsync<Object>("JSMethod1", args);

}

 

[_Host.cshtml]

<svg>

    <defs id="patternId">

        <pattern id="lines" height="10" width="10" patternUnits="userSpaceOnUse">

            <line x1="0" y1="4" x2="5" y2="4" stroke-width="2" stroke="black" />

        </pattern>

    </defs>

</svg>

<script>

    function JSMethod(xValue, yValue) {

        var element = document.getElementsByTagName("rect");

        for (var i = 0; i < element.length; i++) {

            if (element[i].getAttribute("x") == xValue && element[i].getAttribute("y") == yValue) {

                element[i].setAttribute("fill", "url(#lines)");

            }

        }

    }

    function JSMethod1() {

        var div = document.getElementById('cellOpacity_svg');

        var rectEle = document.getElementById("cellOpacity_HeatmapBorder");

        div.insertBefore(document.getElementById("patternId"), rectEle);

    }

</script>

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/HeatMapPattern1571769242.zip

References: https://stackoverflow.com/questions/46799088/generating-an-svg-rectangle-with-dashed-fill-lines,

                      https://css-tricks.com/stripes-css/

Check the attached sample and get back to us if you need any further assistance.

Regards,

Leo Lavanya Dhanaraj

[Amanda]

Hello and thanks for your reply.

The example that you posted worked for me but now I want to implement the cell customization with another way.

Instead of using the CellClicked event to customize the cell I want to use the CellRender event.

So at the CellClicked  event the argument CellClickEventArgs has the properties X and Y from which I can get the selected cell but at the CellRender  event the argument  HeatMapCellRenderEventArgs only gives me the XLabel and the YLabel of the cell but  from these values I can't get the cell that I want

In fact what I want to do is that at the initialization of the Heatmap component I want to add the pattern at a group of cells from the CellRender event

So how can I get the X and Y values of the rect element from the CellRender event?

Thanks in advance!

[LeoLavanya Dhanaraj]

Hi Amanda,

We understand that you want to use the cellRendering event to add a pattern to the group of cells. This requirement is only achievable in an interop functionality by retrieving all the rect elements and looping through them to identify the group of cells that need to be applied with patterns. But in the cellRendering event, you won't be able to get the SVG rect element.

However, you can achieve this by binding to the Loaded event of HeatMap where you will be able to get all the rect elements within the interop function. Also, from the explanation, we were not clear about how you differentiate the group of cells from the other cells. Are you grouping the cells that have the same cell value? Please share with us those details. It would help us to assist you promptly.

Regards,

Leo Lavanya Dhanaraj

[Amanda]

Hello,

Yeah  I want to add the pattern to a group of cells that have the same value.  How can I achieve that?

Thanks!

[LeoLavanya Dhanaraj]

Hi Amanda,

We understand that you want to add a pattern to a group of cells based on the cell value in the HeatMap component. There is no possibility to meet your requirement in cellRendering event, because the rect elements not loaded in that event. So, we achieve this by binding the OnLoad event of HeatMap where you will be able to get all the rect elements using a time delay within the interop function. You can set the SetTimeOut delay based on your end customization.

Check the below code snippet for reference.

[Index.razor]

<HeatMapEvents OnLoad="load" ></HeatMapEvents>

 

public async Task load(LoadedEventArgs args)

{

    await JsRuntime.InvokeAsync<Object>("loadJS", args);

}

 

[_Host.cshtml]

function loadJS() {

    setTimeout(function () {

        var div = document.getElementById('cellOpacity_svg');

        var rectEle = document.getElementById("cellOpacity_HeatmapBorder");

        div.insertBefore(document.getElementById("patternId"), rectEle);

 

        var textElement = (document.getElementById("cellOpacity_Container_TextGroup")).getElementsByTagName("text");

        var cellValue;

        for (var i = 0; i < textElement.length; i++) {

            if (textElement[i].getAttribute("aria-label") == "52") {

                cellValue = "cellOpacity_HeatMapRect_" + (i + 1);

                (document.getElementById(cellValue)).setAttribute("fill", "url(#lines)");

            }

        }

    }, 300);

}

Please check the attached sample and get back to us if you need any further assistance.

Regards,

Leo Lavanya Dhanaraj

[Amanda]

Hello,

I have faced some problems trying to execute the code that you posted in my project .

• First the refresh of the Heatmap component is not executed by default when the cell background is changed.  In order to refresh the Heatmap and show the cells with the pattern I have to resize the Heatmap. Why is this happening?
  
• Secondly the Heatmap component at my project is filled dynamically so every time a new cell is added it has the default background that the component gives it and not the pattern that I have set. So in order to refresh it I have to resize it again.
  

Any advice on how to refresh the Heatmap dynamically?

And also there is no attached file at your last reply. Can you post it?

Thanks in advance

[LeoLavanya Dhanaraj]

Hi Amanda,

Based on your requirement, we have made some changes to our shared sample. Here, we have add a pattern to a group of cells based on the cell value and applied the pattern for the dynamically added data too.

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/Heatmap30976188.zip

Please check the attached sample and get back to us if you need any further assistance.

Regards,

Leo Lavanya Dhanaraj

[Amanda]

Hello again

I managed to add the pattern at the group of cells that I wanted by using javascript as you suggested. But unfortunately with this way my page loadind is too slow so I had to remove it. 

So I wanted to suggest you to also add a property Style at the HeatMapCellRenderEventArgs class for adding the style of the cell from the razor component.

I am saying this because at the moment I don't have many options for the customization of the cells and I think that this would make Heatmap component much more useful.

Hope you will implent my suggestion

Thanks!

[Indumathi Ravi]

Hi Amanda,

When we analyzed, we came to know that the pattern in the HeatMap component can be enabled by modifying the “Color” property in the “HeatMapPalette” tag in the HeatMap component. However, we have considered your requirement as an improvement and added it to your features request list. This feature will be available in our 2022 Volume 3 release which is expected to be available by the end of September 2022. Meanwhile, please find the feedback link below to keep track of this feature.

https://www.syncfusion.com/feedback/36912

Regards,

Indumathi R.

[Indumathi Ravi]

Hi Amanda,

Thank you for your patience.

On further analysis, we came to know that we can achieve your requirement in the application level by adding the reference of the SVG pattern element as fill color to the HeatMap component's cell in the “CellRendering” event.  We can apply the pattern to the specific cell which is identified by using the “CellValue” property in the event argument of the “CellRendering” event. The “id”  attribute of the SVG pattern must be set to the “CellColor” property in the event argument of the “CellRendering” event. Please find the code snippet for setting the pattern to the HeatMap cell below.

Code Snippet:

<svg>

    <defs id="patternId">

        <pattern id="lines" height="10" width="10" patternUnits="userSpaceOnUse">

            <line x1="0" y1="4" x2="5" y2="4" stroke-width="2" stroke="black"></line>

        </pattern>

    </defs>

</svg>

 

<SfHeatMap DataSource="@HeatMapData">

    <HeatMapEvents CellRendering="@CellRenderEvent"></HeatMapEvents>

    //..

    //..

</SfHeatMap>

 

@code{

 

    public void CellRenderEvent(HeatMapCellRenderEventArgs args)

    {

        if(args.CellValue == "2.4") {

        args.CellColor = "url(#lines)";

       }

   }

}

We have created a sample to demonstrate the same and it can be downloaded from the below link.

 https://www.syncfusion.com/downloads/support/directtrac/general/ze/Heatmap_Pattern-964374137

Please let us know if you need any further assistance. 

Regards,

Indumathi R.