Hello!
Is it possible to put a button on the heatmap chart tooltip?
I made this graphic and where it says "<SfButton>Ver detalle</SfButton>" is where i want a button that redirects me to another page to be there.
Another question that i have is that i want the colors of the cells as seen in the image. The only way i found to put them that way is to assign different numbers to each one and associate each value with the 3 colors i need. Is there a way to have that template and not to have the neccesity to put the numbers like i had to do?
I leave my code below:
<SfHeatMap DataSource="@HeatMapColors">
<HeatMapEvents TooltipRendering="@TooltipRendering"></HeatMapEvents>
<HeatMapTitleSettings Text="Matriz Impacto/Frecuencia para x"></HeatMapTitleSettings>
<HeatMapXAxis Labels="@XLabels" LabelRotation="45" LabelIntersectAction="@SFHeatMap.LabelIntersectAction.None">
</HeatMapXAxis>
<HeatMapYAxis Labels="@YLabels"></HeatMapYAxis>
<HeatMapCellSettings ShowLabel="true" TileType="CellType.Rect">
<HeatMapCellBorder Width="1" Radius="8" Color="White"></HeatMapCellBorder>
</HeatMapCellSettings>
<HeatMapCellTextStyle ></HeatMapCellTextStyle>
<HeatMapPaletteSettings>
<HeatMapPalettes>
<HeatMapPalette Value="I1F1" Color="#c5f1d1"></HeatMapPalette>
<HeatMapPalette Value="I1F2" Color="#c5f1d1"></HeatMapPalette>
<HeatMapPalette Value="I1F3" Color="#c5f1d1"></HeatMapPalette>
<HeatMapPalette Value="I1F4" Color="#c5f1d1"></HeatMapPalette>
<HeatMapPalette Value="I1F5" Color="#fec001"></HeatMapPalette>
<HeatMapPalette Value="I2F1" Color="#c5f1d1"></HeatMapPalette>
<HeatMapPalette Value="I2F2" Color="#c5f1d1"></HeatMapPalette>
<HeatMapPalette Value="I2F3" Color="#c5f1d1"></HeatMapPalette>
<HeatMapPalette Value="I2F4" Color="#fec001"></HeatMapPalette>
<HeatMapPalette Value="I2F5" Color="#fec001"></HeatMapPalette>
<HeatMapPalette Value="I3F1" Color="#c5f1d1"></HeatMapPalette>
<HeatMapPalette Value="I3F2" Color="#c5f1d1"></HeatMapPalette>
<HeatMapPalette Value="I3F3" Color="#fec001"></HeatMapPalette>
<HeatMapPalette Value="I3F4" Color="#fec001"></HeatMapPalette>
<HeatMapPalette Value="I3F5" Color="#ff0101"></HeatMapPalette>
<HeatMapPalette Value="I4F1" Color="#c5f1d1"></HeatMapPalette>
<HeatMapPalette Value="I4F2" Color="#fec001"></HeatMapPalette>
<HeatMapPalette Value="I4F3" Color="#fec001"></HeatMapPalette>
<HeatMapPalette Value="I4F4" Color="#ff0101"></HeatMapPalette>
<HeatMapPalette Value="I4F5" Color="#ff0101"></HeatMapPalette>
<HeatMapPalette Value="I5F1" Color="#fec001"></HeatMapPalette>
<HeatMapPalette Value="I5F2" Color="#fec001"></HeatMapPalette>
<HeatMapPalette Value="I5F3" Color="#ff0101"></HeatMapPalette>
<HeatMapPalette Value="I5F4" Color="#ff0101"></HeatMapPalette>
<HeatMapPalette Value="I5F5" Color="#ff0101"></HeatMapPalette>
</HeatMapPalettes>
</HeatMapPaletteSettings>
<HeatMapLegendSettings Visible="false"></HeatMapLegendSettings>
</SfHeatMap>
@code {
protected string[] XLabels = new string[] { "Muy Baja", "Baja", "Media", "Alta", "Muy Alta" };
protected string[] YLabels = new string[] { "Muy Poco", "Poco", "Moderado", "Alto", "Muy Alto" };
protected int I1F1=11;
protected int I1F2=12;
protected int I1F3=13;
protected int I1F4=14;
protected int I1F5=15;
protected int I2F1=21;
protected int I2F2=22;
protected int I2F3=23;
protected int I2F4=24;
protected int I2F5=25;
protected int I3F1=31;
protected int I3F2=32;
protected int I3F3=33;
protected int I3F4=34;
protected int I3F5=35;
protected int I4F1=41;
protected int I4F2=42;
protected int I4F3=43;
protected int I4F4=44;
protected int I4F5=45;
protected int I5F1=51;
protected int I5F2=52;
protected int I5F3=53;
protected int I5F4=54;
protected int I5F5=55;
int[,] GetDefaultColors(){
int[,] dataSource = new int[,]
{
{I1F1, I2F1, I3F1, I4F1, I5F1},
{I1F2, I2F2, I3F2, I4F2, I5F2},
{I1F3, I2F3, I3F3, I4F3, I5F3},
{I1F4, I2F4, I3F4, I4F4, I5F4},
{I1F5, I2F5, I3F5, I4F5, I5F5},
};
return dataSource;
}
int[,] GetDefaultColors2()
{
int[,] dataSource = new int[,]
{
{0, 0, 0, 0, 0},
{0, 0, 0, 0, 0},
{0, 0, 0, 0, 0},
{0, 0, 0, 0, 0},
{0, 0, 0, 0, 0},
};
return dataSource;
}
public object HeatMapColors { get; set; }
protected override void OnInitialized()
{
HeatMapColors = GetDefaultColors();
}
public void ChangeCountry(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, BaseOption> args)
{
HeatMapColors = GetDefaultColors2();
}
void TooltipRendering(SFHeatMap.TooltipEventArgs args)
{
args.Content = new[] { $@"Impacto: {args.YLabel}.<br>Frecuencia: {args.XLabel}.<br><SfButton>Ver detalle</SfButton>" };
}
}
Thanks a lot and best wishes!
Matias.
The Package version i am using at the moment is "20.1.0.61" and it is a blazor web assembly project.
Hi Matias,
Please find the details for your queries in the below table.
Queries |
Details |
|
Is it possible to put a button on the heatmap chart tooltip?
I made this graphic and where it says "<SfButton>Ver detalle</SfButton>" is where i want a button that redirects me to another page to be there. |
We do not support rendering custom components in the tooltip template of the Heatmap component. However, we have considered this an improvement and logged a feature report for the same. We will include this implementation in our Volume 4 SP release, which is expected to be available at the end of January 2023. Meanwhile, please find the feedback link below to keep track of this feature. |
|
Another question that i have is that i want the colors of the cells as seen in the image. The only way i found to put them that way is to assign different numbers to each one and associate each value with the 3 colors i need. Is there a way to have that template and not to have the neccesity to put the numbers like i had to do? |
The only possible way to reduce the numbers that you have provided in the HeatMapPalette tag is to set "StartValue" and "EndValue" properties in that same tag. These properties are used to define the start and end values of the range to which the mentioned color can be set. The "MinColor" properties represent the color for the given range. Please find the code snippet for the same below.
You can find the sample at the below link. https://www.syncfusion.com/downloads/support/forum/179604/ze/BlazorAppWASM625515423
Please let us know if the above solution meets your requirements. |
Regards,
Indumathi R.
Hi, thanks for the reply.
Ok, i will wait for the implementation. Thank you for having it into account.
And talking about the pallete of colors, also thanks, i will do it in that way so it is more clear.
Thank you,
Matias.
Hi Matias,
Thank you for update.
We'll let you know once the package is published.
Hi Matias,
Sorry for the inconvenience.
We have not included the implementation in our 2022 Volume 4 SP release. However, the fix will be included in our 2023 Volume 1 Release, which is expected to be available by the end of March 2023.
Hi Matais,
We have implemented the improvement to render the custom components in the tooltip template of the HeatMap component and the fix is included in our Essential Studio 2023 Volume 1 Main Release v21.1.35 which is rolled out and is available for download under the following link.
To render custom HTML element, you can use the “Template” property in the “HeatMapTooltipSettings” class. Please find the code snippet to add tooltip template below.
Code Snippet:
<SfHeatMap DataSource="@HeatMapColors"> <HeatMapTooltipSettings Fill="#265259"> <Template> @{ var TooltipTemplate = (context as Dictionary<string, string>); <div class="displayTemplate"> <span class="label"> Impacto: @TooltipTemplate["XLabel"] <br /> Frecuencia: @TooltipTemplate["YLabel"] <br /> </span> <SfButton>Ver detalle</SfButton> </div> } </Template> </HeatMapTooltipSettings> //.. </SfHeatMap> |
You can find the sample for demonstrating the tooltip template below.
https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp4-1091346432
When we analyzed your requirement further, we
came to know that you need to navigate to another page using the button in the
tooltip template. But we render tooltip in the mouse move event. When you try
to click the button, the tooltip for the next cell will be rendered. Please let
us know your requirement in detail. We will analyze further and assist you
better.