jQuery UI Widgets Forums Chart Pie use displayText as label

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

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • 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

    var source =
    {
    datatype: “tab”,
    datafields: [
    { name: ‘Collection’ },
    { name: ‘Records’, type: “number” }
    ],
    url: ‘HoldingsByCollectionType.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 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.

    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/

    Pie use displayText as label #32063

    mkrajew
    Participant

    Thanks so much. This is extremely helpful!

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

You must be logged in to reply to this topic.