Jqwidget stacked chart before processing

[arunthathamParticipant]

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

}

[arunthathamParticipant]

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’

[DimitarParticipant]

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/

[arunthathamParticipant]

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’)

[arunthathamParticipant]

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 StoevKeymaster]

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/

[Author]

Posts