how to show labels in bubble chart - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: chart, formatFunction, jqxChart, labels, maxRadius, minRadius, radiusDataField

This topic contains 6 replies, has 2 voices, and was last updated by Nadezhda 10 years, 1 month ago.

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

Author

how to show labels in bubble chart Posts

February 24, 2015 at 3:31 pm how to show labels in bubble chart #67578

Participant

I am using bubble chart sample from demos/jqxchart/javascript_chart_bubbleSeries.htm
I want to show label next to every bubble that shows radiusDataField: ‘YoYGrowthQ1’ . If I add labels to series like this:
{ dataField: ‘SalesQ1’, symbolType: ‘square’, radiusDataField: ‘YoYGrowthQ1’, minRadius: 10, maxRadius: 30, displayText: ‘Sales in Q1’, labels: {
visible: true,
verticalAlignment: ‘top’,
offset: { x: 0, y: -20 }
}
it will show value of SalesQ1, but I need value of YoYGrowthQ1.
Is that possible?

Thanks

February 25, 2015 at 7:49 am how to show labels in bubble chart #67616

Nadezhda

Participant

Hello arkgroup,

Here is an example which shows how to format labels to display value of ‘YoYGrowthQ1’ instead ‘SalesQ1’ with “formatFunction. I hope it would be helpful.

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.core.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare chart data as an array
            var sampleData = [
                    { City: 'New York', SalesQ1: 310500, SalesQ2: 210500, YoYGrowthQ1: 1.05, YoYGrowthQ2: 1.25 },
                    { City: 'London', SalesQ1: 120000, SalesQ2: 169000, YoYGrowthQ1: 1.15, YoYGrowthQ2: 0.95 },
                    { City: 'Paris', SalesQ1: 205000, SalesQ2: 275500, YoYGrowthQ1: 1.45, YoYGrowthQ2: 1.15 },
                    { City: 'Tokyo', SalesQ1: 187000, SalesQ2: 130100, YoYGrowthQ1: 0.45, YoYGrowthQ2: 0.55 },
                    { City: 'Berlin', SalesQ1: 187000, SalesQ2: 113000, YoYGrowthQ1: 1.65, YoYGrowthQ2: 1.05 },
                    { City: 'San Francisco', SalesQ1: 142000, SalesQ2: 102000, YoYGrowthQ1: 0.75, YoYGrowthQ2: 0.15 },
                    { City: 'Chicago', SalesQ1: 171000, SalesQ2: 124000, YoYGrowthQ1: 0.75, YoYGrowthQ2: 0.65 }
            ];

            var source =
            {                
                datafields: [
                    { name: 'City' },
                    { name: 'SalesQ1' },
                    { name: 'SalesQ2' },
                    { name: 'YoYGrowthQ1' },
                    { name: 'YoYGrowthQ2' }
                ],
                localdata: sampleData
            };
            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: "Sales by City in Q1 and Q2, and YoY sales growth",
                description: "(the size of the circles represents relative YoY growth)",
                enableAnimations: true,
                showLegend: true,
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: dataAdapter,
                colorScheme: 'scheme04',
                xAxis:
                {
                    dataField: 'City',
                    valuesOnTicks: false
                },
                valueAxis:
                {
                    unitInterval: 50000,
                    minValue: 50000,
                    maxValue: 350000,
                    title: { text: 'Sales ($)<br>' },
                    labels: {
                        formatSettings: { prefix: '$', thousandsSeparator: ',' },
                        horizontalAlignment: 'right'
                    }
                },
                seriesGroups:
                    [
                        {
                            type: 'bubble',
                            series: [
                                    {
                                        dataField: 'SalesQ1', radiusDataField: 'YoYGrowthQ1', minRadius: 10, maxRadius: 30, displayText: 'YoYGrowth in Q1',
                                        labels: {
                                            visible: true, offset: { x: 0, y: -20 },
                                            verticalAlignment: 'top'
                                        },
                                        formatFunction: function (value, itemIndex) {
                                            var YoYGrowth1 = dataAdapter.records[itemIndex].YoYGrowthQ1;
                                            return YoYGrowth1;
                                        }
                                    },
                                    {
                                        dataField: 'SalesQ2', radiusDataField: 'YoYGrowthQ2', minRadius: 10, maxRadius: 30, displayText: 'Sales in Q2',
                                        labels: {
                                            visible: true, offset: { x: 0, y: -20 },
                                            verticalAlignment: 'top'
                                        }
                                    }
                            ]
                        }
                    ]
            };

            // setup the chart
            $('#chartContainer').jqxChart(settings);

            var chart = $('#chartContainer').jqxChart('getInstance');

            // symbol selection drop down
            var symbolsList = ["circle", "diamond", "square", "triangle_up", "triangle_down", "triangle_left", "triangle_right"];
            $("#dropDownSerie1Symbol").jqxDropDownList({ source: symbolsList, selectedIndex: 0, width: '200', height: '25', dropDownHeight: 100 });

            $('#dropDownSerie1Symbol').on('change', function (event) {
                var value = event.args.item.value;
                chart.seriesGroups[0].series[0].symbolType = value;
                chart.update();
            });

            $("#dropDownSerie2Symbol").jqxDropDownList({ source: symbolsList, selectedIndex: 0, width: '200', height: '25', dropDownHeight: 100 });

            $('#dropDownSerie2Symbol').on('change', function (event) {
                var value = event.args.item.value;
                chart.seriesGroups[0].series[1].symbolType = value;
                chart.update();
            });

        });
    </script>
