how to link from part(sector) of Pie to another page (od modal div) whit data detail datagridg mode

[fabrizio carboni]

Hi all,

it's my 1th treatd pls be nice to me.

Into my reports I use some different graph Pie, Donut, Column exc, when I move up the mouse on the pie the tooltip showing, it's possible to set the click to link something (another page with detail, an image, and so on...) ??

[Nishanthi Panner Selvam]

Hi Fabrizio carboni,

Thank you for reaching out to Syncfusion!

Before proceeding with your query, could you please confirm whether you need a drilldown in the pie chart? This means that when a pie slice is clicked, the chart will drill down based on the selected slice.

For reference, we have attached a sample from our browser:

Sample Browser: https://ej2.syncfusion.com/aspnetcore/chart/drilldown#/tailwind3

If this is not what you are looking for, could you please share more details about your requirement, such as a reference screenshot or video? This will help us analyze the request further and provide a solution promptly.

Regards,

Nishanthi

[fabrizio carboni]

Hi Nishanthi,
the Sample Browser is great 😊 I'll study it but, now, I need only to know if is possible to set the  var mouseClick = link and the "link" will be one address to another page whit one param (for example tooltipMappingName) 

this is my chart code:

<e-dashboardlayout-panel sizeX="3" sizeY="1" row="1" col="0">

<e-content-template>

<div>

<div class="e-panel-container" id="chart4">

<div class="e-panel-header">

<div class="title" id="header4">Analisi variance impact</div>

</div>

<div class="e-panel-content">

@*pie chart*@

<ejs-chart style="height: 100%; width: 100%" id="ctn_Variance" load="load" pointRender="onPointRender" enableAnimation="true" enableBorderOnMouseMove="false" enableSmartLabels="false">

<e-chart-tooltipsettings enable="true" shared="true" header="<b>${point.tooltip}</b>"> </e-chart-tooltipsettings>

<e-chart-legendsettings visible="true" enableHighlight="true">

</e-chart-legendsettings>

<e-chart-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Category" interval="1">

<e-majorgridlines width="0"></e-majorgridlines>

<e-majorticklines width="0"></e-majorticklines>

</e-chart-primaryxaxis>

<e-chart-primaryyaxis title="Medal Count" maximum="@Model.Max_Value_Variance" interval="@Model.Scale_Value_Variance">

<e-majorticklines width="0"></e-majorticklines>

<e-linestyle width="0"></e-linestyle>

</e-chart-primaryyaxis>

<e-chart-chartarea>

<e-chartarea-border width="0"></e-chartarea-border>

</e-chart-chartarea>

<e-series-collection>

<e-series dataSource="@Model.ListVariance" xName="VarianceBelt" yName="VarianceImpact" tooltipMappingName="VarianceBelt" name="Variance" columnSpacing="0.1" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column">

</e-series>

</e-series-collection>

</ejs-chart>

</div>

</div>

</div>

</e-content-template>

</e-dashboardlayout-panel>

        

[Nishanthi Panner Selvam]

Hi Fabrizio carboni,

We have analyzed your query. Based on that, we have implemented a solution where clicking on a pie data points, will redirect the user to another page while passing mapped data from the data source as a parameter. This is handled using the pointClick event.

When a point is clicked, the corresponding data value (e.g., tooltipMappingName) is retrieved from the data source and appended to the URL before navigating to the new page.

Here’s a code snippet demonstrating this functionality:

Index.cshtml:

var pointClick = function (args) {

       let dataSource = args.series.dataSource; // Get the chart's data source

       let  pointIndex = args.pointIndex; // Get the index of the clicked point

       if (dataSource && pointIndex !== undefined) {

         let mappedValue = dataSource[pointIndex].tooltipMappingName;

          if (mappedValue) {

            let url =  `https://www.example.com/${encodeURIComponent(mappedValue)}`;

             window.open(url, "_blank");

    }

}

   <ejs-accumulationchart id="container" pointClick="pointClick">

   </ejs-accumulationchart>

GIF:

Kindly revert us if you have any concerns.

Regards,

Nishanthi

Attachment: Accumulation_chart_49aabcaf.zip

[fabrizio carboni]

Ciao Nishanthi,
unfortunately I can't configure the script,
I have a cshtml page and a cshtml.cs and no matter where I place it, nothing works.
Your great exampe using controller page and I can't replicate the example in my environment
I've tried many times without success, maybe it's just difficult for me

thank

Fabrizio

[Durga Gopalakrishnan]

Thank you for reaching out to us. To assist you further, could you kindly provide a sample code that reproduces the issue you're facing? This will help us better understand and validate the case on our end.

Additionally, we would appreciate it if you could confirm the following details regarding the issue in your application:

• Are you unable to open the URL when clicking on the data point?
• Are you encountering difficulties configuring the provided sample in your application?
• Are you experiencing any other exceptions or errors?
• Have you included any customizations in your sample?
• Do you have any questions or concerns about the script references?

We’re here to help and will do our best to resolve the issue as quickly as possible

[fabrizio carboni]

Hi,

thanks for your support, truly unique 🤗
I attach the two files off my page cshtml and  cshtml .cs in txt format.
I've deleted every test I did from the code, 

Attachment: Graph_cshtml_3da11f65.zip

[Durga Gopalakrishnan]

Thank you for your response. We have reviewed the code snippet you provided and successfully implemented the pointClick event across all accumulation charts. The event is now triggering as expected.

Could you please clarify if you are experiencing any issues with using this event in your application? It would be helpful if you could share a video demonstration of the problem, as this will allow us to investigate the issue more thoroughly and offer more targeted assistance.

Additionally, we have attached the updated sample for your reference.

Attachment: PieDashboard_39aea92b.zip

[fabrizio carboni]

Great,
your solution work fine, now I can set one link for each point 😊

Just one question.
I've learned that I'll use window.open(url, "_blank"); to open a new page 👍

I've tried to open the link in modal mode, without success by:

$("#myModal").modal();
or 
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "randomText", "$(document).ready(function () {$('#myModal').modal();});", true);

In both ways the window does not open/the div does not show

Have you fonud one tips to open link in modal mode?

this is the modal div:

<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">×</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modalewqrqewrqwe.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>