problem chart - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: chart, jqxChart, json, pie

This topic contains 8 replies, has 2 voices, and was last updated by wanfr13 12 years ago.

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

Author

problem chart Posts

September 3, 2012 at 8:33 am problem chart #7371

wanfr13

Member

Hallo,

I’m French, sorry for my english…

When loading the page the number of elements can change

I read the values in the page then I format the values like this

[{pays:USA, nb:1},{pays:France, nb:25},{pays:belgique, nb:2}]

here is my code :

var data = ‘[‘;
$(‘.pays’).each(function() {
data = data + ‘{“Pays”:’ + $(this).text() + ‘,”Nb”:’ + $(this).next().text() + ‘},’;
});
data = data.substr(0, data.length-1);
data = data + ‘]’;

$(‘#sp7’).jqxChart({
title: “Répartitions des inscrits par pays”,
enableAnimations: true,
padding: { left: 20, top: 5, right: 20, bottom: 5 },
legendLayout: { left: 20, top: 220, width: 200, height: 200, flow: ‘vertical’ },
titlePadding: { left: 90, top: 0, right: 90, bottom: 10 },
source: data,
colorScheme: ‘scheme03’,
seriesGroups: [{
type: ‘pie’,
showLabels: true,
series: [{
dataField: ‘nb’,
displayText: ‘pays’,
labelRadius: 120,
initialAngle: 15,
radius: 95,
centerOffset: 0
}]
}]
});

but no pie will be drawn, only 127 legends !
Where is the problem?
thank’s

September 3, 2012 at 10:32 am problem chart #7373

Dimitar

Participant

Hello wanfr13,

