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

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/

Related

simplest way to update data in VegaEmbed

I made a small graph to show some data from a bluetooth device.
I used a sample I found for VegaEmbed, it was all very easy.
But the sample uses a timer to get data, so even if there is no data the dataset will be changed. What is the simples way to update data inside VegaEmbed from another part of the website ?
I cannot call res.view.change('table', changeSet).run(); from outside VegaEmbded..
Here is snappshot of the code :
(the function handleDataChanged is called when there is bluetooth data.)
function handleDataChanged(event) {
var value = event.target.value;
value = value.buffer ? value : new DataView(value);
let result = {};
let index = 1;
datapointx = value.getInt16(index, /*littleEndian=*/false);
console.log('X: ' + value.getInt16(index, /*littleEndian=*/false));
index += 2;
datapointy = value.getInt16(index, /*littleEndian=*/true);
console.log('Y: ' + value.getInt16(index, /*littleEndian=*/false));
index += 2;
datapointz = value.getInt16(index, /*littleEndian=*/true);
console.log('Z: ' + value.getInt16(index, /*littleEndian=*/false));
index += 2;
}
</script>
<script>
document.querySelector('button').addEventListener('click', function() {
onButtonClick();
});
</script>
<script type="text/javascript">
var vlSpec = {
$schema: 'https://vega.github.io/schema/vega-lite/v3.json',
data: {name: 'table'},
width: 400,
mark: 'line',
encoding: {
x: {field: 'x', type: 'quantitative', scale: {zero: false}},
y: {field: 'y', type: 'quantitative'},
color: {field: 'category', type: 'nominal'}
}
};
vegaEmbed('#chart', vlSpec).then(function(res) {
/**
* Generates a new tuple with random walk.
*/
function newGenerator() {
var counter = -1;
var previousY = [5, 5, 5];
return function() {
counter++;
var newVals = previousY.map(function(v, c)
{
console.log('c = ' + c);
var yval = 0;
if (c == 0)
yval = datapointx;
if (c == 1)
yval = datapointy;
if (c == 2)
yval = datapointz;
return {
x: counter,
// y: v + Math.round(Math.random() * 10 - c * 3),
y: yval,
category: c
};
});
previousY = newVals.map(function(v) {
return v.y;
});
return newVals;
};
}
var valueGenerator = newGenerator();
var minimumX = -100;
window.setInterval(function() {
minimumX++;
var changeSet = vega
.changeset()
.insert(valueGenerator())
.remove(function(t) {
return t.x < minimumX;
});
res.view.change('table', changeSet).run();
}, 100);
});
</script>
The simplest way to update data in an existing vega-lite chart is to use a streaming data model. There is an example in the Vega-Lite documentation here: https://vega.github.io/vega-lite/tutorials/streaming.html

Ng-repeat not searching Object

Having an issue using ng-repeat for my angular object.There is no duplicate data in my object.
Table Html
<table style="border: black solid 2px;width:400px;height:auto;background-color: wheat;">
<tr>
<th>Date</th>
<th>Panels Completed</th>
</tr>
<tr ng-repeat="value in vm.displayData" >
<td style="text-align:center;border: black solid 2px;">{{value}}</td>
<td style="text-align:center;border: black solid 2px;" ng-repeat="x in value">{{x}}</td>
</tr>
</table>
Data Example:
KxRkjsAPf0ThgxBOjiE:
additionalInfo: {components: 8, framingStyle: "SIP 162", nailing:
"150x150", qty: 1, sheathing: "MGO", …}
area: "-KsDT3O8DJIGMXmmyXV_"
dimensions: {area: 0.2, height: 200, length: 1234, weight: 14,
width: 162}
id: "ID"
project: "-KqdccSuHiz__2UZ0AGX"
qa: {completed: 1511442566322, completedOperatives: {…},
diagonalHeight: 1250, diagonalLength: 1250, midHeight: 200, …}
timestamps: {created: 1509089806654, modified: 1511442566322}
type: "Ext"
Javascript(anglarJs)
vm.weekStart = weekStart;
vm.weekEnd= weekEnd;
vm.getPanelByDay = getPanelByDay;
getPanelByDay()
.then(function (data){
console.log(data);
vm.dataData = data;
console.log(vm.dataData);
});
function weekEnd(){
vm.lastDay = plusDays(vm.weekStart("2017-11-21"),5);
return vm.lastDay;
function plusDays(value, days) {
var date = new Date(value);
date.setDate(date.getDate() + days);
date.setHours(23, 59, 59,0);
return date;
function toIsoDate(value) {
var date = asDate(value);
return date.getFullYear()+"-" + ("0" + (date.getMonth()+1)).slice(-2) + "-"+ ("0" + date.getDate()).slice(-2);
function asDate(value) {
return angular.isDate(value) ? value : new Date(value);
}
}
}
}
function weekStart(value) {
if (angular.isDefined(value)) {
var date = new Date(value);
} else {
var date = new Date();
}
date.setDate(date.getDate() - dayOfWeek(date));
date.setHours(0,0,0,0);
return date;
function dayOfWeek(value) {
var date = asDate(value);
return (date.getDay() + 6) % 7;
function asDate(value) {
return angular.isDate(value) ? value : new Date(value);
}
}
function asDate(value) {
return angular.isDate(value) ? value : new Date(value);
}
function toIsoDate(value) {
var date = asDate(value);
return date.getFullYear()+"-" + ("0" + (date.getMonth()+1)).slice(-2) + "-"+ ("0" + date.getDate()).slice(-2);
function asDate(value) {
return angular.isDate(value) ? value : new Date(value);
}
}
}
function getPanelByDay(){
var todayDate = new Date("2017-11-21");
var startDay = new Date(vm.weekStart(todayDate)).getTime();
var endDay = new Date(vm.weekEnd(todayDate)).getTime();
var weeklyPanels = {};
return realDatabaseRef.child("panels").orderByChild("qa/completed").startAt(startDay).endAt(endDay).once("value").then(function(snapshot){
for(snap in snapshot){
var data = snapshot.val();
angular.forEach(data,function(info,key){
var PanelCompletedDate = toIsoDate(info.qa.completed);
if(angular.isUndefined(weeklyPanels[PanelCompletedDate])){
weeklyPanels[PanelCompletedDate] = {};
}
if(angular.isUndefined(weeklyPanels[PanelCompletedDate][key])){
weeklyPanels[PanelCompletedDate][key] = {};
}
weeklyPanels[PanelCompletedDate][key] = info;
});
}
return weeklyPanels;
})
.then(function (pa){
return pa;
});
function toIsoDate(value) {
var date = asDate(value);
return date.getFullYear() + "-" + ("0" + (date.getMonth() + 1)).slice(-2) + "-" + ("0" + date.getDate()).slice(-2);
function asDate(value) {
return angular.isDate(value) ? value : new Date(value);
}
}
}
the JS is a little bit messy, i have taken most of the functions off our current working system and then dropped them into this separate web page.I am able to see that the object that i want to to fill with data and use in the view is full of data, it is just not getting used or being deleted somewhere, but i am still stuck
Any help will be appreciated.
Maybe You should use ng-repeat-start and ng-repeat-end for nested repeat.

