Charting no appearing - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: chart, javascript chart, jquery chart, Pie chart

This topic contains 7 replies, has 2 voices, and was last updated by Peter Stoev 12 years, 2 months ago.

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

Author

Charting no appearing Posts

July 26, 2012 at 12:17 am Charting no appearing #6336

hardcode

Member

Hello please take a look at the following code, I cannot seems to know where the mistake is coming from… thanks

this is the javascript code

//build the pie chart for display in the popup window
		var url = '../php/p.php?rt=pieChartReport';
		alert(url)
		var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'total' },
                    { name: 'item' }
                ],
                url: url
            };
            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 in Dec 2011",
                description: "",
                enableAnimations: true,
                showLegend: false,
                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: 'total',
                                        displayText: 'item',
                                        labelRadius: 100,
                                        initialAngle: 15,
                                        radius: 130,
                                        centerOffset: 0,
                                        formatSettings: { sufix: '%', decimalPlaces: 1 }
                                    }
                                ]
                        }
                    ]
            };
			// setup the chart
            $('#piechart').jqxChart(settings);
		//end building of pie chart

this is my php code

<?php
require_once("../php/conn.php");
if($_GET['rt'] == "pieChartReport"){

			
	$select = 'SELECT t.productLoaded AS item, COUNT( t.productLoaded ) AS total
FROM trip t, multipleDestination m
WHERE t.loadingDate
BETWEEN  "2011/11/13"
AND  "2012/08/01"
AND t.wayBillNumber = m.wayBillNumber
GROUP BY t.productLoaded';
			
	$result = mysql_query($select);
	 //get data and store in a json array
	if($result){
	while ($row = mysql_fetch_array($result)) {
		$piechart[] = array(
			'item' => $row['item'],
			'total' => $row['total']
		  );
	}
	echo json_encode($piechart);
	}
}
?>

I have test the query and it is working.. please help
thanks

July 26, 2012 at 3:29 am Charting no appearing #6338

Peter Stoev

Keymaster

Hi hardcode,

Do you have a DIV tag with ID ‘piechart’? Could you send the HTML part of the code, too.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

July 26, 2012 at 6:19 am Charting no appearing #6355

hardcode

Member

body&gt;
<div style="width:inherit;margin-left:100px">
  <div> <a href="#">
    <div></div>
    </a>
    <!--Place menu here-->
  </div>
  
  <!--Line chart graph begins here -->
  <div>
  </div>
    <!--Line chart graph ends here -->
</div>

July 26, 2012 at 7:42 am Charting no appearing #6356

Peter Stoev

Keymaster

Hi hardcode,

I suggest you to set the id of a DIV tag to ‘piechart’.

For example:

<!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="../../jqwidgets/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="../../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 () {
            // 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 in Dec 2011",
                description: "(source: wikipedia.org)",
                enableAnimations: true,
                showLegend: false,
                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: 100,
                                        initialAngle: 15,
                                        radius: 130,
                                        centerOffset: 0,
                                        formatSettings: { sufix: '%', decimalPlaces: 1 }
                                    }
                                ]
                        }
                    ]
            };
            // setup the chart
            $('#jqxChart').jqxChart(settings);
        });
    </script>
</head>
<body class='default'>
    <div id='host' style="margin: 0 auto; width: 699px; height: 400px;">
        <div id='jqxChart' style="width: 680px; height: 400px; position: relative; left: 0px;
            top: 0px;">
        </div>
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

July 26, 2012 at 11:17 pm Charting no appearing #6377

hardcode

Member

Hello,
Am totally confused now because i have everything that there is to do but the chat is not appearing. am frustrated now. I have spend two days on this. Please kindly help me sort this out…

this is my code for the html side.

<!DOCTYPE html>
<html>
<head>
<title>J.K. Horgle Transport Ltd 2012</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link  href="../css/admin.css" rel="stylesheet" type="text/css" />
<!--provides jqwidgits files-->
<link rel="stylesheet" href="../js/jqwidgets/styles/jqx.base.css"type="text/css" />
<link rel="stylesheet" href="../js/jqwidgets/styles/jqx.energyblue.css" type="text/css" />
<!--provides jqwidgits files-->
<script type="text/javascript" src="../js/scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../js/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../js/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../js/jqwidgets/jqxvalidator.js"></script>
<script type="text/javascript" src="../js/jqwidgets/jqxdatetimeinput.js"></script>
<script type="text/javascript" src="../js/jqwidgets/jqxcalendar.js"></script>
<script type="text/javascript" src="../js/jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../js/jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../js/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../js/jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="../js/jqwidgets/globalization/jquery.global.js"></script>
<script type="text/javascript" src="../js/jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="../js/jqwidgets/jqxwindow.js"></script>
<script type="text/javascript" src="../js/jqwidgets/jqxchart.js"></script>
<script type="text/javascript" src="../js/scripts/gettheme.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//var theme = 'energyblue';
var theme = getTheme;
		//build the pie chart for display in the popup window
		var url = 'p.php';
		var source =
            {   datatype: 'json',
                datafields: [
                    { name: 'items' },
                    { name: 'total' }
                ],
                url: 'p.php'
            };
            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 in Dec 2011",
                description: "Nothings here for now",
                enableAnimations: true,
                showLegend: false,
                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: 'total',
                                        displayText: 'items',
                                        labelRadius: 100,
                                        initialAngle: 15,
                                        radius: 130,
                                        centerOffset: 0,
                                        formatSettings: { sufix: '%', decimalPlaces: 1 }
                                    }
                                ]
                        }
                    ]
            };
			// setup the chart
            $('#piechart').jqxChart(settings);
});
</script>
</head>
<body>
  <!--Line chart graph begins here -->
  <div id="piechart"></div>
</body>
</html>

this is my PHP code

<?php
require_once("../php/conn.php");
$select = 'SELECT t.productLoaded AS items, COUNT( t.productLoaded ) AS total
FROM trip t, multipleDestination m
WHERE t.loadingDate
BETWEEN  "2011/11/13"
AND  "2012/08/01"
AND t.wayBillNumber = m.wayBillNumber
GROUP BY t.productLoaded';
			
	$result = mysql_query($select);
	 //get data and store in a json array
	if($result){
	while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
		$piechart[] = array(
			'items' => $row['items'],
			'total' => $row['total']
		  );
	}
	echo json_encode($piechart);
	}
	
?>

this is the json that is produced after the query runs

[{"items":"Diesel Effimax","total":"1"},{"items":"DX","total":"2"},{"items":"PMS","total":"2"}]

July 27, 2012 at 4:47 am Charting no appearing #6378

Peter Stoev

Keymaster

Hi hardcode,

The issue here is that you didn’t set the Chart’s Size i.e its width and height.

Example:

<!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="../../jqwidgets/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="../../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 () {
            // prepare chart data as an array
            var source =
            { datatype: 'json',
                datafields: [
                    { name: 'items' },
                    { name: 'total', type: 'number' }
                ],
                localdata: [{ "items": "Diesel Effimax", "total": "1" }, { "items": "DX", "total": "2" }, { "items": "PMS", "total": "2"}]
            };
            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 in Dec 2011",
                description: "Nothings here for now",
                enableAnimations: true,
                showLegend: false,
                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: 'total',
                                        displayText: 'items',
                                        labelRadius: 100,
                                        initialAngle: 15,
                                        radius: 130,
                                        centerOffset: 0,
                                        formatSettings: { sufix: '%', decimalPlaces: 1 }
                                    }
                                ]
                        }
                    ]
            };
            // setup the chart
            $('#piechart').jqxChart(settings);
        });
    </script>
</head>
<body class='default'>
        <div id='piechart' style="width: 680px; height: 400px; position: relative; left: 0px;
            top: 0px;">
         </div>
 </body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

July 29, 2012 at 4:38 pm Charting no appearing #6387

hardcode

Member

Hello,
My Chart is displaying correctly and thank you but I have another problem.
That is the title of the chart doesn’t display in Chrome Browser, Mozilla, and Safari but displays correctly and nicely in Internet Explorer. Is this a know issue or there is something more that i should do.
thank you

July 31, 2012 at 8:23 am Charting no appearing #6419

Peter Stoev

Keymaster

Please, try the code from my previous post. The title – “Desktop browsers share in Dec 2011” is displayed correctly.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.