jQWidgets Forums

jQuery UI Widgets Forums Chart Can data from json be filter for charts??

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 11 years, 7 months ago.

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

  • Miguel
    Member

    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});

    // –>

    <!– –>

    <!– –>


    Dimitar
    Participant

    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/

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

You must be logged in to reply to this topic.