jQWidgets Forums
jQuery UI Widgets › Forums › Grid › how to have two grids with one json
Tagged: charts, dataAdaptor, grid, json, json to multiple grids, multiple grids
This topic contains 8 replies, has 2 voices, and was last updated by Miguel 11 years, 6 months ago.
Viewing 9 posts - 1 through 9 (of 9 total)
-
Author
-
hi i currently sending two json request one for each Grid/table, i am trying to simplify this code and only send one json to get all the data then filter or select specific data to populate the grids and charts is this possible below is my code. any help would be great i have tried using the filter functions but have had no luck.
<?php
include 'config.php';// Check if the user is logged in
if(!isSet($_SESSION['username'])){header("Location: login.php");exit;
}
?>
<!doctype html><html lang="en"><head><link rel="stylesheet" href="Styles/jqx.base.css" type="text/css" /><script type="text/javascript" src="/PHP/CPM_Stats/jqwidgets/scripts/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="/PHP/CPM_Stats/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="/PHP/CPM_Stats/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="/PHP/CPM_Stats/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="/PHP/CPM_Stats/jqwidgets/jqxscrollview.js"></script>
<script type="text/javascript" src="/PHP/CPM_Stats/jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="/PHP/CPM_Stats/jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="/PHP/CPM_Stats/jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="/PHP/CPM_Stats/jqwidgets/jqxgrid.filter.js"></script>
<script type="text/javascript" src="/PHP/CPM_Stats/jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="/PHP/jqwidgets/jqxgrid.pager.js"></script>
<script type="text/javascript" src="/PHP/CPM_Stats/jqwidgets/jqxgrid.columnsresize.js"></script>
<script type="text/javascript" src="/PHP/CPM_Stats/jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="/PHP/CPM_Stats/jqwidgets/jqxdatetimeinput.js"></script>
<script type="text/javascript" src="/PHP/CPM_Stats/jqwidgets/jqxcalendar.js"></script>
<script type="text/javascript" src="/PHP/CPM_Stats/jqwidgets/globalization/globalize.js"></script>
<script type="text/javascript" src="/PHP/CPM_Stats/jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="/PHP/CPM_Stats/jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="/PHP/CPM_Stats/jqwidgets/jqxpanel.js"></script>
<script type="text/javascript" src="/PHP/CPM_Stats/jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="/PHP/CPM_Stats/jqwidgets/jqxchart.js"></script>
<script type="text/javascript" src="/PHP/CPM_Stats/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="/PHP/CPM_Stats/jqwidgets/jqxdragdrop.js"></script>
<script type="text/javascript" src="/PHP/CPM_Stats/jqwidgets/scripts/gettheme.js"></script>
<script type="text/javascript">$(document).ready(function() {var theme = getDemoTheme();
var url1 = "DisplayResults.php";var url2 = "DisplayResultsFinished.php";//prepare data
var source1 = null;
var source2 = null;
var settings1 = null;
var settings2 = null;
source1 ={datatype: "json",type: "POST",datafields:[
{ name: 'MessageID', type: 'int' },{ name: 'Start', type: 'date', cellsformat: 'MM/dd/yyyy HH:mm' },{ name: 'Status', type: 'string' },{ name: 'Campaign', type: 'string' },{ name: 'CampaignID', type: 'int' },{ name: 'CampaignName', type: 'string' },{ name: 'Processed' ,type:'int'},{ name: 'Delivered', type: 'int' },{ name: 'Bounced', type: 'int' },{ name: 'Open', type: 'int' },{ name: 'Clicks', type: 'int' }, ],url: url1
};
var source2 = {datatype: "json",type: "POST",datafields: [
{ name: 'MessageID', type: 'int' },{ name: 'Start', type: 'date', cellsformat: 'MM/dd/yyyy HH:mm' },{ name: 'Status', type: 'string' },{ name: 'Campaign', type: 'string' },{ name: 'CampaignID', type: 'int' },{ name: 'CampaignName', type: 'string' },{ name: 'Processed' ,type:'int'},{ name: 'Delivered', type: 'int' },{ name: 'Bounced', type: 'int' },{ name: 'Open', type: 'int' },{ name: 'Clicks', type: 'int' }, ],url: url2
};
//data adapter
var dataAdapterDel = new $.jqx.dataAdapter(source1,{autoBind:true,
downloadComplete: function (data, status, xhr) { },loadComplete: function (data) { },loadError: function (xhr, status, error) { },});
var dataAdapterFin = new $.jqx.dataAdapter(source2,{autoBind: true,
downloadComplete: function (data, status, xhr) { },loadComplete: function (data) { },loadError: function (xhr, status, error) { },});
//initialize jqxgrid
$("#jqxgrid1").jqxGrid({width: 1400,
source: dataAdapterDel,
//theme: "jqx.ui-darkness",selectionmode: 'multiplerowsextended',//showfilterrow: true,
filterable: true,
sortable: true,
pageable: true,
autoheight: true,
columnsresize: true,
autoshowfiltericon: true,
columns: [
{text: 'Status', datafield: 'Status', width: 100 },{ text: 'Date', datafield: 'Start', filtertype: 'date', width: 150, cellsformat: 'MM/dd/yyyy HH:mm' },{ text: 'Message ID', datafield: 'MessageID', width: 150, filtertype: 'number' },{ text: 'Campaign', datafield: 'Campaign', width: 250, filtertype: 'textbox' },{ text: 'Campaign ID', datafield: 'CampaignID', width: 100, filtertype: 'number'},{ text: 'Campaign Name', datafield: 'CampaignName', width: 250, filtertype: 'textbox' },{ text: 'Processed', datafield: 'Processed', width: 75, filtertype: 'number'},{ text: 'Delivered', datafield: 'Delivered', width: 75, filtertype: 'number'},{ text: 'Bounced', datafield: 'Bounced', width: 75, filtertype: 'number'},{ text: 'Open', datafield: 'Open', width: 75, filtertype: 'number'},{ text: 'Clicks', datafield: 'Clicks', width: 100, filtertype: 'number' }],
});
$("#jqxgrid2").jqxGrid({width: 1400,
source: dataAdapterFin,
//theme: "jqx.ui-darkness",selectionmode: 'multiplerowsextended',//showfilterrow:true,
filterable: true,
sortable: true,
pageable: true,
autoheight: true,
columnsresize: true,
autoshowfiltericon: true,
columns: [
{ text: 'Status', datafield: 'Status', width: 100 },{ text: 'Date', datafield: 'Start', filtertype: 'date', width: 150, cellsformat: 'MM/dd/yyyy HH:mm' },{ text: 'Message ID', datafield: 'MessageID', width: 150, filtertype: 'number', theme: 'black' },{ text: 'Campaign', datafield: 'Campaign', width: 250, filtertype: 'textbox', theme: 'black' },{ text: 'Campaign ID', datafield: 'CampaignID', width: 100, filtertype: 'number', theme: 'black' },{ text: 'Campaign Name', datafield: 'CampaignName', width: 250, filtertype: 'textbox', theme: 'black' },{ text: 'Processed', datafield: 'Processed', width: 75, filtertype: 'number', theme: 'black' },{ text: 'Delivered', datafield: 'Delivered', width: 75, filtertype: 'number', theme: 'black' },{ text: 'Bounced', datafield: 'Bounced', width: 75, filtertype: 'number', theme: 'black' },{ text: 'Open', datafield: 'Open', width: 75, filtertype: 'number', theme: 'black' },{ text: 'Clicks', datafield: 'Clicks', width: 100, filtertype: 'number', theme: 'black' }]
});
// prepare jqxChart settings
settings1 = {title: "Delivered Campaigns Stats",showLegend: true,
padding: { left: 5, top: 5, right: 5, bottom: 5 },titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },source:dataAdapterDel,
categoryAxis:
{dataField: 'MessageID',showGridLines: true,
},
colorScheme: 'scheme10',seriesGroups:
[
{type: 'stackedcolumn',// showLabels: true,
//symbolType:'circle',columnGapsPercent: 40,
valueAxis:
{unitInterval: 10000,
minValue: 0,
maxValue: 500000,
displayValueAxis: true,
description: 'Numbers of emails',//descriptionClass: 'css-class-name',},
series: [
{ dataField: 'Quantity', displayText: 'Quantity' },{ dataField:'Processed', displayText:'Processed'},{ dataField:'Delivered', displayText: 'Delivered'},{ dataField:'Bounced', displayText: 'Bounced'},{ dataField:'Open', displayText:'Open'},{ dataField:'Clicks', displayText:'Clicks'}]
}
]
};
// prepare jqxChart settings
settings2 = {title: "finished Campaigns Stats",showLegend: true,
padding: { left: 5, top: 5, right: 5, bottom: 5 },titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },source: dataAdapterFin,
categoryAxis:
{dataField: 'MessageID',showGridLines: true,
},
colorScheme: 'scheme11',seriesGroups:
[
{type: 'stackedcolumn',columnGapsPercent: 50,
valueAxis:
{unitInterval: 20000,
minValue: 0,
maxValue:1000000,
displayValueAxis: true,
description: 'Numbers of emails',//descriptionClass: 'css-class-name',},
series: [
{ dataField: 'Quantity', displayText: 'Quantity' },{ dataField:'Processed', displayText:'Processed'},{ dataField:'Delivered', displayText: 'Delivered'},{ dataField:'Bounced', displayText: 'Bounced'},{ dataField:'Open', displayText:'Open'},{ dataField:'Clicks', displayText:'Clicks'}]
}
]
};
//var source1clone = clone(source1);
// var source2clone = clone(source2);
// set up calendar
$("#jqxcalendar").jqxDateTimeInput({ width: '250px', height: '25px', selectionMode: 'range',formatString: 'MM/dd/yyyy HH:mm' });
$("#jqxDateButton").jqxButton({});$("#jqxDateButton").on('click',function () {
$('#spinner').show();var selection = $('#jqxcalendar').jqxDateTimeInput('getRange');if (selection.from != null) {//alert("HELLO");//gets the dates
var fromDate = (selection.from.getMonth()+1) + '/' + selection.from.getDate() + '/' + selection.from.getFullYear() + ' ' + '00:00:00';var toDate = (selection.from.getMonth()+1) + '/' + selection.to.getDate() + '/' + selection.to.getFullYear() + ' ' + '23:59:59';var data = { "start_date": fromDate, "end_date": toDate };var urldel = 'data.php';var urlfin = 'datafin.php';source1.url = urldel;
source2.url = urlfin;
//injects the to and from date for the request
source1.data = data;
source2.data = data;
//gets the data for the updates
$("#jqxgrid1").jqxGrid({ source: source1 });$("#jqxgrid2").jqxGrid({ source: source2 });//chart data
dataAdapterDel.dataBind();
dataAdapterFin.dataBind();
$('#jqxChartdel').jqxChart({source:dataAdapterDel});$('#jqxChartfin').jqxChart({ source: dataAdapterFin});//processes the requests for the data
}
});
// setup the chart
$('#jqxChartdel').jqxChart(settings1);$('#jqxChartdel').jqxDragDrop();$('#jqxChartfin').jqxChart(settings2);$('#jqxChartfin').jqxDragDrop();//drag and drop
$('#jqxgrid1').jqxDragDrop();$('#jqxgrid2').jqxDragDrop();// $('#jqxRefreshDataButton1').jqxDragDrop();// $('#jqxRefreshDataButton2').jqxDragDrop();// $('#clearfilteringbutton1').jqxDragDrop();//$('#clearfilteringbutton2').jqxDragDrop();//buttons
$('#jqxRefreshDataButton1').jqxButton({ width: '150'});// $('#jqxRefreshDataButton1').bind($('#jqxgrid1').jqxGrid());$('#jqxRefreshDataButton1').on('click', function () {// ('#spinner').show();// source1.replaceWith(source1clone);
source1.url = url1;
dataAdapterDel.dataBind();
$("#jqxgrid1").jqxGrid({ source: source1 });$('#jqxChartdel').jqxChart(settings1);});
$('#jqxRefreshDataButton2').jqxButton({ width: '150'});// $('#jqxRefreshDataButton2').bind($('#jqxgrid2').jqxGrid());$('#jqxRefreshDataButton2').on('click', function () {// ('#spinner').show();// source1.replaceWith(source1clone);
source2.url = url2;
dataAdapterFin.dataBind();
$("#jqxgrid1").jqxGrid({ source: source1 });$('#jqxChartdel').jqxChart(settings1);});
});
</script><style type="text/css">.topcorner {position: absolute;
top: 0;
right: 0;
}
</style></head><body class = 'default'><div id ='content'><div id='jqxcalendar' ></div>
<input type="submit" value="filter" id="jqxDateButton" /></div><div><input class="topcorner" id="logout" type="button" name="logout" value="Logout" onclick="location.href='logout.php';" ></div>
<!--display Grid--><div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;" ><div id='jqxgrid1'></div>
<!-- Refresh data button--><input type = 'button' value='Refresh grid' id='jqxRefreshDataButton1' /><!-- <input type = "button" value="Display Charts" id= "jqxGetChartButton" />--><!-- Delivery Chart--><div id='jqxChartdel' style="width:auto; height:800px; position: relative; left: 0px; top: 0px;"></div>
</div><div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;" ><div id='jqxgrid2'></div>
<input type = "button" value="Refresh grid" id="jqxRefreshDataButton2" /><!-- <input type = "button" value="Display Charts" id = "jqxGetChartButton" /> --><!-- finished Chart--><div id='jqxChartfin' style="width:1650px; height:800px; position: relative; left: 0px; top: 0px;"></div></div><!--<a href="logout.php">Logout</a><br /><br />--></body></html>Maybe when i send the request to get the data from the php script below, is there a way to specify my select statement to get data
<?phpfunction displayResultsDel(){ include_once 'connect.php'; $con = new mysqli($server,$user,$pass,$db_name);if ($con->connect_errno) {echo "Failed to connect to MySQL: (" . $con->connect_errno . ") " . $con->connect_error;} $sql = "SELECT DISTINCT * FROM volomp where status = 'delivering'"; $res = $con->query($sql) or die("SQL Error 1: " . mysqli_error($con)); // $resultFinished = mysqli_query($con,"SELECT * FROM finshed"); while ($row = mysqli_fetch_array($res,MYSQLI_ASSOC)) { $resultsdel[] = array( 'MessageID'=>$row['message_id'], 'Start'=>$row['Start'], 'Status'=>$row['status'], 'Campaign'=>$row['campaign'], 'CampaignID'=>$row['campaign_id'], 'CampaignName'=>$row['campaign_name'], 'Processed'=>$row['processed'], 'Delivered'=>$row['delivered'], 'Bounced'=>$row['bounced'], 'Open'=>$row['open'], 'Clicks'=>$row['clicks']); } header("Content-type: application/json"); echo json_encode($resultsdel,JSON_PRETTY_PRINT); $error = json_last_error(); } displayResultsDel();?><?phpfunction displayResultsFin(){ include_once 'connect.php'; $con = new mysqli($server,$user,$pass,$db_name);if ($con->connect_errno) {echo "Failed to connect to MySQL: (" . $con->connect_errno . ") " . $con->connect_error;} $sql = "SELECT DISTINCT * FROM volomp where status = 'finished'"; $res = $con->query($sql) or die("SQL Error 1: " . mysqli_error($con)); // $resultFinished = mysqli_query($con,"SELECT * FROM finshed"); while ($row = mysqli_fetch_array($res,MYSQLI_ASSOC)) { $resultsfin[] = array( 'MessageID'=>$row['message_id'], 'Start'=>$row['Start'], 'Status'=>$row['status'], 'Campaign'=>$row['campaign'], 'CampaignID'=>$row['campaign_id'], 'CampaignName'=>$row['campaign_name'], 'Processed'=>$row['processed'], 'Delivered'=>$row['delivered'], 'Bounced'=>$row['bounced'], 'Open'=>$row['open'], 'Clicks'=>$row['clicks']); } header("Content-type: application/json"); echo json_encode($resultsfin,JSON_PRETTY_PRINT); $error = json_last_error(); } displayResultsFin();?>Hi iviiguel,
If you want to make just 1 Server Request and you will not do any other requests on Page Change, Filter or Sort Change, my suggestion is to do the following:
1. Create a new jqxDataAdapter instance that will handle your Server Request.
2. Add a loadComplete callback function to that jqxDataAdapter.
3. In the loadComplete, you can get the loaded records using the following code: var records = dataAdapter.records;
4. Create new jqxDataAdapter instances, one for each widget that you plan to use.
5. Each of that jqxDataAdapter instances will be initialized using the dataAdapter.records Array so your widgets will be actually bound to a Local Data Source from their point of view.
6. Initialize the widgets in the loadComplete callback, too.Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comThank you Peter,
could you help me with the logic of the data adapters or point me to an example i’mm getting an error saying that the data adapter is not a constructor data adapter code below
var dataAdapter = new $.jqx.dataAdpater(source1,{ autoBind:true, downloadComplete: function (data, status, xhr) { }, loadComplete: function (data) { }, loadError: function (xhr, status, error) { } }); //data adapter var dataAdapterDel = new $.jqx.dataAdapter(dataAdapter.records,{ autoBind:true, downloadComplete: function (data, status, xhr) { }, loadComplete: function (records) { var records = dataAdapter.records; var length = records.length; for (var i = 0; i< length; i++){ if (records['status']= "delivering"){ var record = records[i] } } dataAdapterDel.records = record }, loadError: function (xhr, status, error) { } }); dataAdapterDel.dataBind(); var dataAdapterFin = new $.jqx.dataAdapter(dataAdapter.records,{ autoBind:true, downloadComplete: function (data, status, xhr) { }, loadComplete: function (records) { var records = dataAdapter.records; var length = records.length; for (var i = 0; i< length; i++){ if (records['status']= "finished"){ var record = records[i] } } dataAdapterFin.records = record; }, loadError: function (xhr, status, error) { } }); dataAdapterFin.dataBind();this is the error i am getting
TypeError: $.jqx.dataAdpater is not a constructorloadError: function (xhr, status, error) { }
this is another way i just though of but still getting same error
source1 ={ datatype: "json", type: "POST", datafields:[ { name: 'MessageID', type: 'int' }, { name: 'Start', type: 'date', cellsformat: 'MM/dd/yyyy HH:mm' }, { name: 'Status', type: 'string' }, { name: 'Campaign', type: 'string' }, { name: 'CampaignID', type: 'int' }, { name: 'CampaignName', type: 'string' }, { name: 'Processed' ,type:'int'}, { name: 'Delivered', type: 'int' }, { name: 'Bounced', type: 'int' }, { name: 'Open', type: 'int' }, { name: 'Clicks', type: 'int' }, ], url: url1 }; /* var source2 = { datatype: "json", type: "POST", datafields: [ { name: 'MessageID', type: 'int' }, { name: 'Start', type: 'date', cellsformat: 'MM/dd/yyyy HH:mm' }, { name: 'Status', type: 'string' }, { name: 'Campaign', type: 'string' }, { name: 'CampaignID', type: 'int' }, { name: 'CampaignName', type: 'string' }, { name: 'Processed' ,type:'int'}, { name: 'Delivered', type: 'int' }, { name: 'Bounced', type: 'int' }, { name: 'Open', type: 'int' }, { name: 'Clicks', type: 'int' }, ], url: url2 };*/ var dataAdapter = new $.jqx.dataAdpater(source1,{ autoBind:true, downloadComplete: function (data, status, xhr){}, loadComplete: function (data){}, loadError: function (xhr, status, error){} }); var records = dataAdapter.records; var length = records.length; for (var i = 0; i< length; i++){ if (records['status']= "delivering"){ var delData = records[i] } else if (records['status']= "finished"){ var finData = records[i] } }; var sourceDel = { datatype: "array", datafields: [ { name: 'MessageID', type: 'int' }, { name: 'Start', type: 'date', cellsformat: 'MM/dd/yyyy HH:mm' }, { name: 'Status', type: 'string' }, { name: 'Campaign', type: 'string' }, { name: 'CampaignID', type: 'int' }, { name: 'CampaignName', type: 'string' }, { name: 'Processed' ,type:'int'}, { name: 'Delivered', type: 'int' }, { name: 'Bounced', type: 'int' }, { name: 'Open', type: 'int' }, { name: 'Clicks', type: 'int' }, ], localData: delData }; var sourceFin = { datatype: "array", datafields: [ { name: 'MessageID', type: 'int' }, { name: 'Start', type: 'date', cellsformat: 'MM/dd/yyyy HH:mm' }, { name: 'Status', type: 'string' }, { name: 'Campaign', type: 'string' }, { name: 'CampaignID', type: 'int' }, { name: 'CampaignName', type: 'string' }, { name: 'Processed' ,type:'int'}, { name: 'Delivered', type: 'int' }, { name: 'Bounced', type: 'int' }, { name: 'Open', type: 'int' }, { name: 'Clicks', type: 'int' }, ], localData: finData }; //data adapter var dataAdapterDel = new $.jqx.dataAdapter(sourceDel,{ autoBind:true, downloadComplete: function (data, status, xhr) {}, loadComplete: function (data) { }, loadError: function (xhr, status, error) {} }); var dataAdapterFin = new $.jqx.dataAdapter(sourceFin,{ autoBind:true, downloadComplete: function (data, status, xhr) {}, loadComplete: function (data) {}, loadError: function (xhr, status, error) {} });Hi,
Please, look at the sample below which populates 2 Grids and 1 Chart making only 1 server call.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>This example shows how to create a Grid from JSON data.</title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.10.2.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/jqxmenu.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script> <script type="text/javascript" src="../../scripts/gettheme.js"></script> <script type="text/javascript"> $(document).ready(function () { var theme = getDemoTheme(); var url = "../sampledata/beverages.txt"; // prepare the data var source = { datatype: "json", datafields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: url }; var dataAdapter = new $.jqx.dataAdapter(source, { loadComplete: function () { var getSource = function () { var data = dataAdapter.records; var newSource = { datatype: "json", datafields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', localdata: data }; var newAdapter = new $.jqx.dataAdapter(newSource); return newAdapter; } // Create New Grid $("#jqxgrid2").jqxGrid( { width: 670, source: getSource(), theme: theme, columnsresize: true, columns: [ { text: 'Name', datafield: 'name', width: 250 }, { text: 'Beverage Type', datafield: 'type', width: 250 }, { text: 'Calories', datafield: 'calories', width: 180 }, { text: 'Total Fat', datafield: 'totalfat', width: 120 }, { text: 'Protein', datafield: 'protein', minwidth: 120 } ] }); // Create Chart // prepare jqxChart settings var settings = { 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: getSource(), colorScheme: 'scheme02', seriesGroups: [ { type: 'pie', showLabels: true, series: [ { dataField: 'calories', displayText: 'name', labelRadius: 100, initialAngle: 15, radius: 200, centerOffset: 0 } ] } ] }; $('#jqxChart').jqxChart(settings); } } ); $("#jqxgrid").jqxGrid( { width: 670, source: dataAdapter, theme: theme, columnsresize: true, columns: [ { text: 'Name', datafield: 'name', width: 250 }, { text: 'Beverage Type', datafield: 'type', width: 250 }, { text: 'Calories', datafield: 'calories', width: 180 }, { text: 'Total Fat', datafield: 'totalfat', width: 120 }, { text: 'Protein', datafield: 'protein', minwidth: 120 } ] }); }); </script></head><body class='default'> <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;"> <div id="jqxgrid"></div> <div id="jqxgrid2"></div> <div id='jqxChart' style="width: 680px; height: 400px; position: relative; left: 0px; top: 0px;"> </div> </div></body></html>
Hope this helps.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/thank you Peter,
but how do i specify the data to display in each grid with your example. what i am trying to do is parse through the json request and assigned the data to their respective grid/ chart based on the status of the record ie, if status = delivering then it should go to the delivering grid(jqxgrid1, jqxchart1) and if the record status = finished that record to go to the finished grid/chart (jqxGrid2,jqxchart2)
this is what i have came up with. i’m trying to separate the data coming from the json assigning it to a variable and i created two other source with localdata using the variables i assigned the records to, but for some reason the records are empty
var source ={ datatype: 'json', type: "POST", datafields:[ { name: 'MessageID', type: 'int' }, { name: 'Start', type: 'date', cellsformat: 'MM/dd/yyyy HH:mm' }, { name: 'Status', type: 'string' }, { name: 'Campaign', type: 'string' }, { name: 'CampaignID', type: 'int' }, { name: 'CampaignName', type: 'string' }, { name: 'Processed' ,type:'int'}, { name: 'Delivered', type: 'int' }, { name: 'Bounced', type: 'int' }, { name: 'Open', type: 'int' }, { name: 'Clicks', type: 'int' }, ], url: url1 }; /* var source2 = { datatype: "json", type: "POST", datafields: [ { name: 'MessageID', type: 'int' }, { name: 'Start', type: 'date', cellsformat: 'MM/dd/yyyy HH:mm' }, { name: 'Status', type: 'string' }, { name: 'Campaign', type: 'string' }, { name: 'CampaignID', type: 'int' }, { name: 'CampaignName', type: 'string' }, { name: 'Processed' ,type:'int'}, { name: 'Delivered', type: 'int' }, { name: 'Bounced', type: 'int' }, { name: 'Open', type: 'int' }, { name: 'Clicks', type: 'int' }, ], url: url2 };*/ var dataAdapter = new $.jqx.dataAdapter(source,{ autoBind:true, downloadComplete: function (data, status, xhr){}, loadComplete: function (data){}, loadError: function (xhr, status, error){}, }); var records = dataAdapter.records; var length = records.length; /*for (var i = 0; i< length; i++){ if (records['status']= "delivering"){ var delData = records[i] } else if (records['status']= "finished"){ var finData = records[i] } };*/ var dataDel = function (){ for (var i = 0; i< length; i++ ){ if (records['status']== "delivering"){ delData = records[i] }}}; var dataFin = function (){ for (var i = 0; i< length; i++){ if (records['status']== "finished"){ finData = records[i] }}}; var sourceDel = { datatype: "json", datafields: [ { name: 'MessageID', type: 'int' }, { name: 'Start', type: 'date', cellsformat: 'MM/dd/yyyy HH:mm' }, { name: 'Status', type: 'string' }, { name: 'Campaign', type: 'string' }, { name: 'CampaignID', type: 'int' }, { name: 'CampaignName', type: 'string' }, { name: 'Processed' ,type:'int'}, { name: 'Delivered', type: 'int' }, { name: 'Bounced', type: 'int' }, { name: 'Open', type: 'int' }, { name: 'Clicks', type: 'int' }, ], localData: dataDel }; var sourceFin = { datatype: "json", datafields: [ { name: 'MessageID', type: 'int' }, { name: 'Start', type: 'date', cellsformat: 'MM/dd/yyyy HH:mm' }, { name: 'Status', type: 'string' }, { name: 'Campaign', type: 'string' }, { name: 'CampaignID', type: 'int' }, { name: 'CampaignName', type: 'string' }, { name: 'Processed' ,type:'int'}, { name: 'Delivered', type: 'int' }, { name: 'Bounced', type: 'int' }, { name: 'Open', type: 'int' }, { name: 'Clicks', type: 'int' }, ], localdata:dataFin }; //data adapter var dataAdapterDel = new $.jqx.dataAdapter(sourceDel); //dataAdapterDel.dataBind(); var dataAdapterFin = new $.jqx.dataAdapter(sourceFin);Peter
i yused your example but i am having problems binding to the grid when i debug(using firebug) all the records are there but when i finish stepping through the code nothing shows up in the grid
var record= []; var dataAdapter = new $.jqx.dataAdapter(source,{ autoBind:true, downloadComplete: function (data, status, xhr){}, loadComplete: function (records) { var getSource = function () { var records = dataAdapter.records; var length = records.length; for (var i = 0; i<length;i++) { for(key in records[i]) { if (records[i][key] == "delivering") { record.push(records[i]); }; } } var sourceDel = { datatype: "json", datafields: [ { name: 'MessageID', type: 'int' }, { name: 'Start', type: 'date', cellsformat: 'MM/dd/yyyy HH:mm' }, { name: 'Status', type: 'string' }, { name: 'Campaign', type: 'string' }, { name: 'CampaignID', type: 'int' }, { name: 'CampaignName', type: 'string' }, { name: 'Processed' ,type:'int'}, { name: 'Delivered', type: 'int' }, { name: 'Bounced', type: 'int' }, { name: 'Open', type: 'int' }, { name: 'Clicks', type: 'int' }, ], localData: record }; var dataAdapterDel = new $.jqx.dataAdapter(sourceDel, { autoBind:true }); return dataAdapterDel }; $("#jqxgrid1").jqxGrid({ width: 1400, source: getSource(), //theme: "jqx.ui-darkness", selectionmode: 'multiplerowsextended', //showfilterrow: true, filterable: true, sortable: true, pageable: true, autoheight: true, columnsresize: true, autoshowfiltericon: true, columns: [ {text: 'Status', datafield: 'Status', width: 100 }, { text: 'Date', datafield: 'Start', filtertype: 'date', width: 150, cellsformat: 'MM/dd/yyyy HH:mm' }, { text: 'Message ID', datafield: 'MessageID', width: 150, filtertype: 'number' }, { text: 'Campaign', datafield: 'Campaign', width: 250, filtertype: 'textbox' }, { text: 'Campaign ID', datafield: 'CampaignID', width: 100, filtertype: 'number'}, { text: 'Campaign Name', datafield: 'CampaignName', width: 250, filtertype: 'textbox' }, { text: 'Processed', datafield: 'Processed', width: 75, filtertype: 'number'}, { text: 'Delivered', datafield: 'Delivered', width: 75, filtertype: 'number'}, { text: 'Bounced', datafield: 'Bounced', width: 75, filtertype: 'number'}, { text: 'Open', datafield: 'Open', width: 75, filtertype: 'number'}, { text: 'Clicks', datafield: 'Clicks', width: 100, filtertype: 'number' } ] }); } });Also here is what the json looks like this is a small excert of the json
[ { "MessageID": "283306", "Start": "2013-08-01 04:00:00", "Status": "finished", "Campaign": "ADK_HOT_OP", "CampaignID": "2282 ", "CampaignName": " Minnesota Internship", "Processed": "71752", "Delivered": "46413", "Bounced": "25339", "Open": "1321", "Clicks": "12" }, { "MessageID": "284306", "Start": "2013-08-01 04:10:00", "Status": "finished", "Campaign": "ADK_HOT_OP", "CampaignID": "2282 ", "CampaignName": " Minnesota Internship", "Processed": "71751", "Delivered": "46839", "Bounced": "24912", "Open": "1306", "Clicks": "17" }, { "MessageID": "1238306", "Start": "2013-08-19 10:35:00", "Status": "delivering", "Campaign": "2467 - Dutchess Chrysler Dodge Jeep", "CampaignID": "2467 ", "CampaignName": " Dutchess Chrysler Dodge Jeep", "Processed": "1398", "Delivered": "819", "Bounced": "579", "Open": "0", "Clicks": "0" }]i created the new source and grid within the data adapter like you shown me in the example, but it seems the data is not binding to the grid. please advise.
thank you
-
AuthorPosts
Viewing 9 posts - 1 through 9 (of 9 total)
You must be logged in to reply to this topic.