Pie Chart Behavior

Pie Chart Behavior

Posted by: joe on 20 September 2019, 4:31 pm EST

• 

  joe

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 20 September 2019, 4:31 pm EST

  Hi, again!

  I have a Pie Chart with a legend. I’m trying to get the pie chart to respond to clicks on the legend the same way the pie chart responds to clicks on a pie slice. That is, when a user clicks on text in the pie chart, the pie chart will rotate and highlight the corresponding wedge in the pie.

  The behavior I get is that the click event on the legend fires, the pie rotates, then instantly reverts back to a “non-selected” state. Here’s the code I’m using…

        pieSales = new wijmo.chart.FlexPie('#pieChartSales', {
          itemsSource: $scope.salesDataForPie,
          binding: "total_sales_revenue_at_location",
          bindingName: "slice_display",
          isAnimated: true,
          selectionMode: wijmo.chart.SelectionMode.Point,
          selectedItemPosition: wijmo.chart.Position.Auto,
          selectedItemOffset: 0.03,
          innerRadius: 0.3,
          tooltip: { content: '<b>{name}</b>' },
          onSelectionChanged: function () { //synchronize selection on pie chart with sibling sales grids
            if (data_source[pieSales.selectedIndex] && data_source[pieSales.selectedIndex].location_id != '-1') {
              for (let i = 0; i < gridSales_L.rows.length; i++) {
                if (gridSales_L.rows[i]._data.id == data_source[pieSales.selectedIndex].location_id) {
                  gridSales_L.select(i, 0);
                  gridSales_R.select(i, 0);
                  break;
                }
              }
            } else {
              gridSales_L.select(-1, -1);
              gridSales_R.select(-1, -1);
            }
          },
          rendered: function (s, e) {
            var host = s.hostElement;
            var legend = host.querySelector('.wj-legend');
  
            legend.querySelectorAll('text').forEach(t => {      
              t.addEventListener('click', function () { legendClick(t.innerHTML));
            });
          }
        });
  
  

  Help?

  Thanks!

  Joe

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 22 September 2019, 11:42 pm EST

  Hi Joe,

  You will need to call the stopPropagation method in the event handler to stop the event from propagating to the FlexPie which will deselect the data item. Please refer to the code snippet below:

  var host = s.hostElement;
  var legends = host.querySelectorAll('.wj-legend text');
  legends.forEach((text, idx) => {
  	text.addEventListener('click', event => {
  		event.stopPropagation();
  		s.selectedIndex = idx;
  	}, true)
  })
  

  You may also refer to the sample below:

  https://stackblitz.com/edit/js-uev7it

  Regards,
  
  Ashwin

• 

  joe

  • Post Options:
  • Link
    Copy

  Posted 23 September 2019, 9:14 am EST

  PERFECT!!! Thank you!!