Error while copy past data from excel to handsontable grid

> handsontable.full.js?v=1.2:10476 Uncaught TypeError: Cannot read property 'classList' of undefined
> at _removeClass (handsontable.full.js?v=1.2:10476)
> at removeClass (handsontable.full.js?v=1.2:10531)
> at handsontable.full.js?v=1.2:5426
> at done (handsontable.full.js?v=1.2:5502)
> at handsontable.full.js?v=1.2:5517
> at handsontable.full.js?v=1.2:23966
> at ColumnSettings.Handsontable.AutocompleteValidator [as validator] (handsontable.full.js?v=1.2:23949)
It's working fine when i am pasting 4 to 5 columns but when i trying more than 7 getting above error.previously i tested in tab it's works fine there but when i moved handsontable grid to bootstrap modal getting this error.please help i am trying to understand.
please find below how i created handsontable
manualHot = new Handsontable(container, {
rowHeaders: true,
colHeaders: true,
startRows: 100,
startCols: 125,
// columns: columns,
dropdownMenu: true,
contextMenu: true,
filters:true,
manualColumnResize: true,
height: 500,
wordWrap:false,
colWidths: 100,
rowHeights: 23,
autoColumnSize: true,
columnSorting: true,
fixedRowsTop:1,
copyable:true,
sortFunction: function(sortOrder, columnMeta) {
return function(a, b) {
var plugin = manualHot.getPlugin('columnSorting');
var sortFunction;
if (a[0] === 0) {
return -1;
}
switch (columnMeta.type) {
case 'date':
sortFunction = plugin.dateSort;
break;
case 'numeric':
sortFunction = plugin.numericSort;
break;
default:
sortFunction = plugin.defaultSort;
}
return sortFunction(sortOrder, columnMeta)(a, b);
};
},
trimDropdown :false,
formulas: true,
cells: function (row, col, prop) {
var cellProperties = {};
if (row === 0) {
cellProperties.type = 'dropdown';
cellProperties.source= colHeaderArr;
cellProperties.allowInvalid = false;
}
return cellProperties;
},
afterValidate: function (isValid, value, row, prop, source) {
if (source === 'loadData' || source === 'internal' ) {
return;
}
if (!isValid ) {
errorHeader[prop]=headerCols[prop];
}
},
});
manualHot.addHook('beforeChange', function(changes, source) {
dupheaders=[]
dupheaders.length=0;
if (source === 'loadData' || source === 'internal' || changes.length > 1) {
return;
}
var row = changes[0][0];
var prop = changes[0][1];
var newVal = changes[0][3];
var oldVal=changes[0][2];
if ( row ===0) {
headerCols[prop]=newVal;
var sorted_head = headerCols.slice().sort();
for (var i = 0; i < headerCols.length - 1; i++) {
if (sorted_head[i + 1] == sorted_head[i]) {
if(sorted_head[i]){dupheaders.push(sorted_head[i]);}
}
}
if(dupheaders.length>0){
var errMsg='Duplicate Headers :<br>'+dupheaders;
setTimeout(function(){$('#manualDataOnlinePrep-Tab').unblock();},1000);
common.showMessage(errMsg, false, "error", "middle-center");
}
errorHeader.splice(prop, 1);
setColumnType(colProp,prop,newVal, this,txnTypeArr);
}
});
manualHot.init();
}
function setColumnType(columnProp,col,newVal, instance,ddValue) {
if(newVal === 'Reporting Code Description' ) {
columnProp[col].type='dropdown';
columnProp[col].source=ddValue;
}
else{
if(newVal.match(/^.*Date$/)){
columnProp[col].type='date';
columnProp[col].dateFormat=document.getElementById("dateFormat_2").value;
columnProp[col].allowInvalid=true;
}
else if (newVal.match(/^.*Amount$/)){
columnProp[col].type='numeric';
columnProp[col].format= '[00,00,000].00';
columnProp[col].allowInvalid=false;
}
else if (newVal.match(/^.*Rate$/)){
columnProp[col].type='numeric';
columnProp[col].format= '0.[000000]';
columnProp[col].allowInvalid=false;
}
else{
columnProp[col].type='text';
}
}
instance.updateSettings({columns: columnProp},{contextMenu:true});
instance.validateCells(function() {
instance.render();
});
}

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.

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