e.preventdefault puts my Kendo Grid in an infinite loop - kendo-grid

I set a button .onclick to be false and I get the false value in my PHP program:
$confirm = (isset($_GET['confirm']) ? $_GET['confirm'] : '');
I set the variable confirm in my script to the PHP value. In the Kendo dataBinding I check if confirm is false, execute e.preventDefault(). While e.preventDefault() is executing, it appears that the Kendo Grid is trying to be rebuilt and gets in an infinite loop. Please advise.
var sharedDataSource = new kendo.data.DataSource({
transport: {
read: {
url: 'PM_PipeMachineDelay.php?mode=DisplayAll',
dataType: 'json'
}
},
serverFiltering: true
});
$(document).ready(function(){
$("#grid").kendoGrid({
dataSource: sharedDataSource,
dataBound: onDataBound,
height: 700,
sortable: true,
resizeable: true,
selectable: 'row',
dataBinding: function(e) {
if (confirm == "false") {
e.preventDefault();
}
},
change: function(e) {
var gview = $("#grid").data("kendoGrid");
var selectedItem = gview.dataItem(gview.select());
window.location.href = 'PM_PipeMachineDelay.php?mode=Display' +
'&DSTNNO=' + selectedItem.DSTNNO +
'&DSTNID=' + selectedItem.DSTNID +
'&DPRDTE=' + selectedItem.DPRDTE +
'&DPRSHF=' + selectedItem.DPRSHF +
'&DDCATG=' + selectedItem.DDCATG +
'&DDTYPE=' + selectedItem.DDTYPE +
'&DSTTME=' + selectedItem.DSTTME +
'&DSPTME=' + selectedItem.DSPTME +
'&DDTIME=' + selectedItem.DDTIME +
'&DOPRNO=' + selectedItem.DOPRNO +
'&DINV=' + selectedItem.DINV +
'&OSTTME=' + selectedItem.DSTTME +
'&SecLevel=' + selectedItem.SecLevel;
},
filterable: {mode: "row"}, // this seems to make the complete row filterable
/* remember this filter is for the client only; it doesn't go back to the server*/
columns:[
{hidden: true, field: "SecLevel"},
{hidden: true, field: "OSTTME"},
{title:"Station No", field:"DSTNNO", headerFilter:"input"},
{title:"Station ID", field:"DSTNID", headerFilter:"input"},
{title:"Station Description", field:"DSTNDSC", headerFilter:"input"},
{title:"Production Date", field:"DPRDTE", headerFilter:"input"},
{title:"Production Shift", field:"DPRSHF", headerFilter:"input"},
{title:"Delay Category", field:"DDCATG", headerFilter:"input"},
{title:"Delay Type", field:"DDTYPE", headerFilter:"input"},
{title:"Start Time", field:"DSTTME", headerFilter:"input"},
{title:"Stop Time", field:"DSPTME", headerFilter:"input"},
{title:"Delay Time", field:"DDTIME", headerFilter:"input"},
{title:"Operator", field:"DOPRNO", headerFilter:"input"},
{title:"Inventory #", field:"DINV", headerFilter:"input"},
],
});
});```

Related

Inject html into ng2-chart tooltip to preview image

I have images with scores associated with them streaming to my app. As the scores come in I've plotted them on a line chart using ng2-charts.
I want to customize the tooltip on the chart to display a smaller preview of the image that it came with. I've scoured around but haven't been able to figure out how to inject the custom html into the tooltip or if it is even possible without creating a custom chart.
Any advice on whether or not this is possible and how would be greatly appreciated.
This is in Ionic 4 with angular 6 and my modules versions are:
"ng2-charts": "^2.2.2",
"chart.js": "^2.8.0",
Not sure this is necessary for my question but here's how I set up the chart so far.
Markdown
<ion-content padding>
<div class="row" style="display: block;">
<div class="col-md-6">
<div style="display: block;">
<canvas baseChart width="1200" height="600"
[datasets]="lineChartData"
[labels]="lineChartLabels"
[options]="lineChartOptions"
[colors]="lineChartColors"
[legend]="lineChartLegend"
[chartType]="lineChartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div>
</div>
</div>
</ion-content>
Initializing the chart
// Initializing Chart settings
public lineChartLegend:boolean = true;
public lineChartType:string = 'line';
public lineChartData:ChartDataSets[] = [{ data: this.scoreArr, label: 'Image Scores' }];
public lineChartLabels:Label[] = [];
public lineChartOptions: (ChartOptions & { annotation: any }) = {
responsive: true,
scales: {
// We use this empty structure as a placeholder for dynamic theming.
xAxes: [{}],
yAxes: [
{
id: 'y-axis-0',
position: 'left',
}
]
},
annotation: {
annotations: [
{
type: 'line',
mode: 'vertical',
scaleID: 'x-axis-0',
value: 'March',
borderColor: 'orange',
borderWidth: 2,
label: {
enabled: true,
fontColor: 'orange',
content: 'LineAnno'
}
},
],
}
};
public lineChartColors:Color[] = [
{ // dark grey
backgroundColor: 'rgba(77,83,96,0.2)',
borderColor: 'rgba(77,83,96,1)',
pointBackgroundColor: 'rgba(77,83,96,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(77,83,96,1)'
}
];
To anyone who is curious. This is how. However, the tooltip doesn't go away when you stop hovering but I'll figure it out in a bit.
customTooltips = function(tooltip) {
//**************** This is what was messing me up
var tooltipEl = document.getElementById('chartjs-tooltipsdfljsdflkswdjf');
// Apparently grabbing my existing tooltipel was causing my issue
// if you make tooltipel null and just make your own following the
// chart.js docs this will work fine.
// ***************
if (!tooltipEl) {
console.log("tooltipel was null");
tooltipEl = document.createElement('div');
tooltipEl.id = 'chartjs-tooltip';
tooltipEl.innerHTML = "<table></table>"
document.body.appendChild(tooltipEl);
}
// Hide if no tooltip
if (tooltip.opacity === 0) {
tooltipEl.style.opacity = '0';
return;
}
tooltipEl.classList.remove('above','below','no-transform');
if (tooltip.yAlign) {
tooltipEl.classList.add(tooltip.yAlign);
} else {
tooltipEl.classList.add('no-transform');
}
function getBody(bodyItem) {
return bodyItem.lines;
}
// Set Text
if (tooltip.body) {
console.log("Bodys not null: ", tooltip.body);
var titleLines = tooltip.title || [];
var bodyLines = tooltip.body.map(getBody);
var innerHtml = '<thead>';
titleLines.forEach(function(title) {
innerHtml += '<tr><th>' + title + '</th></tr>';
innerHtml += '<tr><th><img src="https://www.mariowiki.com/images/thumb/2/2b/Marioptds.png/146px-Marioptds.png" style="width:42px;height:42px;border:0;"/></th></tr>';
});
innerHtml += '</thead><tbody>';
bodyLines.forEach(function(body, i) {
var colors = tooltip.labelColors[i];
var style = 'background:' + colors.backgroundColor;
style += '; border-color:' + colors.borderColor;
style += '; border-width: 2px';
var span = '<span class="chartjs-tooltip-key" style="' + style + '"></span>';
innerHtml += '<tr><td>' + span + body + '</td></tr>';
});
innerHtml += '</tbody>';
var tableRoot = tooltipEl.querySelector('table');
console.log('TableRoot: ' + tableRoot);
tableRoot.innerHTML = innerHtml;
}
// `this` will be the overall tooltip
var position = this._chart.canvas.getBoundingClientRect();
// Display, position, and set styles for font
tooltipEl.style.opacity = '1';
tooltipEl.style.position = 'absolute';
tooltipEl.style.left = position.left + window.pageXOffset + tooltip.caretX + 'px';
tooltipEl.style.top = position.top + window.pageYOffset + tooltip.caretY + 'px';
tooltipEl.style.fontFamily = tooltip._bodyFontFamily;
tooltipEl.style.fontSize = tooltip.bodyFontSize + 'px';
tooltipEl.style.fontStyle = tooltip._bodyFontStyle;
tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
tooltipEl.style.pointerEvents = 'none';
};
// Initializing Chart settings
public lineChartLegend:boolean = true;
public lineChartType:string = 'line';
public lineChartData:ChartDataSets[] = [{ data: this.scoreArr, label: 'Image Scores' }];
public lineChartLabels:Label[] = [];
public lineChartOptions: (ChartOptions & { annotation: any }) = {
responsive: true,
scales: {
// We use this empty structure as a placeholder for dynamic theming.
xAxes: [{}],
yAxes: [
{
id: 'y-axis-0',
position: 'left',
}
]
},
annotation: {
annotations: [
{
type: 'line',
mode: 'vertical',
scaleID: 'x-axis-0',
value: 'March',
borderColor: 'orange',
borderWidth: 2,
label: {
enabled: true,
fontColor: 'orange',
content: 'LineAnno'
}
},
],
},
tooltips: {
enabled: false,
mode: 'index',
position: 'nearest',
custom: this.customTooltips
}
};
public lineChartColors:Color[] = [
{ // dark grey
backgroundColor: 'rgba(77,83,96,0.2)',
borderColor: 'rgba(77,83,96,1)',
pointBackgroundColor: 'rgba(77,83,96,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(77,83,96,1)'
}
];

chrome 62, highchart v4.2.5 , Uncaught TypeError: Cannot use 'in' operator to search for '0' in arguments_marker

My web application which is using highchart v4.2.5 runs fine. However,when I update chrome to 62.0.3202.62, It goes wrong. Here is the error message:
highcharts.unminified.js:25 Uncaught TypeError: Cannot use 'in' operator to search for '0' in arguments_marker
at forEach (<anonymous>)
at s (highcharts.unminified.js:25)
at c.drawTrackerGraph [as drawTracker] (highcharts.unminified.js:330)
at c.render (highcharts.unminified.js:271)
at highcharts.unminified.js:232
at Array.forEach (<anonymous>)
at s (highcharts.unminified.js:25)
at C.Chart.renderSeries (highcharts.unminified.js:231)
at C.Chart.render (highcharts.unminified.js:233)
at C.Chart.firstRender (highcharts.unminified.js:236)
Only the data and the chrome version will results in the problem.Data is too big, so I keep it in a txt file.However , I can't upload the txt file, so I just give a sample of the data. My javascript code is as follows:
<div id="perfCPU"></div>
var mydata = [{x: "1509562856000",y: 137.55},{x: "1509562857000",y: 137.67},{x: "1509562858000",y: 137.67},{x: "1509562859000",y: 137.68},{x: "1509562861000",y: 137.83},{x: "1509562862000",y: 137.89}]
specialLine({domId: 'perfCPU', unit: "%", name: 'CPU', data: mydata,color: '#ffc966'})
function formatTime(unixTimeStamp) {
var date = new Date(unixTimeStamp) ;
var hours = date.getHours()
var minutes = "0" + date.getMinutes() //如果是3分4秒,那么返回的分钟数字是3.如果是13分4秒,返回的分钟数字是13
var seconds = "0" + date.getSeconds()
return hours + ":" + minutes.substr(-2) + ":" + seconds.substr(-2) //-2是从倒数第2个元素开始
}
function specialLine(config) {
//计算tickPositions的值
//转化data的横坐标为数字
var length = config.data.length
if (length > 0) {
var i =0 ;
for (i; i< length; i++) {
config.data[i].x = config.data[i].x - '' //将 "1487312495" to number
}
var startTime = config.data[0].x - '';
var endTime = config.data[length - 1].x - '';
var interval = ~~((endTime - startTime) /3)
var tickPositions = [];
if (length >=4) {
tickPositions = [startTime,startTime +interval,startTime +2*interval,endTime]
}else if(length == 3) {
tickPositions = [startTime, ~~((endTime + startTime)/2),endTime]
} else if(length == 2) {
tickPositions = [startTime,endTime]
} else if(length == 1) {
tickPositions = [startTime]
}
Highcharts.chart(config.domId, {
title: {
text: '',
},
xAxis: {
tickPositions: tickPositions,
labels: {
enabled: true,
formatter: function () {
//将timestamp转化为日期
return formatTime(this.value)
}
}
},
tooltip: {
//将timestamp转化为时间
useHTML: true,
formatter: function() {
//return DrawPic.formatTime(this.point.x) + '<br>' + config.name + ':' +this.point.y + config.unit
var showHtml = formatTime(this.point.x) + '<br>' + config.name + ':' +this.point.y + config.unit
return showHtml
}
},
legend: {
enabled: false
},
plotOptions: {
line: {
dataLabels: {
enabled: false
}
},
series: {
color: '#ffc966',
turboThreshold:0
}
},
credits: {
enabled: false
},
series: [{
name: 'whatever',
data: config.data
}]
});
}
}
https://jsfiddle.net/phbLL3q8/

How do I register the on-tap in a paper-icon-button in an ag-grid cell renderer?

I am working on adding ajax call to paper-icon-buttons that are rendered in an ag-grid cell renderer. Here is the script in my custom polymer component. The paper-icon-buttons do show up and clicking on them causes the ripple, but the functions in the on-tap are not being called.
Is there a better way to add the paper-icon-button entries to the cell? How can I add the registration of the on-tap properly?
Thank you!
<script>
function sourceRenderer(params) {
if (params.value)
return '<span>' + params.value + ''
else
return null;
}
function innerCellRendererA(params) {
var imageFullUrl = '/images/' + params.data.type + '.png';
if (params.data.type == 'entity') {
var entityUrl = '/analyze/' + params.data.asource + '/' + params.data.amodel + '/' + params.data.sourceName;
return '<img src="'+imageFullUrl+'" style="padding-left: 4px;" /> ' + params.data.name + ' (' + params.data.sourceName + ')';
}
else if (params.data.type == 'model') {
var entityUrl = '/harvest/' + params.data.asource + '/' + params.data.name;
return '<img src="'+imageFullUrl+'" style="padding-left: 4px;" /> ' + params.data.name + '';
}
else
return '<paper-icon-button src="'+imageFullUrl+'" on-tap="testjdbc" data-args="'+params.data.classname+'~~'+params.data.url+'~~'+params.data.username+'~~'+params.data.password+'"></paper-icon-button> ' +
'<paper-icon-button src="/images/database_export.svg" on-tap="harvestmodel" data-args="'+params.data.classname+'~~'+params.data.url+'~~'+params.data.username+'~~'+params.data.password+'"></paper-icon-button> ' + params.data.name;
}
Polymer({
is: 'easymetahub-analyze',
properties: {
sourcelist: {
type: Array,
notify: true
}
},
testjdbc: function(e){
alert('Foo');
var args = e.target.getAttribute('data-args').split('~~');
},
harvestmodel: function(e){
alert('Bar');
var args = e.target.getAttribute('data-args').split('~~');
},
handleData: function(e) {
var resp = e.detail.response;
this.sourcelist = resp;
},
ready: function() {
},
attached: function() {
agGrid.initialiseAgGridWithWebComponents();
var columnDefs = [
{
headerName: "Name",
'field': 'name',
width: 350,
cellRenderer: 'group',
sort: "asc",
cellRendererParams: {
innerRenderer: innerCellRendererA
}
},
{headerName: "Database Type", field: "databasetype", width: 120 },
{headerName: "URL", width: 250, field: "url" },
{headerName: "User Name", field: "username", width: 120 }
];
var gridOptions = {
columnDefs: columnDefs,
enableColResize: true,
rowHeight: 36,
enableSorting: true,
getNodeChildDetails: function(file) {
if (file.children) {
return {
group: true,
children: file.children,
expanded: file.open,
field: 'name',
key: file.name
};
} else {
return null;
}
},
onGridReady: function(params) {
params.api.sizeColumnsToFit();
}
};
this.$.myGrid.setGridOptions(gridOptions);
var eInput = this.$.quickFilterInput;
eInput.addEventListener("input", function () {
var text = eInput.value;
gridOptions.api.setQuickFilter(text);
});
},
detached: function() {
this.$.myGrid.api.destroy();
}
});
</script>
agGrid's grid options has a property for a callback -- onModelUpdated -- that is called when new rows are added to the grid.
attached: function() {
var self = this;
var gridOptions = {
...
onModelUpdated: function(e) {
self._bindGridIconTap();
}
};
}
You could use this event to query the grid for its paper-icon-buttons and add their on-tap attributes as event handlers.
_bindGridIconTap: function() {
this._bindActionsOnGrid('paper-icon-button', 'tap');
},
_bindActionsOnGrid: function(selector, eventName) {
var self = this;
var buttons = this.$.myGrid.querySelectorAll(selector);
buttons.forEach(function(b) {
self._bindEvent(b, eventName);
});
},
_bindEvent: function(el, eventName) {
var self = this;
var methodName = el.getAttribute('on-' + eventName);
var method = self[methodName];
if (method) {
el.addEventListener(eventName, function(e) {
method(e);
e.stopPropagation();
e.preventDefault();
return false;
});
} else {
console.warn(el.localName, 'listener method not found:', methodName);
}
}
plunker
Note you have a bug in:
var args = e.target.getAttribute('data-args').split('~~');
In a tap event for paper-icon-button, e.target is the icon image. You actually want e.currentTarget, which I've done for you in the Plunker.

chrome.storage not saving data properly

I have an options array:
settings: {
'magnify': false,
'nobinds': true,
'nospoiler': false,
'replies': true,
'stickies': true,
'autogif': true,
'autowebm': true,
'resamplewebm': false,
'archives': true,
'linkifier': true,
'menu': ''
},
I save/get the data like this:
loadSettings: function() {
chrome.storage.local.get(Board.settings, function(items) {
console.log(chrome.runtime.lastError);
console.log(items);
Board.settings = items;
for(var key in Board.settings) {
console.log("loaded [" + key + "] = " + Board.settings[key] + " - \"" + items[key] + "\"");
if(typeof(Board.settings[key]) == 'boolean') {
Board.switchCheckboxAttribute($('#theme-' + key), Board.settings[key]);
} else if(typeof(Board.settings[key]) == 'string') {
$('#theme-' + key).val(Board.settings[key]);
}
}
});
},
saveSettings: function() {
chrome.storage.local.set(Board.settings, function() {
console.log(chrome.runtime.lastError);
$('#theme-msg').html("Done").attr("class", "msg-ok").show().delay(2E3).fadeOut(500);
Board.applySettings();
});
},
switchCheckboxAttribute: function(obj, active) {
console.log('switchCheckboxAttribute(' + obj.attr('id') + ', ' + active + ')');
if(active){
obj.addClass('active');
obj.html("✔");
} else {
obj.removeClass('active');
obj.html('');
}
},
Console output:
undefined board.js:74
Object {archives: true, autogif: true, autowebm: true, linkifier: true, magnify: false…} board.js:75
loaded [archives] = true - "true" board.js:80
switchCheckboxAttribute(theme-archives, true) board.js:107
loaded [autogif] = true - "true" board.js:80
switchCheckboxAttribute(theme-autogif, true) board.js:107
loaded [autowebm] = true - "true" board.js:80
switchCheckboxAttribute(theme-autowebm, true) board.js:107
loaded [linkifier] = true - "true" board.js:80
switchCheckboxAttribute(theme-linkifier, true) board.js:107
loaded [magnify] = false - "false" board.js:80
switchCheckboxAttribute(theme-magnify, false) board.js:107
loaded [menu] = - "" board.js:80
loaded [nobinds] = true - "true" board.js:80
switchCheckboxAttribute(theme-nobinds, true) board.js:107
loaded [nospoiler] = false - "false" board.js:80
switchCheckboxAttribute(theme-nospoiler, false) board.js:107
loaded [replies] = true - "true" board.js:80
switchCheckboxAttribute(theme-replies, true) board.js:107
loaded [resamplewebm] = false - "false" board.js:80
switchCheckboxAttribute(theme-resamplewebm, false) board.js:107
loaded [stickies] = true - "true" board.js:80
switchCheckboxAttribute(theme-stickies, true) board.js:107
event.returnValue is deprecated. Please use the standard event.preventDefault() instead. jquery.min.js:3
switchCheckboxAttribute(theme-resamplewebm, true) board.js:107
undefined
The last runtime error is undefined both times, but when I save data and reload, the saved array stays the same (default). Am I handling this incorrectly?
Answer: Turns out I was updating the visible checkbox on jQuery click, but I did not update the settings value so it did not change, and the change was not recorded when saved.

Unable to format JSON from WCF for HighCharts?

My WCF returns this JSON and i want to bind to HighCharts Pie
Original from WCF -[{"AllRecordsUrl":"http:\/\/EMS\/sites\/IST\/report.aspx","EMSCenterName":"IST","EMSCenterUrl":"http:\/\/EMS\/sites\/IST","Count":2},{"AllRecordsUrl":"http:\/\/EMS\/sites\/LSS\/report.aspx","EMSCenterName":"LSS","EMSCenterUrl":"http:\/\/EMS\/sites\/LSS","Count":17}]
If i hardCode it in cart series as data: [....] it works but the dynamic proccesed data does not..
After processing - [{name: 'IST' , url: 'http://EMS/sites/IST/report.aspx' , y: 2 },{name: 'LSS' , url: 'http://EMS/sites/LSS/report.aspx' , y: 16 }]
Even after processing it to what i showed above highcharts Pie won't work with my data..
I am not sure what is wrong here, would appreciate some guidance
Here's what is done so far ...
function getDataForHub(json) {
var realArray = $.makeArray(json);
//debugger;
//console.log(JSON.stringify(realArray));
var obj = $.parseJSON(JSON.stringify(realArray));
var chartData = [];
$.each(realArray, function (index, item) {
var final;
var element;
var sB = '';
var name = '';
var url = '';
var y = '';
var color = '';
for (element in item) {
if (element == 'EMSCenterName') {
name = 'name' + ": " + "'" + item[element] + "'";
}
if (element == 'AllRecordsUrl') {
url = 'url' + ": " + "'" + item[element] + "'";
}
if (element == 'Count') {
y = 'y' + ": " + item[element];
}
}
sB = name + ' , ' + url + ' , ' + y ;
//console.log(sB);
var elements = [];
//adding each to an array before being pushed to th final array,
elements.push(sB);
chartData.push(elements);
});
return chartData;
}
And here is my Pie
$(function () {
LoadSodByKey("sp.ui.dialog.js", null);
var stdWidth = 530;
var stdHeight = 200;
Highcharts.setOptions({
colors: ['#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
});
$('#containerpie').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: true,
height: stdHeight + 120,
width: stdWidth + stdHeight
},
title: {
text: 'Records per Program'
},
tooltip: {
pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
/*formatter: function () {
return '<b>' + this.point.name;
}*/
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
},
showInLegend: false
}
},
series: [{
type: 'pie',
size: stdHeight,
data:[{name: 'IST' , url: 'http://EMS/sites/IST/report.aspx' , y: 2 },{name: 'LSS' , url: 'http://EMS/sites/LSS/report.aspx' , y: 16 }],
point: {
events: {
click: function(e) {
//alert(e.point.url);
var options = {
url: e.point.url,
title: e.point.name,
allowMaximize: true,
showClose: true,
width: 1100,
height: 500,
dialogReturnValueCallback: function (result, returnValue) {
//location.reload(true);
}
}
SP.UI.ModalDialog.showModalDialog(options);
e.preventDefault();
}
}
}
}]
});
var data = GetData();});
function GetData(){
var chart = $('#containerpie').highcharts();
series = chart.series[0];
//Ajax call to WCF service
$.ajax({
type: 'GET',
contentType: 'application/json; charset=utf-8',
crossDomain: false,
url: 'http://EMS/_vti_bin/EMSDashboard.svc/GetEMSCenterDataForHub',
data: null,
dataType: 'json',
success: function (response) {
var dynamicData = getDataForHub(response);
//this doesnot work
//series.data = dynamicData;
//even this does not work
//series.data.push(dynamicData)
//Wrong, wrong, wrong
//series.data.push(eval('[' +dynamicData +']'));
//gives me count of two but the chart does not load wiht dynamic data
console.log(series.data.length);
},
error: function (message) {
alert(message.statusText);
}
});
}
Thanx
FIXED:
Here's how
mistake = I had set up a static chart and was trying to use the same with $AJAX call where the chart was already created without the "data" being created, instead now the "data" array is created first and then the chart is created using chart = new Highcharts.Chart({....})
Also removed all client side preprocessing of the JSON received from WCF i.e my server object has additional Properties for Highchart rendering such to get ..
[{"name":"IST","url":"http:\/\/<XXXX>\/sites\/IST\/ASASA.aspx","y":2},
{"name":"LASS","url":"http:\/\/<XXXX>\/sites\/LASS\/ASASA.aspx","y":17}]