Treemap Click action

Posted by: ehh on 22 August 2021, 11:19 pm EST

  • Posted 22 August 2021, 11:19 pm EST

    Is there a way to create a click action on the items in the treemap component.

    Best Regards
    Emil
  • Replied 24 August 2021, 3:31 pm EST

    Hi,
    You may use the SelectionChanged event to get the currently selected dataPoint. Please refer to the following code snippet for reference.
    <TreeMap @ref="map" Class="chart" ItemsSource="Data" Binding="Sales" BindingName="Category" ChildItemsPath="Items" Tooltip="{value}" SelectionMode="ChartSelectionMode.Point"  >
    <Label>
    <DataLabel Content="{name}" />
    </Label>
    </TreeMap>

    protected override void OnAfterRender(bool firstRender)
    {
    if (firstRender)
    {
    map.SelectionChanged += SelectionChanged;

    }
    }

    protected void SelectionChanged (object sender, EventArgs args)
    {
    TreeMap _map = (TreeMap)sender;
    //param.Context = "D";
    }


    If you are still looking for the clicking event, you may wrap the control with div and handle using the JS code. If you may elaborate on your requirement, we may suggest you accordingly.

    Regards,
    Manish Gupta
  • Replied 26 August 2021, 5:26 pm EST

    Hello Manish,

    I cant seem to get your example working.

    I need to be able to click on a specific part of the treemap. And select the item from the treemap data.

    I have attached the code i use for my treemap, with the example you made.
    @using C1.Chart;
    @using C1.DataCollection;
    @using C1.Blazor.Chart;
    @using C1.Blazor.Input;

    <TreeMap @ref="map" Class="c1height" ItemsSource="Data" Binding="Amount" BindingName="Cat" SelectionMode="ChartSelectionMode.Point" ChildItemsPath="Items" Style="@("height:100%;max-height:100%;")"
    Tooltip="{value:N0}" Palette="Palette.Custom" CustomPalette="GeneralConstants.CustomPalette" LegendPosition="Position.None">
    <Label>
    <DataLabel Position="LabelPosition.Center" Content="{name}" />
    </Label>
    </TreeMap>


    @code {
    [Parameter]
    public Tile Tile { get; set; }

    [Parameter]
    public TileData TileData { get; set; }

    TreeMap map;

    List<TreeMapItem> Data { get; set; }

    protected override async Task OnInitializedAsync()
    {
    Data = TreeMapItem.GetData(TileData);
    }

    protected override void OnAfterRender(bool firstRender)
    {
    if (firstRender)
    {
    map.SelectionChanged += SelectionChanged;

    }
    }

    protected void SelectionChanged(object sender, EventArgs args)
    {
    TreeMap _map = (TreeMap)sender;
    //param.Context = "D";
    }

    class TreeMapItem
    {
    public string Cat { get; set; }
    public double Amount { get; set; }
    public List<TreeMapItem> Items { get; set; }

    public static List<TreeMapItem> GetData(TileData tileData)
    {
    var data = new List<TreeMapItem>();
    TreeMapItem item = new TreeMapItem();
    for (int i = tileData.Columns; i < tileData.Cells.Count() - tileData.Columns; i++)
    {
    if (i == tileData.Columns)
    {
    item = new TreeMapItem { Cat = tileData.Cells.ElementAt(i).V.ToString(), Items = new List<TreeMapItem>() };
    item.Items.Add(new TreeMapItem { Cat = tileData.Cells.ElementAt(++i).V.ToString(), Amount = Convert.ToDouble(tileData.Cells.ElementAt(++i).V) });
    }
    else
    {
    if (item.Cat != tileData.Cells.ElementAt(i).V.ToString())
    {
    data.Add(item);
    item = new TreeMapItem { Cat = tileData.Cells.ElementAt(i).V.ToString(), Items = new List<TreeMapItem>() };
    item.Items.Add(new TreeMapItem { Cat = tileData.Cells.ElementAt(++i).V.ToString(), Amount = Convert.ToDouble(tileData.Cells.ElementAt(++i).V) });
    }
    else
    {
    item.Items.Add(new TreeMapItem { Cat = tileData.Cells.ElementAt(++i).V.ToString(), Amount = Convert.ToDouble(tileData.Cells.ElementAt(++i).V) });
    }
    }
    }
    data.Add(item);
    return data;
    }
    }
  • Replied 26 August 2021, 7:57 pm EST

    Hi,
    Please find the attached working sample for you. If the issue persists, please elaborate so that we may assist you accordingly.

    Regards,
    Manish Gupta

    TreeMap_selectionChanged.zip
  • Replied 26 August 2021, 10:10 pm EST

    Hi,
    Thanks for the demo, it does exactly what I need, but i cant seem to get it working in blazor server, i have tired creating a blank project and importing your example.

    The project is attached.

    WebApplication3.zip
  • Replied 30 August 2021, 4:47 pm EST

    Hi,

    I ran your project and it worked without any issues. The only issue I faced, was in the NuGet package. The correct packages were not added to the project. Before running the project, I added these two packages:

    1. C1.Blazor.Core
    2. C1.Blazor.Chart

    And after this, the project worked as expected.

    Please try installing these two packages at your end too. And let me know if the issue was something else. I am attaching the updated project with the NuGet packages.

    TreeMap_Click.zip
  • Replied 30 August 2021, 5:38 pm EST

    Hello Ashwin,

    I can see that I for some reason didnt get the nugets applied to the project I sent.
    I have now tried downloading your updated version, and I still have the same problem. Everything loads fine and I get no errors, but when I click nothing happens. The webassembly project Manish posted is working fine. Please let me know what information you need to troubleshoot. I have attached a picture of the treemap on my end.

    Best regards
    Emil

  • Replied 31 August 2021, 7:13 pm EST

    Hi,

    We were not able to replicate the issue at our end. We added the following NuGet packages to your project:

    1. C1.Blazor.Core
    2. C1.Blazor.Chart

    The project is working as expected at our end. You may try debugging it, setting breakpoints to check whether the event is being fired or not.

    Furthermore, if possible, Kindly share the build and environment details so that we could replicate the issue and reply accordingly.

    Kindly refer to the attached sample below.

    Regards
    Dushyant Sharma

    TreeMap.zip
  • Replied 31 August 2021, 10:20 pm EST

    Hello Dushyant,

    I am developing on Visual studio community version 16.11.1. And debugging in IIS Express, running on Windows 10 Version 20H2. Im from Denmark so I use the DA-DK format (This has created problems with some other charts). I have also tried running the project on a different setup, resulting in the same problem.

    I have submitted a image showing my setup running the Server version and the Webassembly version. (Server left side, Webassembly right side). With the Webassembly working as intended. The Webassembly project is the one posted by Manish, and the Server project is the one posted by Dushyant.

    Let me know if you need anything else.

    Best Regards,
    Emil

  • Replied 1 September 2021, 9:24 pm EST

    Hi,

    Thank you for sharing the information, we were able to replicate the issue which was arising due to the change in culture and have forward this to the concerned team with internal tracking id C1-3558.
    We will let you know, once we get an update on this. In the meantime, as a workaround, you may set the culture to en, and after this, the project should work as expected.

    Please refer to the sample below.

    Regards
    Dushyant Sharma

    TreeMap_.zip
  • Replied 19 February 2022, 7:00 pm EST

    Hi,
    This issue has been fixed in the latest 2021v3 release. Please check after upgrading to the latest build.

    Regards,
    Manish Gupta
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels