jQWidgets Forums

Forum Replies Created

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

Author

Posts

May 1, 2013 at 12:00 pm in reply to: Line Chart Combined with Stacked Column Line Chart Combined with Stacked Column #20408

Sanatan

Participant

$query = “SELECT * FROM `Invoices` ORDER BY OrderDate LIMIT 0 , 100”;
$result = mysql_query($query) or die(“SQL Error 1: ” . mysql_error());

// get data and store in a json array
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
$orders[] = array(
‘OrderDate’ => $row[‘OrderDate’],
‘ProductName’ => $row[‘ProductName’],
‘Quantity’ => $row[‘Quantity’]
);
}

echo json_encode($orders);

how do i make it work for a stacked bar chart

April 30, 2013 at 5:45 am in reply to: Nested grid with row filtering Nested grid with row filtering #20293

Sanatan

Participant

Thanks Dimitar….

Things are working fine now …. but it works with xml only

I tried implementing the same in “server_side_grid__with_nested_grids” …. No results..

Then i came to understand the i need to put a filter function and put a filter query in data.php, so i copied the query form “server_side_grid_filtering_and_virtualscrolling” … still it doesnt work

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.classic.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>	
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'CustomerID'},
                    { name: 'CompanyName'},
                    { name: 'ContactName'},
                    { name: 'ContactTitle'},
                    { name: 'Address'},
                    { name: 'City'},
                ],
				id: 'CustomerID',
                url: 'data.php',
				root: 'Rows',
				cache: false,
                beforeprocessing: function (data) {
                    source.totalrecords = data[0].TotalRows;
                },
				sort: function()
				{
					$("#jqxgrid").jqxGrid('updatebounddata', 'sort');
				},				
				filter: function()
				{
					// update the grid and send a request to the server.
					$("#jqxgrid").jqxGrid('updatebounddata', 'filter');
				}
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
			
            var initrowdetails = function (index, parentElement, gridElement) {      
	    var row = index;
	    var id = $("#jqxgrid").jqxGrid('getrowdata', row)['CustomerID'];
	    var grid = $($(parentElement).children()[0]);
	    var filtergroup = new $.jqx.filter();
                var filter_or_operator = 1;
                var filtervalue = id;
                var filtercondition = 'equal';
                var filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
            
				var source =
				{
					url: 'data.php',
					dataType: 'json',
					data: {customerid: id},
					datatype: "json",
					cache: false,
					datafields: [
						 { name: 'ShippedDate' },
						 { name: 'ShipName' },
						 { name: 'ShipAddress' },
						 { name: 'ShipCity' },
						 { name: 'ShipCountry' }
					],
					root: 'Rows',
					beforeprocessing: function (data) {
						source.totalrecords = data[0].TotalRows;
					},     
					sort: function()
					{
						grid.jqxGrid('updatebounddata', 'sort');
					},
					filter: function()
					{
					// update the grid and send a request to the server.
						grid.jqxGrid('updatebounddata', 'filter');
					}
 				};
				var adapter = new $.jqx.dataAdapter(source);
				// init Orders Grid
				grid.jqxGrid(
				{
					virtualmode: true,
					showfilterrow: true,
					filterable: true,
					sortable: true,
					height: 190,
					width: 530,
					pageable: true,
					pagesize: 5,
					source: adapter,
					theme: 'classic',
					rendergridrows: function (obj) {
						return obj.data;
					},
					columns: [
						  { text: 'Shipped Date', datafield: 'ShippedDate', cellsformat: 'd', width: 200 },
						  { text: 'Ship Name', datafield: 'ShipName', width: 200 },
						  { text: 'Address', datafield: 'ShipAddress', width: 180 },
						  { text: 'City', datafield: 'ShipCity', width: 100 },
						  { text: 'Country', datafield: 'ShipCountry', width: 140 }
					  ]
				});					
			};
			  
			// set rows details.
            $("#jqxgrid").bind('bindingcomplete', function (event) {
                if (event.target.id == "jqxgrid") {
                    $("#jqxgrid").jqxGrid('beginupdate');
                    var datainformation = $("#jqxgrid").jqxGrid('getdatainformation');
                    for (i = 0; i < datainformation.rowscount; i++) {
                        $("#jqxgrid").jqxGrid('setrowdetails', i, "<div id='grid" + i + "' style='margin: 10px;'></div>", 220, true);
                    }
                    $("#jqxgrid").jqxGrid('resumeupdate');
                }
            });
			
			$("#jqxgrid").jqxGrid(
            {
                source: dataAdapter,
                theme: 'classic',
				pageable: true,
				sortable: true,
				showfilterrow: true,
				filterable: true,
				autoheight: true,
                virtualmode: true,
                rowdetails: true,
                initrowdetails: initrowdetails,
                rendergridrows: function () {
                    return dataAdapter.records;
                },				
                columns: [
                  { text: 'Company Name', datafield: 'CompanyName', width: 250},
                  { text: 'ContactName', datafield: 'ContactName', width: 150 },
                  { text: 'Contact Title', datafield: 'ContactTitle', width: 180 },
                  { text: 'Address', datafield: 'Address', width: 200 },
                  { text: 'City', datafield: 'City', width: 120 }
              ]
            });        	
        });
    </script>
</head>
<body class='default'>
   <div id="jqxgrid"></div>
</body>
</html>

Author

Posts

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