Editing pie chart tooltip

Editing pie chart tooltip

Posted by: ed on 10 July 2019, 6:41 pm EST

• 

  ed

  • Post Options:
  • Link
    Copy

  Posted 10 July 2019, 6:41 pm EST

  I want to edit the tooltip for my pie charts in my MVC Core 2.2 app. Here is my code that defines the chart.
  
  updateAgingChart = function (aging, agingChart) {
  
  var labels = [“Current”, “1 to 30”, “31 to 60”, “61 to 90”, “91 to 120”, “Over 120”];
  
  var eventsData = new wijmo.collections.ObservableArray();
  
  agingChart.beginUpdate();
  
  agingChart.isAnimated = false,
  
  agingChart.selectionMode = wijmo.chart.SelectionMode.Point,
  
  agingChart.selectedItemPosition = wijmo.chart.Position.Auto,
  
  agingChart.innerRadius = 0.6,
  
  agingChart.palette = wijmo.chart.Palettes[‘cocoa’],
  
  agingChart.header = “Accounts Receivable Aging”
  
  agingChart.binding = ‘value’;
  
  agingChart.bindingName = ‘key’;
  
  agingChart.itemsSource = processData();
  
  agingChart.selectedIndex = null;
  
  agingChart.hostElement.addEventListener(‘mouseover’, (e) => {
  
  var htInfo = agingChart.hitTest(e);
  
  alert(htInfo.value)
  
  })
  
  agingChart.endUpdate();

  function processData() {
      eventsData.clear();
      for (var i = 0; i < aging.length; i++) {
          eventsData.push({
              key: labels[i],
              value: aging[i]
              
          });
      }
      return (eventsData);
  };
  

  }

  My EventListener works and I can get the htInfo.value but I can’t figure out how to get the label name and modify the tooltip. Also, would like to add a value for the percent the value is of the total.

  Can you give me an example of how to do it?

  Thanks, Ed

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 11 July 2019, 6:39 am EST

  Hi Ed,

  You can easily modify the content of the chart’s tooltip using the tooltip property of FlexPie. The tooltip property, which is an instance of ChartTooltip class, has a property known as content that can be used to specify the tooltip’s content. It accepts a function that takes a HitTestInfo object as a parameter.

  You can get the label and the value of the current point by using the HitTestInfo’s name and value property. Also, to find the percentage you may easily find the total of all the values and divide it by the current value. Please refer to the code snippet below:

  var tooltip = agingChart.tooltip;
  tooltip.content = function (ht) {
    var total = ht.chart.collectionView.getAggregate('Sum', 'value');
    var percent = ht.value / total;
    return ht.name + ":" + ht.value.toFixed() + '<br>Percent: ' + wjcCore.Globalize.formatNumber(percent, 'p2');
  }
  

  You may also refer to the sample below:

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

  API Reference:

  • "* “ChartTooltip: https://www.grapecity.com/wijmo/api/classes/wijmo_chart.charttooltip.html”
    
    "
• 

  ed

  • Post Options:
  • Link
    Copy

  Posted 11 July 2019, 2:00 pm EST

  Hi Ashwin,
  
  Thanks for your help. The only problem now I’m having is that this line of code isn’t working;

  var total = ht.chart.collectionView.getAggregate(‘Sum’, ‘value’);

  if I do an "alert(total) I am getting a value of 0. I am using build 5.20191.615.

  Thanks, Ed

• 

  ed

  • Post Options:
  • Link
    Copy

  Posted 11 July 2019, 2:05 pm EST

  I have the following scripts in my Layout.cshtml

      <script src="~/js/wijmo.chart.min.js"></script>
      <script src="~/js/wijmo.grid.min.js"></script>
      <script src="~/js/wijmo.nav.min.js"></script>
      <script src="~/js/wijmo.input.min.js"></script>
  

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 12 July 2019, 6:23 am EST

  Hi again,

  The reason that the total variable is returning 0 because the value stored in the ‘value’ key are in string format. To solve this issue, you will need to convert them to a number before passing them to the chart. Please update the processData method as below:

  function processData() {
        eventsData.clear();
        for (var i = 0; i < aging.length; i++) {
              eventsData.push({
                    key: labels[i],
                    value: +aging[i] // this will convert them to number
              });
        }
        return (eventsData);
  };
  

• 

  ed

  • Post Options:
  • Link
    Copy

  Posted 12 July 2019, 12:09 pm EST

  Hi Ashwin,
  
  I’m good for now. Thanks again for your help.
  
  Ed

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 13 July 2019, 1:06 am EST

  Hey,

  Glad to be able to help. Let us know if you face any other issues.