jQWidgets Forums

Tagged: chart, data, DisplayText, dynamic, formatFunction, jqxChart, series, source

This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 10 years, 9 months ago.

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

Author

Dynamic DisplayText from datasource Posts

August 4, 2014 at 8:13 am Dynamic DisplayText from datasource #57983

Participant

Hi – I am trying to have my displaytext come from the datasource. I have tried the solution that is posted on this site but it doesn’t work for me. I want the “name” field e.g. Seafood Pizza’ to display as the displaytext. Any help greatly appreciated. You have a super product.

var sampleData = [
{ name: ‘Seafood Pizza’, Profit: 80, NumberSales: 490 },
{ name: ‘Chicken Burger’, Profit: 40, NumberSales: 390 },
{ name: ‘Cheese Roll’, Profit: 10, NumberSales: 290 }
];

// prepare jqxChart settings
var settings = {
title: “Your Menu Analysis Graph”,
description: “”,
enableAnimations: true,
showLegend: false,
padding: { left: 5, top: 5, right: 5, bottom: 5 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
source: sampleData,
xAxis:
{
dataField: ‘NumberSales’,
valuesOnTicks: true
},
colorScheme: ‘scheme02’,
seriesGroups:
[
{
type: ‘bubble’,
valueAxis:
{
unitInterval: 10,
minValue: 0,
maxValue: 100,
description: ‘Profit Size’,
formatSettings: { prefix: ”, thousandsSeparator: ‘,’ }
},
series: [
{ dataField: ‘Profit’, radius: 5, displayText: source.sampleData.name, color: ‘#1100EE’ }
]
}
]
};

August 4, 2014 at 9:16 am Dynamic DisplayText from datasource #57987

Dimitar

Participant

Hello Laurence,

I am not sure which solution you refer to, but a similar functionality can be achieved by setting the series’ formatFunction, as shown in the following example:

<!DOCTYPE html>
<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/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">
        $(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 }
                ];

            // 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: sampleData,
                xAxis:
                    {
                        dataField: 'City',
                        valuesOnTicks: false
                    },
                colorScheme: 'scheme04',
                seriesGroups:
                    [
                        {
                            type: 'bubble',
                            valueAxis:
                            {
                                unitInterval: 50000,
                                minValue: 50000,
                                maxValue: 350000,
                                description: 'Sales ($)',
                                formatSettings: { prefix: '$', thousandsSeparator: ',' }
                            },
                            series: [
                                    { dataField: 'SalesQ1', radiusDataField: 'YoYGrowthQ1', minRadius: 10, maxRadius: 30, displayText: 'Sales in Q1', formatFunction: function (value, index) {
                                        return sampleData[index].City;
                                    }
                                    },
                                    { dataField: 'SalesQ2', radiusDataField: 'YoYGrowthQ2', minRadius: 10, maxRadius: 30, displayText: 'Sales in Q2' }
                                ]
                        }
                    ]
            };

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

        });
    </script>
</head>
<body class='default'>
    <div id='chartContainer' style="width: 850px; height: 500px">
    </div>
</body>
</html>

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.