jQWidgets Forums

Tagged: chart, click, jqxChart

This topic contains 2 replies, has 2 voices, and was last updated by raffaele 12 years, 1 month ago.

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

Author

How to get displayText value with charts Posts

May 17, 2013 at 2:31 am How to get displayText value with charts #21300

raffaele

Member

Hi,
i want to get a clicked displayText on a bar chart (the data is retrieved from a database).

This is my code:

var sampleData =
			{
			datatype: "json",
			datafields: [
			    { name: 'candidato'},
			    { name: 'perc'},
			    { name: 'ids'}
			],
			url: '/customcode/esito.php',
			async: false
		    };
var dataAdapter = new $.jqx.dataAdapter(sampleData);
categoryAxis:
			{
				dataField: 'candidato',
			},
			seriesGroups:
			    [
				{
				    type: 'column',
				    showLabels: true,
				    click: myEventHandler,
				    valueAxis:
					    {
						flip: false,
						displayValueAxis: true,
						description: 'Voti totali',
					    },
				    series:
					[
					    { 
						dataField: 'perc',
						displayText: 'ids',
						labelRadius: 100,
						initialAngle: 15,
						radius: 130,
						centerOffset: 0,
						formatSettings: { sufix: '%', decimalPlaces: 2 },
					    }
					]
				}
			    ]
		    };

I want get the respective ‘ids’ on click: alert(e.serie.displayText);
But I receive the name of filed (ids) and not the value (for example “Fecondo”)!!
This is the output of my php page:

[{"perc":"40.7407","candidato":"Fecondo","ids":"1"},{"perc":"31.4815","candidato":"De Angelis","ids":"2"},{"perc":"14.8148","candidato":"Foglia","ids":"5"},{"perc":"7.4074","candidato":"Musone","ids":"4"},{"perc":"5.5556","candidato":"Tartaglione","ids":"3"}]

Help me pls, this is my first experience with jqWidgets!!

May 17, 2013 at 6:54 am How to get displayText value with charts #21317

Dimitar

Participant

Hello raffaele,

Here is a modified version of your code, which shows the functionality you requested:

<!DOCTYPE html />
<html lang="en">
<head>
    <title id='Description'>jQuery Chart Column Series Example</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.9.1.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 () {
            var sampleData = [
                { perc: "40.7407", candidato: "Fecondo", ids: "1" },
                { perc: "31.4815", candidato: "De Angelis", ids: "2" },
                { perc: "14.8148", candidato: "Foglia", ids: "5" },
                { perc: "7.4074", candidato: "Musone", ids: "4" },
                { perc: "5.5556", candidato: "Tartaglione", ids: "3" }
            ];
            // prepare jqxChart settings
            var settings = {
                title: "Fitness & exercise weekly scorecard",
                description: "Time spent in vigorous exercise",
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: sampleData,
                categoryAxis:
			{
			    dataField: 'candidato'
			},
                seriesGroups:
			    [
				{
				    type: 'column',
				    showLabels: true,
				    valueAxis:
					    {
					        flip: false,
					        displayValueAxis: true,
					        description: 'Voti totali'
					    },
				    series:
					[
					    {
					        dataField: 'perc',
					        displayText: 'ids',
					        labelRadius: 100,
					        initialAngle: 15,
					        radius: 130,
					        centerOffset: 0,
					        formatSettings: { sufix: '%', decimalPlaces: 2 }
					    }
					]
				}
			    ]
            };
            // select the chartContainer DIV element and render the chart.
            $('#chartContainer').jqxChart(settings);
            // get the series groups of an existing chart
            var groups = $('#chartContainer').jqxChart('seriesGroups');
            // add a click event handler function to the 1st group    
            if (groups.length > 0) {
                groups[0].click = function (e) {
                    alert(sampleData[e.elementIndex].candidato);
                };
                // update the group
                $('#chartContainer').jqxChart({ seriesGroups: groups });
            };
        });
    </script>
</head>
<body style="background: white;">
    <div id='chartContainer' style="width: 600px; height: 400px" />
</body>
</html>

Best Regards,
Dimitar

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

May 19, 2013 at 6:16 pm How to get displayText value with charts #21397

raffaele

Member

Dimitar tnx!!!

Author

Posts

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

You must be logged in to reply to this topic.