I am using Pivot.js library/tool here. I am trying to load dynamic PIVOT table by taking parameters from the server. I am facing problem in PIVOT() method in second parameter which is optionsObj. When I pass static string to that parameter PIVOT grid is loading as expected but when I am passing it dynamically from the server PIVOT grid is not loading as per expectation.
PIVOT() method expects second parameter as an OBJECT.
NOTE : I hae tried JSON.stringify JSON.PARSE already. Response from the asynchronous call is coming properly from the method. I have debug the code.
<div>
<script>
var Json_ConfigData = new Object();
$.ajax({
url: "Handlers/GET_Pivot_Config.ashx",
contentType: "application/text",
dataType: "text",
success: OnCompleteConfig,
error: OnFailConfig,
});
function OnCompleteConfig(data) {
Json_ConfigData = data;
}
function OnFailConfig(data) {
alert('FAil');
}
$.ajax({
url: "Handlers/GET_pivotDataSet.ashx",
contentType: "",
dataType: "json",
success: OnComplete,
error: OnFail,
});
function OnComplete(data) {
var JsonDataSet = data;
alert("CD : " + Json_ConfigData);
var utils = $.pivotUtilities;
var heatmap = utils.renderers["Heatmap"];
var SumasFractionofColumns = utils.aggregators["Sum as Fraction of Columns"];
var SumoverSum = utils.aggregators["Sum over Sum"];
var optionsObj = JSON.stringify(Json_ConfigData);
$("#output2").pivot(data,
optionsObj // { rows: ['MATERIAL_TYPE'] , cols: ['LOCATION_DESC'] , aggregator: SumasFractionofColumns(['WAITING_TIME']) , renderer: heatmap }
);
}
function OnFail(data) {
alert('Failed :- ' + data);
}
</script>
<div id="output2" runat="server" style="margin: 30px;"></div>
</div>