</head>
<body class='default'>
    <div id='chartContainer' style="width: 850px; height: 500px">
    </div>
    <table style="width: 550px">
        <tr>
            <td>
                <p style="font-family: Verdana; font-size: 12px;">
                    Select Serie 1 Symbol:
                </p>
                <div id='dropDownSerie1Symbol'>
                </div>
            </td>
            <td>
                <p style="font-family: Verdana; font-size: 12px;">
                    Select Serie 2 Symbol:
                </p>
                <div id='dropDownSerie2Symbol'>
                </div>
            </td>
        </tr>
    </table>
</body>
</html>

Best Regards,
Nadezhda

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

February 25, 2015 at 2:02 pm how to show labels in bubble chart #67660

arkgroup

Participant

Thank you very much !!!

February 25, 2015 at 6:20 pm how to show labels in bubble chart #67683

arkgroup

Participant

Sorry, have another question. I changed YoYGrowthQ1 data to look this:
var sampleData = [
{ City: ‘New York’, SalesQ1: 310500, SalesQ2: 210500, YoYGrowthQ1:4, YoYGrowthQ2: 1.25 },
{ City: ‘London’, SalesQ1: 310500, SalesQ2: 169000, YoYGrowthQ1:5, YoYGrowthQ2: 0.95 },
{ City: ‘Paris’, SalesQ1: 310500, SalesQ2: 275500, YoYGrowthQ1:6, YoYGrowthQ2: 1.15 },
{ City: ‘Tokyo’, SalesQ1: 187000, SalesQ2: 130100, YoYGrowthQ1: 12, YoYGrowthQ2: 0.55 },
{ City: ‘Berlin’, SalesQ1: 187000, SalesQ2: 113000, YoYGrowthQ1: 10, YoYGrowthQ2: 1.05 },
{ City: ‘San Francisco’, SalesQ1: 142000, SalesQ2: 102000, YoYGrowthQ1: 7, YoYGrowthQ2: 0.15 },
{ City: ‘Chicago’, SalesQ1: 171000, SalesQ2: 124000, YoYGrowthQ1: 5, YoYGrowthQ2: 0.65 }
];

Now, bubble size for Berlin are the same, even value is 10 for YoYGrowthQ1 and 1.05 for YoYGrowthQ2.
How can I made bubble sizes depend on value, even for different series?

Thanks

February 26, 2015 at 2:32 pm how to show labels in bubble chart #67750

