jQWidgets Forums

Tagged: Angular chart, chart, click, datafield, jquery chart, jqxChart

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

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

Author

Pie Chart Change Data Source Posts

August 3, 2015 at 12:07 pm Pie Chart Change Data Source #74436

Digilera58

Participant

Hi guys,

First of all, thank you so much for jQWidgets. Fantastic library for developers.

I have pie chart that have 2 section(datafield) with different id’s . I just want when I click to one of the chart’s section that change datasource and get different datafields on another method. When I click other section of chart that will get different datafields on another datasource.

How can I do this? (Sorry for bad English)

August 3, 2015 at 12:29 pm Pie Chart Change Data Source #74440

Dimitar

Participant

Hi Digilera58,

Your explanation is a bit confusing – what do you mean by “get different datafields on another method”? Feel free to post an example demonstrating your scenario or links to images that clarify your requirement.

Best Regards,
Dimitar

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

August 3, 2015 at 12:58 pm Pie Chart Change Data Source #74444

Digilera58

Participant

Pie_Chart

public JsonResult Get_Pie_DocumentCost()

I use this method for getting data on SQL.

var url="/Report/Get_Pie_DocumentCost";
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'Type' },
                    { name: 'DocumentCost' }
                ],
                url:url
            };

This is javascript code for pie chart source.

I want when I click blue part of the chart method give me value for TypeID=1 or click green part TypeID=2. Then I gave it to my method for getting data on SQL.

public JsonResult Get_Pie_DocumentCost_ByBranchID(int TypeID)

After that my datafields change like this.

var url="/Report/Get_Pie_DocumentCost_ByTypeID";
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'DocumentCost' },
                    { name: 'ServiceCost' },
                    { name: 'WorkmanshipCost' },
                    { name: 'SupplyCost' },
                    { name: 'ShipmentCost' },
                    { name: 'GlassCost' }
                ],
                url:url
            };

I hope you can understand this time.
58

August 3, 2015 at 3:05 pm Pie Chart Change Data Source #74454

Digilera58

Participant

Hello again,

I want to get value of selected pie serie.
But i can’t get the value.

So how can i get the selected pie’s value from jqxchart ?
Could you please send me an example or link ?

Best Regards

August 4, 2015 at 5:57 am Pie Chart Change Data Source #74486

Dimitar

Participant

Hi Digilera58,

For both your requirements you need the chart’s click event. The following example shows how to get the value of the clicked pie slice:

<!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.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.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/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",
                description: "(source: wikipedia.org)",
                enableAnimations: true,
                showLegend: false,
                showBorderLine: true,
                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: 120,
                                        initialAngle: 15,
                                        radius: 170,
                                        centerOffset: 0,
                                        formatSettings: { sufix: '%', decimalPlaces: 1 }
                                    }
                                ]
                        }
                    ]
            };

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

            $('#chartContainer').on('click', function (event) {
                if (event.args) {
                    alert('Value is: ' + event.args.elementValue + '.');
                }
            });
        });
    </script>
</head>
<body class='default'>
    <div id='chartContainer' style="width: 850px; height: 500px;">
    </div>
</body>
</html>

For your first requirement, on click make an Ajax call and retrieve the new data from the server. In the Ajax call’s success callback, set the new source, seriesGroups (and other properties that need to be changed) of the chart.

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.