jQuery UI Widgets Forums Chart Jqwidget stacked chart before processing

This topic contains 5 replies, has 3 voices, and was last updated by  Peter Stoev 9 years, 4 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • Jqwidget stacked chart before processing #65189

    arunthatham
    Participant

    We have implemented the Jqwidget stacked chart in which before binding the data to the chart we need to set the min and max,unit dynamically every time from server side.The below function is called as below:
    else if ($href === “details-chart-view”) {

    if ($(‘#chart-data’).children().is(‘#tblChart’)) {

    $.x.y.chart.dataAdapter.dataBind();
    $(‘#chart-data’).jqxChart(‘refresh’);
    } else {

    $(‘#details-chart-view’).html(‘<div id=”chart-data” style=”height: 400px;”></div>’);
    $.when($.x.y.chart.load()).then(function() {
    $(‘#chart-data’).jqxChart({ height: $.x.y.calculateGridHeight() });
    });
    }
    }
    How can we achieve it?
    I added before processing but on initial load it is not going there only on update it goes to before processing.

    $.x.y.chart.load = function () {
    // prepare chart data as an array
    var sampleData = [
    { Day: ’12/12/2014′, RunTime: 12, IdleTime: 12},
    { Day: ’13/12/2014′, RunTime: 8.5, IdleTime: 15.5 },
    { Day: ’14/12/2014′, RunTime: 4, IdleTime: 20 },
    { Day: ’15/12/2014′, RunTime: 12, IdleTime: 12 },
    { Day: ’16/12/2014′, RunTime: 20, IdleTime: 4 },
    { Day: ’17/12/2014′, RunTime: 24, IdleTime: 0 },
    { Day: ’18/12/2014′, RunTime: 0, IdleTime: 24 }
    ];
    var source = {
    type: ‘POST’,
    datatype: ‘json’,
    datafields: [{
    name: ‘RunTime’

    }, {
    name: ‘IdleTime’

    }, {
    name: ‘Day’

    }],
    url: ‘../AssetDetail/GetAssetChartViewData’, root: ‘Rows’

    beforeprocessing: function (data) {
    this before processing is get hitten only after data gets binded using setting .

    }
    };
    var dataAdapter = $.x.y.chart.dataAdapter = new $.jqx.dataAdapter(source, {
    contentType: “application/json”,
    formatData: function (data) {
    IsValidSession();
    var fromdt;
    if (Date.today().is().sunday()) {
    fromdt = Date.today().toString(‘MM/dd/yyyy’);
    } else {
    fromdt = Date.today().last().sunday().toString(‘MM/dd/yyyy’);
    }
    var todt = Date.today().toString(‘MM/dd/yyyy’);

    var fromdate = $(‘#asset-fromdt’).val() || fromdt;
    var todate = $(‘#asset-todt’).val() || todt;
    // var filtervaluesstring = JSON.stringify(data);
    $.extend(data, {
    “fromdate”: fromdate,
    “toDate”: todate,
    filtervalues: null
    });
    return JSON.stringify(data);
    }
    });

    // prepare jqxChart settings
    var settings = {
    title: “Score Card”,
    description: “Hours Calculation”,
    enableAnimations: true,
    showLegend: true,
    padding: { left: 5, top: 5, right: 5, bottom: 5 },
    titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
    source: dataAdapter,

    xAxis:
    {
    dataField: ‘Day’,
    showTickMarks: true,
    tickMarksInterval: 1,
    tickMarksColor: ‘#888888’,
    unitInterval: 1,
    showGridLines: false,
    gridLinesInterval: 1,
    gridLinesColor: ‘#888888’,
    axisSize: ‘auto’
    },
    colorScheme: ‘scheme06’,
    seriesGroups:
    [
    {
    type: ‘stackedcolumn’,
    columnsGapPercent: 12,
    seriesGapPercent: 0,
    valueAxis:
    {
    unitInterval: 2,
    minValue: 0,
    maxValue: 24,
    displayValueAxis: true,
    description: ‘Time in Hours’,
    tickMarksColor: ‘#888888’
    },
    series: [
    { dataField: ‘RunTime’, displayText: ‘Run Time’ },
    { dataField: ‘IdleTime’, displayText: ‘ Idle Time’ }
    ]
    }
    ]
    };
    // setup the chart
    $(‘#chart-data’).jqxChart(settings);

    }

    • This topic was modified 9 years, 4 months ago by  arunthatham.
    Jqwidget stacked chart before processing #65195

    arunthatham
    Participant

    my idea is in before processing i will take var maxvalue =data.maxval(data from server).and in settings will set like
    unitInterval: 2,
    minValue: 0,
    maxValue: maxvalue,
    displayValueAxis: true,
    description: ‘Time in Hours’,
    tickMarksColor: ‘#888888’

    Jqwidget stacked chart before processing #65198

    Dimitar
    Participant

    Hello arunthatham,

    You can set the variable in the data adapter’s downloadComplete callback function, e.g.:

    var maxvalue;
    var dataAdapter = new $.jqx.dataAdapter(source, {
        downloadComplete: function (edata, textStatus, jqXHR) {
            maxvalue = edata.maxval;
        }
    });
    ...
    unitInterval: 2,
    minValue: 0,
    maxValue: maxvalue,
    displayValueAxis: true,
    description: ‘Time in Hours’,
    tickMarksColor: ‘#888888′

    Best Regards,
    Dimitar

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

    Jqwidget stacked chart before processing #65199

    arunthatham
    Participant

    NO It didnt work in updating the grid work it comes to data adapter then to download complete and then to load complete but not going to settings.

    It is not working apart from that what can be used to update a chart with new set of data from server whether $(‘#chart-data’).jqxChart(‘refresh’) or $(‘#chart-data’).jqxChart(‘update’)

    • This reply was modified 9 years, 4 months ago by  arunthatham.
    • This reply was modified 9 years, 4 months ago by  arunthatham.

    arunthatham
    Participant

    IN CASE OF JQGRID WE WILL CALL UPDATEDATABOUND TO REFRESH GRID FROM NEW SET OF DATA FROM SERVER SIDE AND IF WE NEED TO MODIFY ANY DATA BEFORE BINDING TO GRID WE WILL WRITE IN beforeprocessing: function (data) {} IT WILL WORK AS EXPECTED .
    iNCASE OF CHART WHETHER TO USE $(‘#chart-data’).jqxChart(‘refresh’) or $(‘#chart-data’).jqxChart(‘update’) TO UPDATE CHART WITH NEW SET OF DATA FROM SERVER SIDE AND ALSO WHERE WE NEED TO WRITE IF WE NEED TO DO ANY MANIPULATION LIKE SETTING MAX AND MIN BEFORE PROCESSING THE DATA TO CHART.

    ON FIRST POST I HAVE GIVEN THE FULL CODE WHAT I HAVE IMPLEMENTED,GET ME A SOLUTION AS SOON AS POSSIBLE.


    Peter Stoev
    Keymaster

    Hello arunthatham,

    Please, look at: http://www.jqwidgets.com/community/topic/welcome-to-jqwidgets-forum-2/ and especially the following:

    Please keep the following Forum rules in mind when posting to the jQWidgets forums:

    – Direct your comments or questions to a relevant forum. We have many individual forums and it’s important that you post your question to the correct forum so you receive the most appropriate feedback.
    – Do not cross post.
    – Be respectful and courteous to other users.
    – Communicate with everyone in a professional manner.
    – Do not mention other product vendors. If you have issues with other vendors, contact them directly.

    Regarding your question:

    To request new data from dataAdapter, you should call the dataAdapter’s dataBind() method or create a new dataAdapter and set the widget’s source property to the new dataAdapter instance or look at the Chart’s Live Updates demos which demonstrate the process.

    Best Regards,
    Peter Stoev

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

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

You must be logged in to reply to this topic.