jQWidgets Forums

jQuery UI Widgets › Forums › Chart › Tooltip in pie chart

Tagged: ,

This topic contains 2 replies, has 2 voices, and was last updated by  Peter Stoev 12 years, 5 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Tooltip in pie chart Posts
  • November 28, 2012 at 10:39 am Tooltip in pie chart #11592

    midi
    Participant

    Hi,

    I try to modify the tooltip in the pie chart but it doesn’t work the way I think.

    Here is the code for settings of the pie chart:

    var settings = {
        showBorderLine: false,
        borderLineWidth: 0, 
        enableAnimations: true,
        showLegend: true,
        legendLayout: { left: 40, top: 500, width: 850, height: 65, flow: 'horizontal' },
        padding: { left: 5, top: 5, right: 5, bottom: 75 },
        titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
        source: dataAdapter,
        colorScheme: 'scheme03',
        seriesGroups:
            [
                {
                    type: 'pie',
                    showLabels: true,
                    categoryAxis:
                    {
                    	dataField: 'block_premium_percent',
            	        toolTipFormatFunction: function (value) {
            	            return "Added: "+value;
            	        }
                    },
                    series:
                        [
                            { 
                                dataField: 'block_premium_percent',
                                displayText: 'block_label',
                                labelRadius: 230,
                                initialAngle: 15,
                                radius: 200,
                                centerOffset: 0,
                                formatSettings: { sufix: '%', decimalPlaces: 2 }
                            }
                        ]
                }
            ]
    };
    $('#project_pie').jqxChart(settings);

    After applying above code, I see that the tooltip will be displayed in this format: ‘Added: block_label: block_premium_percent’. However, the legend becomes ‘Added: block_label’.

    Is there any suggestion on how to customize the label part and value part of tooltip respectively in ‘pie’ type chart without affecting elsewhere?

    Besides, is there any method to customize display of the legend in ‘pie’ chart, especially the width of each column which will cause overlap sometimes when it’s displayed in vertical way?

    Best Regards,
    midi

    November 29, 2012 at 3:21 am Tooltip in pie chart #11660

    midi
    Participant

    And one more thing to report:

    The ‘color’ property under ‘series’ doesn’t work at all in pie chart. The serie can not be rendered by a specified color.

    Best Regards,
    midi

    November 29, 2012 at 6:24 am Tooltip in pie chart #11674

    Peter Stoev
    Keymaster

    Hi midi,

    The Pie Chart has many slices which should be with different colors so setting a color property of Pie Series is not expected to do anything by design.

    Here’s a sample which demonstrates how to create a Pie Chart with Custom Colors:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html lang="en">
    <head>
        <title id='Description'>jqxChart Pie Series Example</title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.8.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); } });
                $.jqx._jqxChart.prototype.colorSchemes.push({ name: 'myScheme', colors: ['#ffff00', '#ff0000', '#ccff00', '#00ffff', '#aaaaaa'] });
              
                // 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: 'myScheme',
                    seriesGroups:
                        [
                            {
                                type: 'pie',
                                showLabels: true,
                                series:
                                    [
                                        { 
                                            dataField: 'Share',
                                            displayText: 'Browser',
                                            labelRadius: 100,
                                            initialAngle: 15,
                                            radius: 130,
                                            centerOffset: 0,
                                            formatSettings: { sufix: '%', decimalPlaces: 1 }
                                        }
                                    ]
                            }
                        ]
                };
                // 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>

    We will consider improving the Tooltip’s formatting logic in the future versions.

    Best Wishes,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.