Ticket T688873
Visible to All Users

Web Dashboard - How to show the legend with Arguments and values in the Pie Dashboard Item

created 6 years ago

[DevExpress Support Team: CLONED FROM T627912: WinForms Dashboard - How to configure the legend of the Pie Dashboard Item layout]
How to display the legend in Pie Items with NAME and values in the legend…for webforms… i already have controlupdate underlyng widgts… but… how I configure exactly…

thanks again!

Answers approved by DevExpress Support

created 6 years ago (modified 6 years ago)

Hi,
To enable the legend in Pie Dashboard items in the Web Dashboard application, use the approach demonstrated in the How to access API of underlying widgets in the Web Viewer example. The code used in that example only enables the legend and does not modify its content. So, the legend displays its default values - point arguments. If you wish to change the legend content, for instance display values or percent values you need to additionally use the legend.customizeText function:

JavaScript
function customizeWidgets(args) { if (args.ItemName == "pieDashboardItem1") { var pie = args.GetWidget()[0]; pie.option({ legend: { customizeText: function(e) { var legendText = *specify your own legend text* return legendText; }, visible: true } }); } }

Though the legend.customizeText function does not provide access to the currently processed point's values, you can obtain the required Point instance directly form the widget and use this point's members (like originalArgument, originalValue, percent, etc) further to define the required legend text in the customizeText function:

JavaScript
customizeText: function(e) { var legendText= e.pointName; var points = pie.getSeriesByPos(0).getAllPoints() var currentPoint = points.filter(function (point) { return point.originalArgument === e.pointName; }); if (currentPoint) { legendText= * define your custom text here based on currentPoint[0] fields* } return legendText; },
    Show previous comments (5)
    DevExpress Support Team 6 years ago

      Hi,
      The Point object does not have the "value" property. Please follow my advice from the last post:  I suggest you review the corresponding help topic ( Point) to learn more about information available in the point object. Also, I suggest you inspect the current point's members and their values in debug mode.

        Hi John, I see documentation and tried change legend to bottom chart position…
         visible: true,
         verticalAlignment: bottom

        but doesn't works…

        and, How I format in currency format?
        thanks again…

        legendText = currentPoint[0].originalArgument + ": " + currentPoint[0].originalValue.toFixed(2);

        DevExpress Support Team 6 years ago

          Hi,

          >> I see documentation and tried change legend to bottom chart position. but doesn't works…
          The verticalAlignment property uses the string data type. If the "bottom" word in your code is a string constant, then you need to wrap it with apostrophes:

          JavaScript
          visible: true, verticalAlignment: 'bottom'

          >>How I format in currency format?
          You can use the Globalize.formatCurrency method from the Globalize library to perform formatting in a standard manner.

          Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

          Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.