Treemap Click action

Treemap Click action

Posted by: ehh on 23 August 2021, 8:19 am EST

• 

  ehh

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 23 August 2021, 8:19 am EST

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

  Best Regards
  
  Emil

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 25 August 2021, 12:31 am 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

• 

  ehh

  • Post Options:
  • Link
    Copy

  Posted 27 August 2021, 2:26 am 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;
          }
      }
  
  

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 27 August 2021, 4:57 am 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

• 

  ehh

  • Post Options:
  • Link
    Copy

  Posted 27 August 2021, 7:10 am 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

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 31 August 2021, 1:47 am 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

• 

  ehh

  • Post Options:
  • Link
    Copy

  Posted 31 August 2021, 2:38 am EST - Updated 29 September 2022, 9:49 am 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

  

  1916×512 26.1 KB

• 

  dushyant.sharma

  

  • Post Options:
  • Link
    Copy

  Posted 1 September 2021, 4:13 am 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

• 

  ehh

  • Post Options:
  • Link
    Copy

  Posted 1 September 2021, 7:20 am EST - Updated 29 September 2022, 9:49 am 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

  

  2548×641 51.8 KB

• 

  dushyant.sharma

  

  • Post Options:
  • Link
    Copy

  Posted 2 September 2021, 6:24 am 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

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 20 February 2022, 4:00 am EST

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

  Regards,
  
  Manish Gupta