Pie use displayText as label - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: chart, datafield, DisplayText, formatFunction, jqxChart, pie

This topic contains 2 replies, has 2 voices, and was last updated by mkrajew 10 years, 10 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)

Author

Pie use displayText as label Posts

November 5, 2013 at 5:20 pm Pie use displayText as label #31963

mkrajew

Participant

I’d like to use the displayText value as the label on the chart instead of the dataField. Is there a way to do this?

For instance if my data file has this data:
Fiction 86707
Non-fiction 139366
Other 34824

// prepare jqxChart settings
var chartHoldingsByCollectionTypeSettings = {
title: “Holdings by Collection Type”,
description: “”,
enableAnimations: true,
showLegend: true,
showBorderLine: false,
legendLayout: { left: 300, top: 50, width: 300, height: 200, flow: ‘vertical’ },
padding: { left: 0, top: 10, right: 100, bottom: 0 },
titlePadding: { left: 0, top: 0, right: 0, bottom: 0 },
source: dataAdapter,
colorScheme: ‘scheme01’,
seriesGroups:
[
{
type: ‘pie’,
showLabels: true,
series:
[
{
dataField: ‘Records’,
displayText: ‘Collection’,
labelRadius: 120,
initialAngle: 15,
radius: 95,
centerOffset: 0,
formatSettings: { sufix: ‘ records’, thousandsSeparator: ‘,’, decimalPlaces: 0 }
}
]
}
]
};
$(‘#chartHoldingsByCollectionType’).jqxChart(chartHoldingsByCollectionTypeSettings);

I’d like the pie to show “Fiction” next to the pie slice instead of “86707”. I’ve tried the formatFunction, but that only appears to give me the dataField value and not the displayText value. It would be great if the formatFunction could pass in both so I could format the way I’d like.

November 6, 2013 at 9:15 am Pie use displayText as label #32031

Dimitar

Participant

Hello mkrajew,

Here is an example, based on the demo Pie Series:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare chart data as an array
            var source =
            {
                datatype: "csv",
                datafields: [
                    { name: 'Browser' },
                    { name: 'Share' }
                ],
                url: '../sampledata/desktop_browsers_share_dec2011.txt'
            };
            var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
            // prepare jqxChart settings
            var settings = {
                title: "Desktop browsers share in Dec 2011",
                description: "(source: wikipedia.org)",
                enableAnimations: true,
                showLegend: false,
                legendPosition: { left: 520, top: 140, width: 100, height: 100 },
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
                source: dataAdapter,
                colorScheme: 'scheme02',
                seriesGroups:
                    [
                        {
                            type: 'pie',
                            showLabels: true,
                            series:
                                [
                                    {
                                        dataField: 'Share',
                                        displayText: 'Browser',
                                        labelRadius: 100,
                                        initialAngle: 15,
                                        radius: 130,
                                        centerOffset: 0,
                                        formatFunction: function (value, itemIndex) {
                                            var browser = dataAdapter.records[itemIndex].Browser;
                                            return browser + ": " + value + "%";
                                        }
                                    }
                                ]
                        }
                    ]
            };
            // setup the chart
            $('#jqxChart').jqxChart(settings);
        });
    </script>
</head>
<body class='default'>
    <div id='host' style="margin: 0 auto; width: 699px; height: 400px;">
        <div id='jqxChart' style="width: 680px; height: 400px; position: relative; left: 0px;
            top: 0px;">
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

November 6, 2013 at 5:09 pm Pie use displayText as label #32063

mkrajew

Participant

Thanks so much. This is extremely helpful!

Author

Posts

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.