jQWidgets Forums

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

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

Author

Pie Json localdata Posts

November 2, 2015 at 10:01 pm Pie Json localdata #77664

Participant

Good night guys!
I’m sure the following methodology
In an application I get a json, OK?

Exemplo:
var data = [{“cliente”:”Valkim”,”total”:”37000.00″},{“cliente”:”Rocell”,”total”:”224999.98″},{“cliente”:”MTF”,”total”:”400212.64″},{“cliente”:”Recris”,”total”:”409999.81″}];

So to create the chart I set up this way:

var source = {
datatype: “json”,
datafields: [
{name: ‘cliente’, type:’string’},
{name: ‘total’, type:’number’}
],
localdata: data
};

var dataAdapter = new $.jqx.dataAdapter(source);

$(‘#chartContainer’).jqxChart(settings);

The chart to identify the customer in the legend, but does not create the pie to show! Where is the mistake?

Thanks?

November 3, 2015 at 11:23 am Pie Json localdata #77695

Hristo

Participant

Hello Francisco,

I would like to focus on


   dataField: 'total',
   displayText: 'cliente',

.
Here make changes.


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link href="../../libs/jqwidgets-ver3.9.0/jqwidgets/styles/jqx.base.css" rel="stylesheet" />

    <script src="../../libs/jquery-1.11.3.js"></script>
    <script src="../../libs/jqwidgets-ver3.9.0/jqwidgets/jqx-all.js"></script>
    <script src="../../libs/jqwidgets-ver3.9.0/demos/jqxgrid/generatedata.js"></script>
</head>
<body>
    <script>
        $(document).ready(function () {
            var data = [{ "cliente": "Valkim", "total": "37000.00" }, { "cliente": "Rocell", "total": "224999.98" }, { "cliente": "MTF", "total": "400212.64" }, { "cliente": "Recris", "total": "409999.81" }];

            var source = {
                datatype: "json",
                datafields: [
                    { name: 'cliente', type: 'string' },
                    { name: 'total', type: 'number' }
                ],
                localdata: data
            };

            var dataAdapter = new $.jqx.dataAdapter(source);

            var settings = {
                title: "Mobile browsers share in Dec 2011",
                description: "(source: wikipedia.org)",
                renderEngine: 'HTML5',
                enableAnimations: true,
                showLegend: true,
                showBorderLine: false,
                legendLayout: {
                    left: 10,
                    top: 160,
                    width: 300,
                    height: 200,
                    flow: 'vertical'
                },
                padding: {
                    left: 5,
                    top: 5,
                    right: 5,
                    bottom: 5
                },
                titlePadding: {
                    left: 0,
                    top: 0,
                    right: 0,
                    bottom: 10
                },
                source: dataAdapter,
                colorScheme: 'scheme03',
                seriesGroups: [{
                    type: 'pie',
                    showLabels: true,
                    series: [{
                        dataField: 'total',
                        displayText: 'cliente',
                        labelRadius: 170,
                        initialAngle: 15,
                        radius: 145,
                        centerOffset: 0,
                        //formatSettings: { sufix: '%', decimalPlaces: 2 },
                        formatFunction: function (value) {
                            if (isNaN(value))
                                return value;
                            return parseFloat(value) + '%';
                        },
                    }]
                }]
            };

            $('#chartContainer').jqxChart(settings);
        });
    </script>
    <div id="chartContainer" style="width: 600px; height: 600px"></div>
</body>
</html>

Hint: It is important to make some settings in ( <div id="chartContainer" style="width:###px; height:###px"></div> )

Best Regards,
Hristo Hristov

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.