Can data from json be filter for charts??

[MiguelMember]

hi i am creating two charts, i want the charts to show only the data for their respective grid, i am sending 1 json request to create both grids, and charts. i haven’t been able to figure it out any help would be great thak you code below.

Displays finished and delivered campaigns from Volomp.

$(document).ready(function() {

function getObjects(obj, key, val) {
var objects = [];
for (var i in obj) {
if (!obj.hasOwnProperty(i)) continue;
if (typeof obj[i] == ‘object’) {
objects : objects.concat(getObjects(obj[i], key, val));
} else if (i == key && obj[key] == val) {
objects.push(obj);
}
}
return objects;
};

var url= “ServiceCallVolomp.php”;
//prepare data
var source ={
datatype: “json”,
datafields:[
{ name:’MessageID’},
{ name:’Status’},
{ name:’Campaign’},
{ name:’CampaignID’},
{ name:’CampaignName’},
{ name:’Processed’},
{ name:’Delivered’},
{ name:’Bounced’},
{ name:’Open’},
{ name:’Clicks’},],
url: url
};
//add filter for delivering grid
var addfilter1 = function () {
var filtergroup1 = new $.jqx.filter();
var filter_or_operator = 1;
var filtervalue1 = ‘delivering’;
var filtercondition = ‘contains’;
var filter1 = filtergroup.createfilter(‘stringfilter’, filtervalue1, filtercondition);
filtergroup1.addfilter(filter_or_operator, filter1);
$(“#jqxgrid1”).jqxGrid(‘addfilter1’, ‘Status’, filtergroup1);
$(“#jqxgrid1”).jqxGrid(‘applyfilters’);

};
//add filter for finished grid
var addfilter2 = function () {
var filtergroup2 = new $.jqx.filter();
var filter_or_operator = 1;
var filtervalue2 = ‘finished’;
var filtercondition = ‘contains’;
var filter2 = filtergroup.createfilter(‘stringfilter’ ,filtervalue2, filtercondition);
filtergroup2.addfilter(filter_or_operator,filter2);
$(“#jqxgrid2”).jqxGrid(‘addfilter2′,’Status’,filtergroup2);
$(“#jqxgrid2”).jqxGrid(‘applyfilters’);

}
//data adapte;r
var dataAdapter = new $.jqx.dataAdapter(source,{
autoBind:true,
downloadComplete: function(data,status,xhr){},
loadComplete: function(data){},
loadError: function(xhr,status,error){}
});
//initialize jqxgrid
$(“#jqxgrid1”).jqxGrid(
{
width: 1250,
source: dataAdapter,
selectionmode: ‘multiplerowsextended’,
filterable: true,
sortable: true,
pageable: true,
autoheight: true,
columnsresize: true,
ready: function () {
addfilter1();
},
autoshowfiltericon: true,
columns: [
{ text: ‘Status’, datafield:’Status’, width:100},
{ text: ‘Message ID’,datafield:’MessageID’, width:150},
{ text: ‘Campaign’,datafield:’Campaign’, width:250},
{ text: ‘Campaign ID’,datafield:’CampaignID’, width:100},
{ text: ‘Campaign Name’,datafield:’CampaignName’, width:250},
{ text: ‘Processed’, datafield:’Processed’, width:75},
{ text: ‘Delivered’,datafield:’Delivered’, width:75},
{ text: ‘Bounced’,datafield:’Bounced’, width:75},
{ text: ‘Open’,datafield:’Open’, width:75},
{ text: ‘Clicks’,datafield:’Clicks’, width:100}
]
});
$(“#jqxgrid2”).jqxGrid(
{
width: 1250,
source: dataAdapter,
selectionmode: ‘multiplerowsextended’,
filterable: true,
sortable: true,
pageable: true,
autoheight: true,
columnsresize: true,
ready: function () {
addfilter2();
},
autoshowfiltericon: true,
columns: [
{ text: ‘Status’, datafield:’Status’, width:100},
{ text: ‘Message ID’,datafield:’MessageID’, width:150},
{ text: ‘Campaign’,datafield:’Campaign’, width:250},
{ text: ‘Campaign ID’,datafield:’CampaignID’, width:100},
{ text: ‘Campaign Name’,datafield:’CampaignName’, width:250},
{ text: ‘Processed’, datafield:’Processed’, width:75},
{ text: ‘Delivered’,datafield:’Delivered’, width:75},
{ text: ‘Bounced’,datafield:’Bounced’, width:75},
{ text: ‘Open’,datafield:’Open’, width:75},
{ text: ‘Clicks’,datafield:’Clicks’, width:100}
]
});

$(“#jqxcalendar”).jqxCalendar({ width: ‘250px’, height: ‘250px’ });
$(‘#jqxcalendar’).bind(‘valuechanged’, function (event) {
var date = event.args.date;
$(“#log”).text(date.toDateString());
});

// prepare jqxChart settings

var 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: dataAdapter,
categoryAxis:
{
dataField: ‘messageID’,
showGridLines: true,

},
colorScheme: ‘scheme01’,
seriesGroups:
[
{
type: ‘stackedcolumn’,

columnGapsPercent: 50,
valueAxis:
{
unitInterval: 5000,
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

var 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: dataAdapter,
categoryAxis:
{
dataField: ‘MessageID’,
showGridLines: true,

},
colorScheme: ‘scheme01’,
seriesGroups:
[
{
type: ‘stackedcolumn’,

columnGapsPercent: 50,
valueAxis:
{
unitInterval: 5000,
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’}
]
}
]
};
// setup the chart
$(‘#jqxChartdel’).jqxChart(settings1);
$(‘#jqxChartfin’).jqxChart(settings2);

$(‘#jqxRefreshDataButton1’).jqxButton({ width: ‘150’ });
$(“#jqxRefreshDataButton1”).click( function(){source.localdata = url;
$(“#jqxgrid1”).jqxGrid(‘updatebounddata’, ‘cells’)});
$(“#jqxRefreshDataButton2”).jqxButton({width: ‘150’});
$(“#jqxRefreshDataButton2”).click( function(){source.localdata = url;
$(“#jqxgrid2”).jqxGrid(‘updatebounddata’, ‘cells’)
});

});

<!–
// create button widgets

//$(“#jqxGetChartButton”).jqxButton({width: ‘150’});
//$(“#jqxRefreshDataButton”).jqxButton({width: ‘150’});
//$(“#jqxGetChartButton”).on(‘click’,function(){ jqxChart(settings)});
// $(“#jqxGetChartButton”).on(‘click’,function(){ source});

// –>

<!– –>

<!– –>

[DimitarParticipant]

Hello iviiguel,

As I understand it, you need to create two distinct charts, each with a source – a portion of the same file. If this is the case, I am afraid, it cannot be achieved. If not, please provide us with your entire source code, including the HTML and the JSON source. Remember to format your code as explained in the forum topic Code Formatting.

Best Regards,
Dimitar

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

[Author]

Posts