Nadezhda

Participant

Hi arkgroup,

You can try to take out the minRadiusand maxRadiusproperties from ‘SalesQ1’ dataField like in the following example.

series: [
        {
            dataField: 'SalesQ1', radiusDataField: 'YoYGrowthQ1', displayText: 'YoYGrowth in Q1',
            labels: {
                visible: true, offset: { x: 0, y: -20 },
                verticalAlignment: 'top'
            },
            formatFunction: function (value, itemIndex) {
                var YoYGrowth1 = dataAdapter.records[itemIndex].YoYGrowthQ1;
                return YoYGrowth1;
            }
        },

Best Regards,
Nadezhda

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

February 26, 2015 at 4:15 pm how to show labels in bubble chart #67754

arkgroup

Participant

if I changed data like this YoYGrowthQ1=2 and YoYGrowthQ2=2 for New York
var sampleData = [
{ City: ‘New York’, SalesQ1: 310500, SalesQ2: 210500, YoYGrowthQ1:2, YoYGrowthQ2: 2 },
{ City: ‘London’, SalesQ1: 310500, SalesQ2: 169000, YoYGrowthQ1:5, YoYGrowthQ2: 0.95 },
{ City: ‘Paris’, SalesQ1: 310500, SalesQ2: 275500, YoYGrowthQ1:6, YoYGrowthQ2: 1.15 },
{ City: ‘Tokyo’, SalesQ1: 187000, SalesQ2: 130100, YoYGrowthQ1: 12, YoYGrowthQ2: 0.55 },
{ City: ‘Berlin’, SalesQ1: 187000, SalesQ2: 113000, YoYGrowthQ1: 10, YoYGrowthQ2: 1.05 },
{ City: ‘San Francisco’, SalesQ1: 142000, SalesQ2: 102000, YoYGrowthQ1: 7, YoYGrowthQ2: 0.15 },
{ City: ‘Chicago’, SalesQ1: 171000, SalesQ2: 124000, YoYGrowthQ1: 5, YoYGrowthQ2: 0.65 }
];
Same data now still shows different size of bubbles: SalesQ1 bigger then SalesQ2 for New York after I removed minRadiusand maxRadius
from ‘SalesQ1′

February 27, 2015 at 8:17 am how to show labels in bubble chart #67784

Nadezhda

Participant

Hi arkgroup,

If you want to show the same size of bubbles (SalesQ1 ,SalesQ2) you should use the same values of radiusDataField and set the same values in maxRadius in each serie. If value of radiusDataField is bigger than value of maxRadius(ie. Tokyo – YoYGrowthQ1: 12, YoYGrowthQ2: 12) the bubble with radiusDataField value will be with the maxRadius value and the smaller bubble will change the radius based on the maxRadius value.
Here is an example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>jqxChart Bubble Series Example</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.core.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare chart data as an array
            var sampleData = [
                    { City: 'New York', SalesQ1: 310500, SalesQ2: 210500, YoYGrowthQ1: 4, YoYGrowthQ2: 4 },
                    { City: 'London', SalesQ1: 120000, SalesQ2: 169000, YoYGrowthQ1: 5, YoYGrowthQ2: 3 },
                    { City: 'Paris', SalesQ1: 205000, SalesQ2: 275500, YoYGrowthQ1: 6, YoYGrowthQ2: 1.15 },
                    { City: 'Tokyo', SalesQ1: 187000, SalesQ2: 130100, YoYGrowthQ1: 3, YoYGrowthQ2: 5 },
                    { City: 'Berlin', SalesQ1: 187000, SalesQ2: 113000, YoYGrowthQ1: 10, YoYGrowthQ2: 10 },
                    { City: 'San Francisco', SalesQ1: 142000, SalesQ2: 102000, YoYGrowthQ1: 7, YoYGrowthQ2: 5 },
                    { City: 'Chicago', SalesQ1: 171000, SalesQ2: 124000, YoYGrowthQ1: 5, YoYGrowthQ2: 0.65 }
            ];

            var source =
            {                
                datafields: [
                    { name: 'City' },
                    { name: 'SalesQ1' },
                    { name: 'SalesQ2' },
                    { name: 'YoYGrowthQ1' },
                    { name: 'YoYGrowthQ2' }
                ],
                localdata: sampleData
            };
            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: "Sales by City in Q1 and Q2, and YoY sales growth",
                description: "(the size of the circles represents relative YoY growth)",
                enableAnimations: true,
                showLegend: true,
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: dataAdapter,
                colorScheme: 'scheme04',
                xAxis:
                {
                    dataField: 'City',
                    valuesOnTicks: false
                },
                valueAxis:
                {
                    unitInterval: 50000,
                    minValue: 50000,
                    maxValue: 350000,
                    title: { text: 'Sales ($)<br>' },
                    labels: {
                        formatSettings: { prefix: '$', thousandsSeparator: ',' },
                        horizontalAlignment: 'right'
                    }
                },
                seriesGroups:
                    [
                        {
                            type: 'bubble',
                            series: [
                                    {
                                        dataField: 'SalesQ1', radiusDataField: 'YoYGrowthQ1', minRadius: 0.5, maxRadius: 10, displayText: 'YoYGrowth in Q1',
                                        labels: {
                                            visible: true, offset: { x: 0, y: -20 },
                                            verticalAlignment: 'top'
                                        },
                                        formatFunction: function (value, itemIndex) {
                                            var YoYGrowth1 = dataAdapter.records[itemIndex].YoYGrowthQ1;
                                            return YoYGrowth1;
                                        }
                                    },
                                    {
                                        dataField: 'SalesQ2', radiusDataField: 'YoYGrowthQ2', minRadius: 0.5, maxRadius: 10, displayText: 'YoYGrowth in Q2',
                                        labels: {
                                            visible: true, offset: { x: 0, y: -20 },
                                            verticalAlignment: 'top'
                                        },
                                        formatFunction: function (value, itemIndex) {
                                            var YoYGrowth2 = dataAdapter.records[itemIndex].YoYGrowthQ2;
                                            return YoYGrowth2;
                                        }
                                    }
                            ]
                        }
                    ]
            };

            // setup the chart
            $('#chartContainer').jqxChart(settings);

            var chart = $('#chartContainer').jqxChart('getInstance');

            // symbol selection drop down
            var symbolsList = ["circle", "diamond", "square", "triangle_up", "triangle_down", "triangle_left", "triangle_right"];
            $("#dropDownSerie1Symbol").jqxDropDownList({ source: symbolsList, selectedIndex: 0, width: '200', height: '25', dropDownHeight: 100 });

            $('#dropDownSerie1Symbol').on('change', function (event) {
                var value = event.args.item.value;
                chart.seriesGroups[0].series[0].symbolType = value;
                chart.update();
            });

            $("#dropDownSerie2Symbol").jqxDropDownList({ source: symbolsList, selectedIndex: 0, width: '200', height: '25', dropDownHeight: 100 });

            $('#dropDownSerie2Symbol').on('change', function (event) {
                var value = event.args.item.value;
                chart.seriesGroups[0].series[1].symbolType = value;
                chart.update();
            });

        });
    </script>
</head>
<body class='default'>
    <div id='chartContainer' style="width: 850px; height: 500px">
    </div>
    <table style="width: 550px">
        <tr>
            <td>
                <p style="font-family: Verdana; font-size: 12px;">
                    Select Serie 1 Symbol:
                </p>
                <div id='dropDownSerie1Symbol'>
                </div>
            </td>
            <td>
                <p style="font-family: Verdana; font-size: 12px;">
                    Select Serie 2 Symbol:
                </p>
                <div id='dropDownSerie2Symbol'>
                </div>
            </td>
        </tr>
    </table>
</body>
</html>

Best Regards,
Nadezhda

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

Author

Posts

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

You must be logged in to reply to this topic.