It is not possible to create a pie without any numeric values and your construction of the data variable has only text values for both “Pays” – $(this).text() and “Nb” – $(this).next().text(). However, here is an example with the values you gave:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
    <title id='Description'>jqxChart Pie Series Example</title>
    <link rel="stylesheet" href="../../jqwidgets2.4/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4/jqxchart.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4/jqxdata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var data1 = [{ pays: "USA", nb: 1 }, { pays: "France", nb: 25 }, { pays: "belgique", nb: 2}];
            var source =
            {
                datafields: [
                    { name: 'pays' },
                    { name: 'nb' }
                ],
                id: 'id',
                localdata: data1
            };
            var dataAdapter = new $.jqx.dataAdapter(source, {
                downloadComplete: function (data, status, xhr) { },
                loadComplete: function (data) { },
                loadError: function (xhr, status, error) { }
            });
            $('#sp7').jqxChart({
                title: "Répartitions des inscrits par pays",
                enableAnimations: true,
                padding: { left: 20, top: 5, right: 20, bottom: 5 },
                legendLayout: { left: 20, top: 220, width: 200, height: 200, flow: 'vertical' },
                titlePadding: { left: 90, top: 0, right: 90, bottom: 10 },
                source: dataAdapter,
                colorScheme: 'scheme03',
                seriesGroups: [{
                    type: 'pie',
                    showLabels: true,
                    series: [{
                        dataField: 'nb',
                        displayText: 'pays',
                        labelRadius: 120,
                        initialAngle: 15,
                        radius: 95,
                        centerOffset: 0
                    }]
                }]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='host' style="margin: 0 auto; width: 699px; height: 400px;">
        <div id='sp7' style="width: 680px; height: 400px; position: relative; left: 0px;
            top: 0px;">
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

September 3, 2012 at 11:33 am problem chart #7374

wanfr13

Member

hello Dimitar,

ok and thank you for :

var source = {
datafields: [
{ name: ‘pays’ },
{ name: ‘nb’ }
],
id: ‘id’,
localdata: data
};

var dataAdapter = new $.jqx.dataAdapter(source, {
downloadComplete: function (data, status, xhr) { },
loadComplete: function (data) { },
loadError: function (xhr, status, error) { }
});
var dataAdapter = new $.jqx.dataAdapter(source, {
downloadComplete: function (data, status, xhr) { },
loadComplete: function (data) { },
loadError: function (xhr, status, error) { }
});

works with :
var data1 = [{ pays: “USA”, nb: 1 }, { pays: “France”, nb: 25 }, { pays: “belgique”, nb: 2}];

but not work with :

var data = '[';
$('.pays').each(function() {
data = data + '{"Pays":' + $(this).text() + ',"Nb":' + $(this).next().text() + '},';
});
data = data.substr(0, data.length-1);
data = data + ']';

alert(data);
result : [{ pays: “USA”, nb: 1 }, { pays: “France”, nb: 25 }, { pays: “belgique”, nb: 2}]

I do not understand the difference…

Thanks

September 4, 2012 at 8:16 am problem chart #7389

wanfr13

Member

Hi Dimitar,

Here is my code

echo 'p class=hidden;


$r_usr = pg_query ("SELECT usr_pays, COUNT(usr_pays) FROM lt_usr GROUP BY usr_pays ORDER BY usr_pays ASC;");

while ($arr_usr = pg_fetch_array($r_usr)) {

	if ($arr_usr['usr_pays'] ==='') {

		$arr_usr['usr_pays'] = 'non-renseigné';

	}

	echo 'span class=pays' .$arr_usr['usr_pays'] .'/span span class=nb' .$arr_usr['count'] .'/span';

}
echo  'p div style=width: 680px;height: 400px /div'
var data = '[';
$('.pays').each(function() {

	data = data + '{"Pays":' + $(this).text() + ',"Nb":' + $(this).next().text() + '},';

});

data = data.substr(0, data.length-1); data = data + ']';

$(this).text () is the first span is the name of the country ( USA, France Belgique……)
$(this).next ().text () the second span is the number of membre (1, 25, 2……)

Best regards

September 4, 2012 at 8:34 am problem chart #7399

Dimitar

Participant

Hi wanfr13,

The issue with your structure:

data = data + ‘{“Pays”:’ + $(this).text() + ‘,”Nb”:’ + $(this).next().text() + ‘},’;
having in mind that the text of the “pays” classes is for example “USA”, “France” and “belgique”, is that $(this).text() gets “USA” in the first iteration and $(this).next().text() gets “France” and so the JSON structure is as follows:
[ {“pays”: “USA”, “nb”: “France”},… ] and not [ {“pays”: “USA”, “nb”: 1},… ].
jqxChart needs at least one numeric value and the example gives it two strings – “USA” and “France”. You sholud change the structure $(this).next().text() to something that better suits your needs.
You may also want to provide us with your entire source code so we can better understand your example.

Best Regards,
Dimitar

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

September 4, 2012 at 8:41 am problem chart #7400

Dimitar

Participant

Hi wanfr13,

Please post your entire source code, including the HTML. To do it, paste your code, select it and then click the Format HTML Code button above the Reply panel (it looks like { }).

Best Regards,
Dimitar

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

September 4, 2012 at 10:39 am problem chart #7408

wanfr13

Member

Hi Dimitar

code html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<script type="text/javascript" src="default/js/jquery.min.js"></script> //1
		<script type="text/javascript" src="default/js/jqwidgets/jqxcore.js"></script>
		<script type="text/javascript" src="default/js/jqwidgets/jqxchart.js"></script>
		<script type="text/javascript" src="default/js/jqwidgets/jqxdata.js"></script>
		<link rel="stylesheet" href="default/js/jqwidgets/styles/jqx.base.css" type="text/css" />
		<script type="text/javascript">
			$(document).ready(function() {
				var data = ‘[';
				$('.pays').each(function() {
					data = data + '{"Pays":' + $(this).text() + ',"Nb":' + $(this).next().text() + '},';
				});
				data = data.substr(0, data.length-1);
				data = data + ']‘;
				var source =
				{
					datafields: [
						{ name: 'pays' },
						{ name: 'nb' }
					],
					id: 'id',
					localdata: data
				};
				var dataAdapter = new $.jqx.dataAdapter(source, {
					downloadComplete: function (data, status, xhr) { },
					loadComplete: function (data) { },
					loadError: function (xhr, status, error) { }
				});
				
				$('#sp7').jqxChart({
					title: "Répartitions des inscrits par pays",
					enableAnimations: true,
					padding: { left: 20, top: 5, right: 20, bottom: 5 },
					legendLayout: { left: 20, top: 155, width: 200, height: 200, flow: 'vertical' },
					titlePadding: { left: 90, top: 0, right: 90, bottom: 10 },
					source: dataAdapter,
					colorScheme: 'scheme03',
					seriesGroups: [{
						type: 'pie',
						showLabels: true,
						series: [{
							dataField: 'nb',
							displayText: 'pays',
							labelRadius: 120,
							initialAngle: 15,
							radius: 95,
							centerOffset: 0
						}]
					}]
				});
			});
		</script>
	</head>
	<body>
	<div id="ssite">
		<p class="hidden">
			<span class="pays">non-renseigné</span><span class="nb">70</span>
			<span class="pays">Belgique</span><span class="nb">2</span>
			<span class="pays">France</span><span class="nb">25</span>
			<span class="pays">suisse</span><span class="nb">1</span>
			<span class="pays">USA</span><span class="nb">1</span>
		</p>
		<div id="sp7" style="height: 400px; position: relative; left: 0px; top: 0px;"></div>
	</div>
	</body>
</html>

code php

$r_usr = pg_query ("SELECT usr_pays, COUNT(usr_pays) FROM lt_usr GROUP BY usr_pays ORDER BY usr_pays ASC;");
if (!$r_usr) {
	echo "Erreur durant la requète sur lt_eur.<BR>";
	exit;
}
$num_usr =  pg_num_rows($r_usr);
echo "\n\t\t\t\t\t\t\t" .'<div id="ssite">'
	."\n\t\t\t\t\t\t\t\t" ."<h3>Statistiques de l'espace privé</h3>"
	."\n\t\t\t\t\t\t\t\t" .'<p class="hidden">';
while ($arr_usr = pg_fetch_array($r_usr)) {
	if ($arr_usr['usr_pays'] ==='') {
		$arr_usr['usr_pays'] = 'non-renseigné';
	}
	echo "\n\t\t\t\t\t\t\t\t\t" .'<span class="pays">' .$arr_usr['usr_pays'] .'</span><span class="nb">' .$arr_usr['count'] .'</span>';
}
echo "\n\t\t\t\t\t\t\t\t\t" .'</p>';
echo "\n\t\t\t\t\t\t\t\t" .'<div id="sp7" style="height: 400px; position: relative; left: 0px; top: 0px;"></div>';
echo "\n\t\t\t\t\t\t\t" .'</div>'
	."\n\t\t\t\t\t\t";

excuse me for my ignorance
thank you very much
wanfr

September 4, 2012 at 11:04 am problem chart #7413

Dimitar

Participant

Hi wanfr,

We have fixed your code and now it is working:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
    <script type="text/javascript" src="../scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../jqwidgets2.4/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets2.4/jqxchart.js"></script>
    <script type="text/javascript" src="../jqwidgets2.4/jqxdata.js"></script>
    <link rel="stylesheet" href="../jqwidgets2.4/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript">
        $(document).ready(function () {
            var data = '[';
            $('.pays').each(function () {
                data = data + '{ "Pays": "' + $.trim($(this).text()) + '", "Nb": "' + $.trim($(this).next().text()) + '" },';
            });
            data = data.substr(0, data.length - 1);
            data = data + ']';
            var source =
				{
				    datatype: 'json',
				    datafields: [
						{ name: 'Pays' },
						{ name: 'Nb', type: 'number' }
					],
				    id: 'id',
				    localdata: data
				};
            var dataAdapter = new $.jqx.dataAdapter(source, {
                downloadComplete: function (data, status, xhr) { },
                loadComplete: function (data) { },
                loadError: function (xhr, status, error) { }
            });
            $('#sp7').jqxChart({
                title: "Répartitions des inscrits par pays",
                enableAnimations: true,
                padding: { left: 20, top: 5, right: 20, bottom: 5 },
                legendLayout: { left: 20, top: 155, width: 200, height: 200, flow: 'vertical' },
                titlePadding: { left: 90, top: 0, right: 90, bottom: 10 },
                source: dataAdapter,
                colorScheme: 'scheme03',
                seriesGroups: [{
                    type: 'pie',
                    showLabels: true,
                    series: [{
                        dataField: 'Nb',
                        displayText: 'Pays',
                        labelRadius: 120,
                        initialAngle: 15,
                        radius: 95,
                        centerOffset: 0
                    }]
                }]
            });
        });
    </script>
</head>
<body>
    <div id="ssite">
        <p class="hidden">
            <span class="pays">non-renseigné</span><span class="nb">70</span> <span class="pays">
                Belgique</span><span class="nb">2</span> <span class="pays">France</span><span class="nb">25</span>
            <span class="pays">suisse</span><span class="nb">1</span> <span class="pays">USA</span><span
                class="nb">1</span>
        </p>
        <div id="sp7" style="height: 400px; position: relative; left: 0px; top: 0px;">
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

September 4, 2012 at 11:39 am problem chart #7415

wanfr13

Member

Hi dimitar

bravo !

jason encoding will allow me to go further
everything is ok

thank you very much

Author

Posts

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

You must be logged in to reply to this topic.